Generatix : Weblog de Florent Bautista

Tout d’abord, créons une liste clas­si­que :

<ul id="maListe">
	<li><a href="#" title="Premier élément">Premier élément</li>
	<li><a href="#" title="Deuxième élément">Deuxième élément</li>
	<li><a href="#" title="Troisième élément">Troisième élément</li>
	<li><a href="#" title="Quatrième élément">Quatrième élément</li>
</ul>

Le reste, ce n’est que tu CSS. On enlève d’abord les sty­les appli­qués auto­ma­ti­que­ment par les navi­ga­teurs (mar­ges, etc.) :

#maListe
{
	margin:0;
	padding:0;
	list-style-type:none;
}

#maListe li
{
	margin:0;
	padding:0;
}

Pour l’ins­tant, la liste est tou­jours ver­ti­cale. Pour com­pli­quer légè­re­ment, on va sup­po­ser que notre menu aura une lar­geur maxi­male fixe, et que les élé­ments seront cen­trés à l’inté­rieur (lorsqu’il sera hori­zon­tal) :

#maListe
{
	margin:0;
	padding:0;
	list-style-type:none;
	text-align:center;
	width:300px;
}

#maListe li
{
	margin:0;
	padding:0;
}

La pro­priété magi­que pour faire pas­ser le menu à l’hori­zon­tale est “dis­play”, qu’il faut met­tre à “inline” pour cha­que élé­ment de la ligne. Comme ceci :

#maListe
{
	margin:0;
	padding:0;
	list-style-type:none;
	text-align:center;
	width:300px;
}

#maListe li
{
	margin:0;
	padding:0;
	display:inline;
}

On peut ensuite déco­rer comme on sou­haite notre menu. Par exem­ple, en ajou­tant une bor­dure à cha­que élé­ment du menu, une marge, ainsi qu’une cou­leur de fond :

#maListe
{
	margin:0;
	padding:0;
	list-style-type:none;
	text-align:center;
	width:300px;
}

#maListe li
{
	margin:0;
	padding:0;
	display:inline;
	margin:5px;
	background-color:red;
	border:1px solid black;
}

Le menu est pres­que par­fait. SAUF QUE …

Sauf que le fait de limi­ter la lar­geur de notre menu, peut entrai­ner un retour à la ligne sui­vante de cer­tains élé­ments (on aura donc un menu sur 2 lignes). Ce n’est pas gênant. Mais le pro­blème vient du fait que la pro­priété “mar­gin-top” (que l’on a impli­ci­te­ment défi­nie dans “mar­gin”) n’est pas prise en compte sur un élé­ment dont la pro­priété “dis­play” est “inline” (pré­ci­sé­ment le cas de nos élé­ments du menu).

Ce phé­no­mène n’est pas déran­geant lors­que le menu tient sur une seule ligne (on peut s’arran­ger à met­tre une marge infé­rieure plus grande à l’élé­ment qui pré­cède le menu). Mais lorsqu’il est sur plu­sieurs lignes, on se retrouve avec des élé­ments qui, au mieux se tou­chent, voire se che­vau­chent.

Pour cor­ri­ger ce pro­blème, et faire en sorte que la pro­priété “mar­gin-top” soit prise en compte, il faut affi­cher les élé­ments non plus en “inline”, mais en “inline-block”. Mal­heu­reu­se­ment, cette pro­priété n’est pas prise en charge par Fire­fox 2, et dans notre cas pré­cis (pour ce menu), pas non plus par Inter­net Explo­rer 7.

J’ai réussi à trou­ver une astuce sur le net, sur le blog d’Isaac Schlue­ter (”Foo Hack”) plus pré­ci­sé­ment : Cross Brow­ser Sup­port for inline-block Sty­ling. Il s’agit d’uti­li­ser la com­bi­nai­son de ces 4 pro­prié­tés CSS, pour arri­ver au résul­tat sou­haité :

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;

La pre­mière ligne est spé­ci­fi­que à Fire­fox 2 (atten­tion à bien met­tre cette ligne avant “dis­play:inline-block;”). La seconde ligne est la pro­priété dis­play clas­si­que. Les deux der­niè­res lignes ne sont là que pour simu­ler un bon fonc­tion­ne­ment glo­bal. Pri­ses une par une, elle ne réa­gis­sent pas de la même façon qu’ensem­ble.

Le CSS cor­rigé serait donc :

#maListe
{
	margin:0;
	padding:0;
	list-style-type:none;
	text-align:center;
	width:300px;
}

#maListe li
{
	margin:0;
	padding:0;
	margin:5px;
	background-color:red;
	border:1px solid black;

	display:-moz-inline-stack;
	display:inline-block;
	zoom:1;
	*display:inline;
}

Et voilà c’est ter­miné !