Discussion :

[masseur]

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

display:inline;

.
Mais cela ne change rien.

Quelqu'un aurait une idée?

Cordialement.

[masu]

un float:left sur les li

Code :

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

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;
}

[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

[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.

[masseur]

MErci bien.
Je laisserai les pointillets alors.

[masu]

pense a mettre le le tag resolu