Menu css horizontal

**masseur** · 18/05/2006, 15h56

Bonjour.
J'ai suivi un tutorial pour arriver à faire un menu à base de rollover.

Jusque la tout va bien.
Cependant mon menu ne doit pas etre composé de la même image àchaque fois.

Pour cela je rajoute dans la balise <li> une classe pour les différencier.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<ul id="menu">
    <li class="service"><a href="#"></a></li>
    <li class="maintenance"><a href="#"></a></li>
    <li class="formation"><a href="#"></a></li>
    <li class="reseau"><a href="#"></a></li>
</ul>

ENsuite je tape ceci 4 fois en changeant l'url de mon image.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
ul#menu li a
{
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 170px ;
	line-height: 30px ;
	color: #000 ;
	text-indent: 40px ; /* On décale le texte de 40px du bord gauche */
 
	text-decoration: none ;
	background: url(bg_menu.gif) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: 1px solid #dbd ;
}
 
ul#menu li a:hover
{
	background: url(bg_menu.gif) no-repeat 0 -30px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: 1px solid #f97 ;
}

Ca marche nikel mais cependant les images sont les unes sous les autres.
J'aimerais les mettre les une à la suite des autres.

J'ai tenté de faire ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part