espacement vertical entre les <li>

**eoliannne** · 29/08/2013, 11h32

Bonjour,
j'ai créé un menu déroulant en html css jquery avec un première liste horizontale et une seconde verticale sur le modèle ibm.fr avec un liste-style: none . Mais les volets de ma liste sont espacés d'environ 15px je ne sais pas pourquoi... j'ai delete le padding j'y ai appliqué un line-height, j'ai diminué la police à 10px mais rien...

HTML:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class="navigation"> 
<li id="mmmenu" class="toggleSubMenu" ><span><a href="#">Qui sommes nous </a></span> 
<ul class="subMenu" > 
<ul style= "float:left" class="line"><a href="page.php" title="Aller à la page 2.1">Secteurs d'activités:</a> 
 
</ul> 
<ul style= "float:left" class="line"><a href="page.php" title="Aller à la page 2.1">Nôtre méthodologie:<br><br></a> 
 
</ul> 
<ul style= "float:left" class="line"><a href="page.php" title="Aller à la page 2.2">Nos clients:<br><br></a> 
 
</ul> 
 
</ul> 
</li> 
<li id="mmmenu" class="toggleSubMenu" ><span><a href="#"> Produits:</a></span> 
<ul class="subMenu"> 
<ul style= "float:left" class="line" ><a href="pageprod.php" title="Aller à la page 2.1">Prod1</a> 
<div id="ssm1"><li><a href="pageprod.php" title="Aller à la page 2.1">Prod2</a></li> 
 
</ul> 
<ul style= "float:left" class="line" ><a href="crm.php" title="Aller à la page 2.2">Prod3:<br><br></a> 
<div id="ssm"><li><a href="sugar.php" title="Aller à la page sugar">sp</a></li> 
<li><a href="pageprod.php" title="Aller à la page 2.1">sp</a></li> 
<li><a href="pageprod.php" title="Aller à la page 2.1">sp</a></li> 
<li><a href="pageprod.php" title="Aller à la page 2.1">sp</a></li> 
<li><a href="pageprod.php" title="Aller à la page 2.1">sp</a></li></div> 
 
</ul>

CSS

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
.toggleSubMenu {
text-align:center; 
 
		font-size: 20px;
		font-family:GeosansLight,GeosansLight ;
 
}
 
.navigation {
 
  padding: 0;
  list-style: none;
  background: #000;
  position: absolute;
  left: 0%;
  top:5px;
 
  width: 100%;
  font: 1.2em "Trebuchet MS", sans-serif;
 
 
}
.navigation a, .navigation span {
  display: block;
  height: 50px;
  color: white;
  text-decoration: none;
 
}
 
 
.navigation a:hover, .navigation a:focus{
  text-decoration: underline;
   font-size: 21px;
   font-weight: bold;
}
 
.navigation .subMenu {
  font-size: .8em;
 background-color: black ;
 opacity: 0.7;
  font-size: .9em;
  position: absolute;
  top: 47px;
  left: 0px;
 margin-left:0px;
  border: 0px ;
  float: left;
  width: 100%;
  z-index: 2;
 
}
 
.navigation ul.subMenu a {
  background: none;
 
  margin-left:0px;
}
.line a {
 
font-weight: bolder;
}

SCRIPT:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready( function () {
    // On cache les sous-menus :
    $(".navig ul.sub").hide();
    // On sélectionne tous les items de liste portant la classe "toggleSubMenu"
 
    // et on remplace l'élément span qu'ils contiennent par un lien :
    $(".navig li.toggle span").each( function () {
        // On stocke le contenu du span :
        var TexteSpan = $(this).text();
        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
    } ) ;
 
    // On modifie l'évènement "click" sur les liens dans les items de liste
    // qui portent la classe "toggleSubMenu" :
    $(".navig li.toggle > a").click( function () {
 
        // Si le sous-menu était déjà ouvert, on le referme :
        if ($(this).next("ul.sub:visible").length != 0) {
            $(this).next("ul.sub").slideUp("slow");
			$(this).next('navig li.toggle > a').addGlow({  
     // Le rayon du halo (par les navigateur qui supportent)  
    textColor: '#ff0', // La couleur du texte d'arrivé  
    haloColor: '#ffa', // La couleur du halo  
    // la durée  
  });
        }
        // Si le sous-menu est caché, on ferme les autres et on l'affiche :
        else {
            $(".navig ul.sub").slideUp("slow");
            $(this).next("ul.sub").slideDown("normal");
        }
        // On empêche le navigateur de suivre le lien :
        return false;
    });    
 
 
} ) ;

Je suis en larme j'en peux plus de cercher le problème

Invité · 29/08/2013, 12h35

Bonjour,
tu utilises mal les <ul> et <li> :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<ul>
   <li><a href="#">...</a></li>
   <li><a href="#">...</a></li>
   <li><a href="#">...</a>
      <ul>
         <li><a href="#">...</a></li>
         <li><a href="#">...</a></li>
      </ul>
   </li>
   <li><a href="#">...</a></li>
</ul>

=> La galerie CSS : Menus horizontaux
=> recherche : menu horizontal deroulant css jquery

**eoliannne** · 29/08/2013, 15h28

je viens de le modifier et ça n'a absolument rien changé à l'espacement ni même à la forme:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<li id="mmenu" class="toggleSubMenu"><span>Services:</span>
      <ul class="subMenu">
        <li style= "float:left" class="line"><a href="organisation.php" title="Aller à la page 3.1">Organisation:<br><br></a>
 
 
		 <ul>
		 <li><a href="pagesser.php" title="Aller à la page 2.1">org1</a></li>
	     <li><a href="pagesser.php" title="Aller à la page 2.1">org2</a></li>
	     <li><a href="pagesser.php" title="Aller à la page 2.1">org3</a></li>
		 <li><a href="pagesser.php" title="Aller à la page 2.1">org4/a></li>
		 </ul>
 
		</li>
        <li style= "float:left" class="line"><a href="pagesser.php" title="Aller à la page 3.2">Autres<br><br></a>
 
		 <ul>
		 <li><a href="pagesser.php" title="Aller à la page 2.1">au1</a></li>
	     <li><a href="pagesser.php" title="Aller à la page 2.1">au2</a></li>
	     <li><a href="pagesser.php" title="Aller à la page 2.1">au3</a></li>
		 </ul>
 
		</li>
 
		<li style= "float:left" class="line" id="inge"><a href="pagesserv.php" title="Aller à la page 3.1">Etude<br><br></a>
 
		<ul>
		 <li><a href="pagesserv.php" title="Aller à la page 2.1">et1 </a></li>
	     <li><a href="pagesser.php" title="Aller à la page 2.1">et2</a></li>
	     <li><a href="pagesser.php" title="Aller à la page 2.1">et3</a></li>
		 <li><a href="pagesser.php" title="Aller à la page 2.1">et4</a></li>
		 </ul>
 
		</li>
 
		</li>
 
      </ul>
	  </li>

Invité · 29/08/2013, 15h50

1/ Les balises <li> DOIVENT toujours être dans une balise <ul>.
Corrige ton code.

2/ Il n'a rien qui te saute aux yeux ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="..." title="...">...:<br><br></a>

**eoliannne** · 29/08/2013, 16h36

la balise <li> service est dan un <ul> je ne veux pas poster le code en entier parce qu'il est très très long à lire d'où les sous liste et pour les titres c'est fait exprès et c'est provisoire pour une maquette.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<ul class="navigation">
<li id="mmenu" class="toggleSubMenu"><span>Services:</span>
      <ul class="subMenu">
        <li style= "float:left" class="line"><a href="organisation.php" title="Aller à la page 3.1">Organisation:<br><br></a>
 
 
		 <ul>
		 <li><a href="pagesser.php" title="Aller à la page 2.1">org1</a></li>
	     <li><a href="pagesser.php" title="Aller à la page 2.1">org2</a></li>
	     <li><a href="pagesser.php" title="Aller à la page 2.1">org3</a></li>
		 <li><a href="pagesser.php" title="Aller à la page 2.1">org4/a></li>
		 </ul>
 
		</li>
        <li style= "float:left" class="line"><a href="pagesser.php" title="Aller à la page 3.2">Autres<br><br></a>
 
		 <ul>
		 <li><a href="pagesser.php" title="Aller à la page 2.1">au1</a></li>
	     <li><a href="pagesser.php" title="Aller à la page 2.1">au2</a></li>
	     <li><a href="pagesser.php" title="Aller à la page 2.1">au3</a></li>
		 </ul>
 
		</li>
 
		<li style= "float:left" class="line" id="inge"><a href="pagesserv.php" title="Aller à la page 3.1">Etude<br><br></a>
 
		<ul>
		 <li><a href="pagesserv.php" title="Aller à la page 2.1">et1 </a></li>
	     <li><a href="pagesser.php" title="Aller à la page 2.1">et2</a></li>
	     <li><a href="pagesser.php" title="Aller à la page 2.1">et3</a></li>
		 <li><a href="pagesser.php" title="Aller à la page 2.1">et4</a></li>
		 </ul>
 
		</li>
 
		</li>
 
      </ul>
	  </li>
	  </ul>

**eoliannne** · 29/08/2013, 16h41

je suis malpolie quand même j'oublias de vous remercier de prendre le temps de me répondre donc merci à vous c'est gentil

Invité · 29/08/2013, 16h59

De rien.

Tu peux supprimer les <br><br>.
Remplacer par un margin-bottom sur class="line", si tu veux un espace dessous.

Idem pour les styles en ligne style= "float:left" -> à mettre dans la feuille de styles CSS.

**10_GOTO_10** · 29/08/2013, 20h27

Envoyé par jreaux62

1/ Les balises <li> DOIVENT toujours être dans une balise <ul>.

Dit de façon moins poétique:

Il manque <ul> sur le <li>

mais je sors à reculons

**eoliannne** · 30/08/2013, 10h10

Bonjour,
merci pour la réponse mais si vous regardez ler dernier code posé avec le commentaire je dis que je ne peux pas copier le code extrêmement long mais tous les <li> sont dans les <ul>

**JefReb** · 31/08/2013, 09h11

Bonjour,
Je pense que jreaux62 à raison. Il manque des <ul> même si le code est partiellement donné.
Dans votre dernier message:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
		 </ul>
 
		</li>
 
		</li>
 
      </ul>
	  </li>
	  </ul>

Si on regarde bien les 6 ou 7 dernières lignes données, il y a deux </li> qui se suivent. Il faudrait revoir ... désolé.

espacement vertical entre les <li>

CSS

Discussions similaires

Partager

Partager