Discussion :

[Iwebu]

Bonjour à toutes et à tous,

Je rencontre actuellement un problème dans la programmation d'une NavBar en CSS pour un site.



Voici à quoi doit ressemble ma navBar ... mon seul problème se trouve au niveau de l'interligne entre les titres des bouton, tout deux de font-size différentes.

Voici ce que j'obtient aujourd'hui :



Voici donc mon code CSS pour la navBar :

Code :

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
 
#menu, #menu ul {
padding : 0;
margin : 0;
list-style : none;/
text-align : left;
white-space: nowrap;
}
#menu {
display : block;
font-family : Arial;
font-size : 13px;		
}
#menu a {
display : block;
padding-left : 10px;
padding-right : 18px;
background : #000;
background-image:url(images/bordure-menu.png);
background-position:right;
background-repeat:no-repeat;
color : #ffffff;
text-decoration : none;
}
#menu li { 
float: left;
border-right : 0px solid #fff;
}

Mon code HTML pour l'affichage du menu est le suivant :

Code html :

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

1
2
3
4
5
6
7
8
9
 
<ul id="menu" style="width:100%">
<li style="line-height:25px"><a href="#">AMÉNAGEMENTS<br><span style="font-size:11px; font-style:italic">d'esapces</span></a>
    <ul>
      <li><span class="sous-menu"><a href="#">Intérieurs</a></span></li>
      <li><span class="sous-menu"><a href="#">Extérieues</a></span></li>
    </ul>
</li>
</ul>

Lorsque je mets le paramètre "line-height" sur mes <span></span> pour régler la hauteur de mon interligne celui ci réduit également la hauteur de ma navBar, donc ce n'est pas la solution. J'ai pourtant essayer en dehors de ma navBar, mettre tout le contenu de mon texte dans un <p></p> et appliquer un line-height sur chaque <span></span> fonctionne très bien.

J'aimerais pouvoir faire la même chose sans modifier la hauteur de ma navBar .... mais compliqué je suppose si le paramètre "line-height" sur mes <li></li> ? !

J'espère que je me suis fait comprendre .... pas sûre !

Si quelqu'un à la solution je suis preneur !! Merci à tous.

[Muchos]

Si tu veux reproduire le menu de la première image, il faut supprimer le line-height:25px et utiliser padding. Ex:

Code css :

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

#menu a {padding: 12px;}