Bonjour,
 
La barre de navigation horizontale de mon site fait 750 px et j'ai
besoin de 5 boutons. Je souhaiterais qu'ils prennent toute la longueur
de la barre. Si la valeur était attribuée en px, je leur aurais donné
une valeur de 150 pixels chacun. Or j'utilise comme valeur em. En leur
donnant la valeur de 12.3 em, j'arrive pratiquement au bout des 750
px. Si je leur donne plus que 12.3 em chacun, la barre de navigation
s'affiche sur deux lignes. Si je passe à 20%, le résultat n'est guère mieux...
Comment faire pour que les cinq boutons prennent tous les 750 pixels
aussi bien sous IE 6 que sous Firefox 0.9.3?
 
Merci d'avance,
 
#navigation {
margin: 0px;
padding: 0px;
}
 
#nav {
list-style: none;
margin: 0px;
padding: 0px;
text-align: center;
}
 
#nav ul {
padding: 0px;
margin:0px;
list-style: none;
width:12.3em;
z-index:99;
position:relative;
overflow:visible;
text-align: left;
}
 
#nav li {
margin:0;
position: relative;
float:left;
width: 12.3em;
background-color:#DFDFDF;
border:solid 1px #CECECE;
border-bottom:none;
display:block;
height:auto;
}
 
#nav a {
text-decoration:none;
display:block;
padding: 0.1em;
margin:0.2em 0 0.2em 0.1em;
background-color:#DFDFDF;
width:11.5em;
height:1em;
}
 
#nav a:hover{
background-color:#0099CC;
color:#FFFFFF;
background-image:none;
}
 
<div id="navigation">
<ul id="nav">
<li> <a href="#" >Accueil</a></li>
<li> <a href="#" >Accueil</a>
<ul>
<li><a href="#" >Accueil</a></li>
<li><a href="#" >Accueil</a></li>
<li><a href="#" >Accueil</a></li>
</ul>
</li>

Salut,
 
es-tu au courant que les em sont relatifs à la taille du texte définie par le navigateur ? Ils peuvent donc varier. C'est plutôt délicat de faire tenir des em dans du width: xx px; si la structure n'est pas souple. Avec firefox, essaie ctrl+"+" et ctrl+"-" pr modifier la taille du texte, tu verras que ta structure part, si je puis me permettre, en vrille.
 
Si tu tiens à ce que la barre de navigation soit fixée à 750px, il n'y a rien qui à ma connaissance t'empêche de mettre un width en px aux <li>.