[Résolu] Menu horizontal de largeur définie

bonjour,

afin de réaliser un menu horizontal de haut de page dans un template de largeur fixe: voir l'ébauche ici

je cherche à savoir comment ne pas avoir à préciser le padding entre les <li>s et que l'ensemble des <li>s prennent néamnoins toute la largeur:

<div id="container" width="766">
  <ul id="menu" width="100%"> 
    <li><a href="#">accueil</a></li>
    <li><a href="#">news</a></li>
    <li><a href="#">recherche</a></li>
    <li><a href="#">contact</a></li>
  <ul>
</div>

Pour l'instant j'ai bidouillé pour pas que ca se voit trop et j'arrive à un résultat presque satisfaisant(à un ou deux pixels près), mais si je dois changer ne serait-ce qu'un mot je vais devoir ré-expérimenter toute mes valeurs(padding des li, taille de la police)...

J'espère réussir à me faire comprendre car ce n'est vraiment pas évident à expliquer même si finalement c'est tres simple

en gros je voudrais que sans avoir à préciser un padding systématique entre les lis, l'ensemble occupe la complète largeur de 'container'..

merci de votre aide

to
Modifié par wouf (12 Feb 2007 - 14:22)

salut,

Il te suffit d'attribuer la largeur des <li> en pourcentage.
100% correspondra à la taille en pixel de ta liste.
Ainsi si tu as 6 liens dans une liste qui fait 766 pixels, tu donnera comme largeur à tes <li> 16,5%, et tes li feront 126 pixels de large.
Si tu as 5 liens, ça sera 20%, etc...

arf,

alors oui effectivement, je sais pas pourquoi je n'y ai pas pensé avant, merci

enfin bon, pour l'instant ca n'a l'air de fonctionner que sur firefox Je lui ai indiqué une largeur de 16.65%(plutôt que 16.5%, pour qu'il n'y ait pas trop d'erreur d'arrondi à la fin)et tout marche impécablement: plus même un px d'écart!; mais ca n'a pas l'air de plaire à IE qui doit calculer les largeurs respectives des li on ne sait trop comment et qui me fait passer le dernier élément à la ligne alors qu'il aurait la place de le caser...



Il n'y aurait pas un moyen de ne pas spécifier de tels attributs(padding, width) pour chaque item et que la disposition soit ainsi même indépendante du nombre d'items?...

merci
Modifié par wouf (12 Feb 2007 - 14:15)

bon j'ai trouvé pour IE, je lui ai mis un multiple de 6: 768 et il est content

je passe donc en résolu, merci mikachu

to

a écrit :
mais ca n'a pas l'air de plaire à IE qui doit calculer les largeurs respectives des li on ne sait trop comment et qui me fait passer le dernier élément à la ligne alors qu'il aurait la place de le caser...
Il n'y aurait pas un moyen de ne pas spécifier de tels attributs(padding, width) pour chaque item et que la disposition soit ainsi même indépendante du nombre d'items?...

En fait si je conseillais un pourcentage arrondi encore plus en dessous, c'est surtout qu'IE intègre les marges et/ou padding dans la largeur, et qu'avec un total de 100% exactement ou très proche ca peut poser des soucis si d'autres propriétés agrandissent la largeur.