Line-height

eolianne -  
 eolianne -
Bonjour,

je suis en pleine création de mon menu jquery et mon html de base est constitué de balises ul et li mais dans mes sous menus les lignes sont très très très espacées malgré le line-height: 3px que j'ai déjà essayé d'applique à toutes mes classe de menu de sous menu etc... aidez moi s'il vous plait ! merci d'avance à tous

2 réponses

Réponse 1 / 2
gardiendelanuit Messages postés 1854 Statut Membre 264
 
Bonjour,
On peut voir le code de tout ça?
0
eolianne
 
<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>
<ul style= "float:left" class="line"><a href="pageprod.php" title="Aller à la page 2.3">Prod4<br><br></a>
<div id="ssm"><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>
<ul style= "float:left" class="line"><a href="pageprod.php" title="Aller à la page 2.3">Prod5<br><br></a>
<div id="ssm1"><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>
<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>
</ul>

</li>
<li id="mmenu" class="toggleSubMenu"><span>Services:</span>
<ul class="subMenu">
<ul style= "float:left" class="line"><a href="organisation.php" title="Aller à la page 3.1">Serv1<br><br></a>
<div id="ssm1" class="ssmenu"><li><a href="pagesser.php" title="Aller à la page 2.1">ss</a></li>
<li><a href="pagesser.php" title="Aller à la page 2.1">ss</a></li>
<li><a href="pagesser.php" title="Aller à la page 2.1">ss</a></li>
<li><a href="pagesser.php" title="Aller à la page 2.1">ss</a></li></div>
</ul>
<ul style= "float:left" class="line"><a href="pagesser.php" title="Aller à la page 3.2">Serv2<br><br></a>
<div id="ssm" class="ssmenu"><li><a href="pagesserv.php" title="Aller à la page 2.1">ss</a></li>
<li><a href="pagesser.php" title="Aller à la page 2.1">ss</a></li>
<li><a href="pagesser.php" title="Aller à la page 2.1">ss</a></li></div>
</ul>
<ul style= "float:left" class="line" id="inge"><a href="pagesserv.php" title="Aller à la page 3.1">Serv3<br><br></a>
<div id="ssm1"><li><a href="pagesserv.php" title="Aller à la page 2.1">ss </a></li>
<li><a href="pagesser.php" title="Aller à la page 2.1">ss</a></li>
<li><a href="pagesser.php" title="Aller à la page 2.1">ss</a></li>
<li><a href="pagesser.php" title="Aller à la page 2.1">ss</a></li></div>
</ul>
</li>

</ul>
</li>
<li id="mmenu" class="toggleSubMenu"><span><a href="#"><b>Solutions</b></a></span>
<ul class="subMenu" >
<ul style= "float:left" class="line"><a href="solutions_metiers_orientes_si.php" title="Aller à la page 2.1"><b>sol1</b><br><br></a>

</ul>
<ul style= "float:left;" class="line"><a href="pagessol.php" title="Aller à la page 2.1"><b>sol2</b><br><br></a>

</ul>
<ul style= "float:left" class="line"><a href="pagessol.php" title="Aller à la page 2.2">sol3<br><br></a>

</ul>
<ul style= "float:left" class= "line"><a href="pagessol.php" title="Aller à la page 2.2">sol4<br><br></a>

</ul>
</ul>
</li>
<li id="mmenu" class="toggleSubMenu"><span></span></li>
</ul>




</div>
0
eolianne
 
le script: 

$(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;
    });    


} ) ;
0
eolianne
 
le CSS 

.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;
  padding: 3px 20px;
  margin-left:0px;
}
.line a {

font-weight: bolder;
}
.ssmenu a{
line-height:0px;
}

#mmenu {
float: right;
 width:10%;
 text-align: left; 
 
}


#mmmenu {
float: right;
 width:20%;

 
}
0
Réponse 2 / 2
gardiendelanuit Messages postés 1854 Statut Membre 264
 
Commence par réduire ton height dans
 .navigation a, .navigation span

ainsi que ton padding (1er argument) dans 
.navigation ul.subMenu a
0
eolianne
 
ça ne marche pas les écritures sont réduites mais toujours aussi espacées... j'ai même supprimé le padding
0

Discussions similaires

MySQL error in file: /engine/classes/mysql.php at line 53
mela30100 -
jordane45 -

3 réponses
Différence sortie "line-in" et sortie "casque"
Cabby -
Cabby -

4 réponses
Où brancher le câble sur "line OUT" ou "line IN"
liberteegalite2 -
matrix4422 -

9 réponses
que signifie vty ??
sirin -
Ange190 -

4 réponses
Enceinte AEG et sortie Line In
Alanb85 -
STARGATE43 -

6 réponses