Menu affiché en ligne et taille totale fixe

Bonjour,

Je n'arrive pas à voir comment réaliser un menu en ligne en CSS.

J'ai pour l'instant coté html :

a écrit :

<div class="conteneur">
<ul class="menu1">
<li><a href="#">Accueil</a></li>
<li><a href="#">Ma page 2 est très très très cool</a></li>
<li><a href="#">Mon compte</a></li>
<li><a href="#">Actu</a></li>
</ul>
</div>

Et coté CSS :

a écrit :

#conteneur{ width:500px;}
#menu1 {padding:0; margin:0}
#menu1 li {display:block; float:left;}

Le menu doit prendre toute la largeur du conteneur, soit 500px.
La somme des width des <li> doit donc faire aussi 500px.
Le problème est que la taille de chaque <li> dépend de son contenu. Il est exclut de mettre pour chaque <li> une taille fixe en CSS qui correspond grosso modo, car le contenu va être généré par un CMS et pourra donc évoluer, et il y aura des versions dans d'autres langues qui modifieront le nombre de caractères.

Avez-vous une idée ?
Modifié par cescarment (10 Feb 2011 - 15:25)

Bonjour, le float:left sur li est bon, mais essayes de retirer le display:block du li (et éventuellement de l'attribuer au li a).
Tes li seront toujours inline et donc proportionnel au contenu.
Par contre pour que la somme des li corresponde à la largeur de ton conteneur, la ca correspond à une mise en place block, tu peux attribuer 500px à ton ul.
Je pense que ca ne répond pas tout à fait à tes attentes, mais soit la balise inline s'adapte en fonction du contenu, soit une balise block a des dimensions définie (fixe ou %) mais sans rapport au contenu.

En effet il me semble bien que ça soit impossible à faire en CSS. Merci.