Menu css sans taille fixe pour les elements [Resolu]

Bonjour,

J'ai suivi ce super-tuto pour m'aider a la création d'un menu.
http://www.alsacreations.com/xmedia/tuto/exemples/design_css/etape4.html

J'ai reçu une maquette d'un graphiste pour un design web et la différence avec le tuto est que les éléments du menu doivent s'adapter en taille pour prendre toute la largeur a disposition. Et que je ne peux pas mettre une taille fixe car le nombre d'éléments du menu est variable.
De plus chaque élément doit avoir la même taille (donc en fait ils ont une taille de la largeur du menu divisé par le nombre d'éléments)

Savez-vous si cela est possible ?
Si oui avec vous des pistes sur la façon de procéder ?

D'avance merci
Modifié par Nintendoman (11 Jan 2012 - 17:34)

Bonjour et bienvenue,

Nintendoman a écrit :
De plus chaque élément doit avoir la même taille (donc en fait ils ont une taille de la largeur du menu divisé par le nombre d'éléments)

Ça ça me fait penser immédiatement à display: table-cell;. Compatible IE8+, tant pis pour IE7- qui se contentera de "son" inline-block (inline et soit zoom:1 soit une autre propriété qui donne le hasLayout)

Nintendoman a écrit :

J'ai reçu une maquette d'un graphiste pour un design web et la différence avec le tuto est que les éléments du menu doivent s'adapter en taille pour prendre toute la largeur a disposition. Et que je ne peux pas mettre une taille fixe car le nombre d'éléments du menu est variable.

display: table; ou tout élément bloc font occuper toute la largeur à un élément. Il suffit de ne pas préciser de largeur.

Avec cela, la largeur des li s'adaptera à leur contenu ce qui n'est pas ce que tu recherches. Il faudra probablement passer dans l'autre mode de rendu des tableaux :

ul {
  table-layout: fixed;
}

li {
  width: 10%;
}

et fixer la même largeur aux items de liste affichés comme des cellules de tableau. Cette largeur a l'air de devoir être inférieure à 100% divisé par le nombre d'items (je maîtrise pas l'algorithme de rendu avec table-layout: fixed mais peu importe : 1% fera l'affaire )

Démo en ligne: http://jsfiddle.net/PhilippeVay/nFYAg/
Modifié par Felipe (11 Jan 2012 - 13:37)

Génial !

Merci pour la réponse rapide ! Ça a bien fonctionné avec le display:table-cell