Menu css horizontal

Version imprimable

Menu css horizontal

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:

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:

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:

display:inline;

.
Mais cela ne change rien.

Quelqu'un aurait une idée?

Cordialement.

un float:left sur les li

Code:

1
2
3
4
5
6
7
8
9
10
11
12
ul#menu {
    margin: 0 ;
    padding: 0 ;
    list-style-type: none ;
    width: 860px;
}
 
ul#menu li {
    margin: 0 0 5px 0 ;
    padding: 0 ;
    float: left;
}

18/05/2006, 16h24
masseur

Merci bien.

Par contre sous IE quand je clic sur ces zones de rollover tout est impeccable.
Par contre sous firefox cela laisse des pointilles autour de la zone de rollover.
Y doit y avoir une ruse pour enlever cela non?
Merci
18/05/2006, 22h47
masu

je pense que tu parle de ca:

http://www.developpez.net/forums/sho...d.php?t=146716

C'est un peu chiant soit t'es obligé de mettre du js soit tu salope ton css avec un propriété non w3c.
Si tu prefere utiliser la propriete css mais que tu veu pouvoir valider le css de ton site, tu peu feinter le validateur en ligne en ajoutant cette propriété a ta feuille de style en js.

personellement j'avais ce petit cadre en pointillé ne m'a jamais derangé et je me demande si le jeu en vaut vraiement la chandelle.
20/05/2006, 21h51
masseur

MErci bien.
Je laisserai les pointillets alors.
21/05/2006, 13h29
masu

pense a mettre le le tag resolu