Menu Horizontal et width variable suivant nombre d'element

Bonjour,

Je travaille actuellement sur un menu en css tout ce qu'il y'a de plus basique.
Une liste <ul> & <li> dans un div "menu" dont le width est de 100%. Le site étant fait de manière dynamique, j'aurais besoin que mes éléments <li> prennent la totalité du width menu.

Cad, si 1 element le width=100%, si deux elements le width=50%,si 3 elements le width=33%, si 4 elements le width=25%, si 5 elements....

Je n'arrive pas a trouver les bons paramètre voici mon code actuel.

Merci d'avance de votre aide

	<div class="menu">
			<ul>
				<li><a href="page1.html">page1</a></li>
				<li><a href="page2.html">page2</a></li>
				<li><a href="page3.html">page3</a></li>			
			</ul>
	</div>

.menu {
float:left;
margin-top:20px;
background-image:url(../images/menu.png);
width:100%;
}

.menu ul {
list-style-type:none;
}

.menu li {
 float:left; /*pour IE*/
 list-style-type:none;
 }
 
.menu ul li a {
background-image:url(../images/menu.png);
line-height: 2em;
color: #FFFFFF;
display:block;
width : 180px;
text-align:center;
padding:5px;
border:0px;
 }

.menu  a:hover {
background-image:url(../images/menu_hover.png);
color: #5b5b5c;
 } 

Bonjour,

Pour commencer, une remarque sur ton code: le float:left sur les éléments LI n'est pas juste «pour IE» comme le dit le commentaire. Si tu l'enlèves, les items de ton menu ne seront plus alignés, quel que soit le navigateur. Du moins avec le code que tu montres.

Ensuite, le rendu que tu cherches à obtenir est celui des cellules de tableau. Tu peux réaliser ça directement en CSS:

.menu ul {
  display: table;
  width: 100%;
  padding: 0;
  margin: 0;
}
.menu li {
  display: table-cell;
}

Deux problèmes en perspective:

- Si tu as beaucoup d'items dans ton menu, tu vas te retrouver avec des cellules très étroites (plutôt qu'un passage sur deux lignes par exemple). Donc si tu as une limite supérieure au nombre d'items, c'est mieux.

- Ces valeurs de la propriété display ne sont supportées dans Internet Explorer qu'à partir de la version 8. Pour IE7 (et pour IE6 si tu en assures encore le support), il faudra dégrader le rendu en utilisant un float:left sur les LI par exemple.
Modifié par Florent V. (05 Mar 2010 - 11:56)

Merci de cette réponse si rapide, et efficace.

Par contre ta solution est exactement ce que je souhaite, sauf que en application pour trois colonne çà me fait quelque chose de la sorte

-----------------------------------------
| li1 | li2 | li3 |
-----------------------------------------

J'ai l'impression que sur un width à 100% mon li1 et li3 sont à 40% et le li2 à 20%
Comment lui dire de faire les cell de manière égale ?

Et pour répondre a ta question, effectivement, ma liste ne dépassera pas 6 éléments, valeur fixée a l'avance.

Tant pis pour IE je dégrade le visuel, avec une feuille a part