CSS: Pb de rollover
Salut,
J'éprouve un pb de rollover. Voici le code que j'ai employé, mais il ne fonctionne pas.
HTML:
CSS:
Merci !
J'éprouve un pb de rollover. Voici le code que j'ai employé, mais il ne fonctionne pas.
HTML:
<li><a href="index.php?page=accueil" class="ro"><img src="Accueil_1.gif"></a></li>
CSS:
a.ro { background-image: url('Accueil_1.gif'); background-repeat: no-repeat; }
a.ro:hover { background-image: url('Accueil2.gif'); background-repeat: no-repeat; }
Merci !
Configuration: Windows XP Firefox 2.0
7 réponses
-
ContributeurBonjour,
Essaye après avoir supprimé<img src="Accueil_1.gif">
?
-
Gihef,
Si je fais ce que tu dis, l'image du bouton disparaît complètement. -
ModérateurBonsoir.
Ce doit être parce que le a ne prend pas de place quand il n'y a aucun texte.
Essaye ce code CSS :
(en enlevant la balise img).ro{background:url('Accueil_1.gif') no-repeat center} .ro:hover{background:url('Accueil_2.gif') no-repeat center} .ro,.ro:hover{display:block;margin:0;padding:0}
-
Sylvain,
Merci pour ton coup de main, mais toujours pas d'image visible avec le code que tu m'as fourni. -
ModérateurMême en enlevant la balise img du code xhtml ?
-
Sylvain,
Afin d'être sûr que nous nous comprenons, voici mon code à présent:
HTML:<a href="#" class="ro"></a>
CSS:.ro { background:url('Accueil_1.gif') no-repeat center } .ro:hover { background:url('Accueil_2.gif') no-repeat center } .ro, .ro:hover { display:block; margin:0; padding:0 } -
ModérateurEssaye en mettant ca à la dernière ligne :
.ro,.ro:hover{display:block;margin:0;padding:0;width:largeurdelimagepx;height:hauteurdelimagepx}
(en supposant que Accueil 1_l et 2.gif fassent la même taille)
Par exemple si les images font 10 pixels de large et 20 de long :
.ro,.ro:hover{....width:10px;height:20px}
