[résolu]Rollover dans mon menu

Bonjour,

Voila, j'ai quelques problèmes avec un menu.
J'ai inclus des rollover à l'intérieur, mais je ne comprends pas pourquoi et comment mon image se répéte.Comment individualisé mes images, étant donné que ça ne sera pas les même...
voici le code html

 <div class="element_menu">
          <ul>
            <img alt="logo vitamine c" title ="vitamine c communique vos idées"  width="56" height="46"    src="images/lec.gif"/>
            
			<li> <a href="#dormir" title="Accesskey: 1" accesskey="2"> </a></li>
			
            <li>
            <a href="#voir" title="Accesskey: 2" accesskey="2"> </a></li>
            <li>
            <a href="#sentir" title="Accesskey: 3" accesskey="3">  </a></li>
          </ul>
        </div>

et la css

.element_menu {
	padding: 0;
	color: #ffffff;
	letter-spacing: 0.2em;
	margin-bottom: 0px;
	position: relative;
	float: right;
}
/* Quelques effets sur les menus */
.element_menu h3 {
	color: #9523E7;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.4em;
	font-weight: bold;
	padding: 0;
	margin: 0;
	top: -10px;
	position: relative;
	letter-spacing: 0.2em;
	text-align: center;
}
.element_menu ul {
/* Toutes les listes  Ô¡ puces se trouvant dans un menu */
	list-style: none;
	padding: 0 0 0 2px;
	margin: 0 0 5px 2px;
	text-decoration: none;
	letter-spacing: 0.6pt;
}
.element_menu a {
/* Tous les liens se trouvant dans un menu */
	display: block;
	padding: 3px 0px 3px 0px;
	
	
     width: 195px; /* largeur de l'image réactive */
     height: 14px; /* hauteur de l'image réactive */
     background-image: url(../images/ecouter.gif); /* source de l'image de départ */
     background-repeat: no-repeat;
}
.element_menu a:active, a:visited {
	
}
.element_menu a:hover, #menu a:hover
/* Quand on pointe sur un lien du menu */
 { /* définition de la classe "image" de la balise <a> au survol */
     background-image: url(../images/ecouter_r.gif); /* source de l'image d'arrivée */
     }

merci pour votre aide
Modifié par dups (25 Oct 2005 - 18:32)

Bonjour,

Il va te falloir définir un ensemble de règles CSS pour chaque lien dont l'image est différente, donc ici six règles à écrire, chacune étant inspirée du ".element_menu a" et du ".element_menu a:hover". Le plus simple est de les nommer comme tes ancres, par exemple :

.element_menu a#dormir {
...
 background-image: url(../images/dormir.gif);
...
}

.element_menu a#dormir:hover {
...
 background-image: url(../images/dormir_r.gif);
...
}

et dans ton code HTML :

...
 <li> <a id="dormir" href="#dormir" title="Accesskey: 1" accesskey="2">
 </a></li>
...

Et n'hésite pas à parcourir les tutoriels

Merci, ça fonctionne parfaitement.
En m'aidant des tuto, j'ai bien saisi l'astuce

Par contre j'ai un derniers souci avec une marge, qui diffère sous IE FF OP.
Sous FF c'est parfait les autres tout bouges. En changeant la valeur de la marge droite ( 10px) sousmenu, plus rine ne correspond

#sousmenu {
	width: 194px;
	height: auto;
	float: right;
	margin: 40px 10px 0 0;
	padding: 0;
	text-decoration: none;
	border: none;
}
.element_menu {
	padding: 0;
	color: #ffffff;
	
	margin: 0;
	position: relative;
	float: right;
	border:solid red;
}
/* Quelques effets sur les menus */
.element_menu h3 {
	color: #9523E7;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.4em;
	font-weight: bold;
	padding: 0;
	margin: 0;
	top: -10px;
	position: relative;
	letter-spacing: 0.2em;
	text-align: center;
}
.element_menu ul {
/* Toutes les listes  Ô¡ puces se trouvant dans un menu */
	list-style: none;
	padding: 0 0 0 2px;
	margin: 0 0 5px 2px;
	text-decoration: none;
	letter-spacing: 0.6pt;
}
.element_menu a {
/* Tous les liens se trouvant dans un menu */
	display: block;
	padding: 3px 0px 3px 0px;
	width: 180px;
	border-bottom: 1px solid #ffffff;
	
	text-decoration: none;
}
.element_menu a#ecouter {
  width: 195px; /* largeur de l'image réactive */
     height: 14px; /* hauteur de l'image réactive */
background-image: url(../images/ecouter.gif);
background-repeat:no-repeat;

}

.element_menu a#ecouter:hover {

background-image: url(../images/ecouter_r.gif);
background-repeat:no-repeat;
  width: 195px; /* largeur de l'image réactive */
     height: 14px; /* hauteur de l'image réactive */
}

.element_menu a#voir {
  width: 195px; /* largeur de l'image réactive */
     height: 14px; /* hauteur de l'image réactive */
background-image: url(../images/voir.gif);
background-repeat:no-repeat;

}

.element_menu a#voir:hover {

background-image: url(../images/voir_r.gif);
background-repeat:no-repeat;
  width: 195px; /* largeur de l'image réactive */
     height: 14px; /* hauteur de l'image réactive */
}  

Je ne parviens pas à saisir le problème, qui parmis vous voir le truc...
mon code html: <div id="sousmenu">
        <!-- sousmenu-->
        <div class="element_menu">
          <ul>
           
           
		     <li> <a id="ecouter" href="#ecouter1" title="Accesskey: 1" accesskey="1">
			</a></li>
			
			<li> <a id="voir" href="#voir1" title="Accesskey: 2" accesskey="2">
			</a></li>
          </ul>
        </div>
        <div>

Merci de votre aide...

si ce n'est pas compréhensible, je vous envoie une lien
merci d'avance
Modifié par dups (22 Oct 2005 - 17:30)