Menu horizontal en liste avec width particulier pour chaque item

Bonjour

De retour pour une petite question, je dois faire un menu horizontal en CSS, j'en ai déja fait un en utilisant le principe des listes en display: inline; seulement ici j'ai une autre contrainte, sur le design réalisé par le graphiste de la boite chaque item cliquable du menu a une largeur et une couleur particuliere. Voici mon code CSS :

#header-4 {margin-bottom: 4px; border: 0px solid #E0E0E0; text-align: right; color: #FFF;}
.header-4-1 {display: inline; margin-right: 3px; width: 132px; height: 19px; background: #6AC2CA;}
.header-4-2 {display: inline; margin-right: 3px; width: 164px; height: 19px; background: #88B3CC;}
.header-4-3 {display: inline; margin-right: 3px;width: 177px; height: 19px; background: #2FB07C;}
.header-4-4 {display: inline; margin-right: 3px;width: 94px; height: 19px; background: #E59D36;}
.header-4-5 {display: inline; margin-right: 3px;width: 75px; height: 19px; background: #A26671;}
.header-4-6 {display: inline; width: 63px; height: 19px; background: #666666;}

Et mon XHTML :

<!-- start of header 4 -->
<div id="header-4">
	<li class="header-4-1">pom</li>
	<li class="header-4-2">pam</li>
	<li class="header-4-3">tan</li>
	<li class="header-4-4">tong</li>
	<li class="header-4-5">spop</li>
	<li class="header-4-6">dam</li>
<!-- end of header 4 -->
</div>

(je sais que pour etre valide il faut introduire la liste, je le ferais plus tard, de meme le border en 0px me sert a tester)

Ca fonctionne sous IE, mes width sont bien prises en compte, mais pas sous mozilla, une idée ? Merci d'avance, je continue mes recherches sur la toile, si je trouve la solution j'édite en donnant le lien
Modifié par malau (15 Apr 2005 - 11:55)

bon, le codeur de la boite est venu jeter un oeil, et il m'a déconseillé d'utiliser les listes pour des menus, pourtant j'ai lu un article déconseillant d'utiliser les div a foison (ce qu'on a fait, et ca fonctionne du coup évidemment), qui croire ? je vais essayer de relire cet article

edit :

le nouveau css :

#header-4 {margin-bottom: 4px; border: 0px solid #E0E0E0;}
.header-4-1 {float: left; width: 132px; height: 19px; background: #6AC2CA;}
.header-4-2 {float: left; margin-left: 3px; width: 164px; height: 19px; background: #88B3CC;}
.header-4-3 {float: left; margin-left: 3px; width: 177px; height: 19px; background: #2FB07C;}
.header-4-4 {float: left; margin-left: 3px; width: 94px; height: 19px; background: #E59D36;}
.header-4-5 {float: left; margin-left: 3px; width: 75px; height: 19px; background: #A26671;}
.header-4-6 {float: left; margin-left: 3px; width: 63px; height: 19px; background: #666666;}

et le xhtml :

<div id="header-4">
	<div class="header-4-1">pom</div>
	<div class="header-4-2">pam</div>
	<div class="header-4-3">tan</div>
	<div class="header-4-4">tong</div>
	<div class="header-4-5">spop</div>
	<div class="header-4-6">dam</div>
<!-- end of header 4 -->
</div>

une solution pour la version list m'intéresse toujours cependant Histoire de comprendre l'erreur si erreur il y a
Modifié par malau (15 Apr 2005 - 12:29)

malau a écrit :
bon, le codeur de la boite est venu jeter un oeil, et il m'a déconseillé d'utiliser les listes pour des menus, pourtant j'ai lu un article déconseillant d'utiliser les div a foison (ce qu'on a fait, et ca fonctionne du coup évidemment), qui croire ? je vais essayer de relire cet article

Peut-être que ton codeur n'est pas très au courant de la bonne utilisation du HTML

http://www.la-grange.net/w3c/html4.01/struct/lists.html#h-10.4

W3C a écrit :
L'élément MENU était conçu pour les listes de menu sur une seule colonne. Les deux éléments ont la même structure que l'élément UL, seule leur restitution diffère. En pratique, l'agent utilisateur restituera une liste DIR, ou MENU, exactement comme une liste UL.

Nous recommandons fortement d'utiliser l'élément UL à leur place.

merci pour le lien, en effet c'est ce qui me semblait avoir percu, je débute dans les CSS et les normes, alors autant prendre les bonnes habitudes dés le début

Bonjour,
tu pourras répondre à ton codeur qu'il suffit de regarder d'un peu plus près :
ni iE ni FireFox ne lisent tes "width", je viens de faire le test.
Par contre, avec une liste, tu arrives à un code bien plus léger. Je pensais te donner deux indications : regroupe les caractères communs, et ensuite de supprimer tes "width", et remplacer tes margin par des padding...
Ensuite, tes height ne sont pas pris en compte non plus, mais utilisent une hauteur de ligne normale...
Je te donne donc le code (plus léger...) et efficace pour les deux, où tu peux faire varier par rapport aux bords, ainsi que les écarts entre tes boutons...

#header-4  li {display: inline;}
.header-4-1 { padding-right: 3px; background: #6AC2CA;}
.header-4-2 { padding: 3px;  margin: 0 3px; background: #88B3CC;}
.header-4-3 { padding: 0 3px; margin-left: 6px; background: #2FB07C;}
.header-4-4 { padding: 3px 0; margin-right: 3px; background: #E59D36;}
.header-4-5 { padding-right: 3px; margin-right: 3px; background: #A26671;}
.header-4-6 { background: #666666;}

Voili voilà... évidemment, tes boutons ne sont plus tous pareils, tu choisis les propriétés qui te conviennent...
Parce qu'une liste de liens, c'est une liste de lien...et non des sub-DIV-isions...
J'oubliais, ça me semblait allmer de soi, à utiliser avec une liste, et non tes div...
Modifié par Macpom (15 Apr 2005 - 12:49)