Rollover avec images différentes

Bonjour à toute la communauté.
Je suis un débutant dans le domaine de la création de site web... mais je me soigne.
Je tente de réaliser un site web avec mes quelques moyens en xhtml et en css.

J'ai découvert grâce à vos tutoriels comment entreprendre un menu rollover en css.
J'ai tenté de l'adapter pour assigner une image par lien.
Sur firefox tout marche comme prévu mais sur IE7 cela ne fonctionne pas du tout et ignore même les liens .

Je vous communique mon code en xhtml et en css pour qu'une âme charitable m'offre son aide.

CODE XHTML :

<div id="menu">

<h3>MENU
</h3>

<ul>

<li id="image_menu_mon_compte"><a class="image_mon_compte" href="mon_compte.html" alt="Mon compte">Mon compte</a>
</li>
<li id="image_menu_commander"><a class="image_commander" href="commander.html" alt="Commander">Commander</a>
</li>
<li id="image_menu_panier"><a class="image_panier" href="panier.html" alt="Panier">Panier</a>
</li>
<li id="image_menu_news"><a class="image_news" href="index.html" alt="Panier">News</a>
</li>
<li id="image_menu_favoris"><a class="image_favoris" href="favoris.html" alt="Favoris">Favoris</a>
</li>

</ul>

</div>

CODE CSS :

#menu ul
{
list-style-type: none;
margin: 0px;
padding: 0px;
}

#menu li a
{
margin: 0px;
margin-bottom: 5px;
padding: 0px;
text-indent: -50000px;
}

#image_menu_mon_compte a
{
display: block;
background: url("images_supergameland/image_menu_mon_compte.png") no-repeat;
height: 150px;
}

#image_menu_mon_compte a:hover
{
background: url("images_supergameland/image_menu_mon_compte.png") 0 no-repeat -150px;
padding: 0px;
}

#image_menu_commander a
{
display: block;
background: url("images_supergameland/image_menu_commander.png") no-repeat;
height: 150px;
}

#image_menu_commander a:hover
{
background: url("images_supergameland/image_menu_commander.png") 0 no-repeat -150px;
padding: 0px;
}

#image_menu_panier a
{
display: block;
background: url("images_supergameland/image_menu_panier.png") no-repeat;
height: 150px;
}

#image_menu_panier a:hover
{
background: url("images_supergameland/image_menu_panier.png") 0 no-repeat -150px;
padding: 0px;
}

#image_menu_favoris a
{
display: block;
background: url("images_supergameland/image_menu_favoris.png") no-repeat;
height: 150px;
}

#image_menu_favoris a:hover
{
background: url("images_supergameland/image_menu_favoris.png") 0 no-repeat -150px;
padding: 0px;
}

#image_menu_news a
{
display: block;
background: url("images_supergameland/image_menu_news.png") no-repeat;
height: 150px;
}

#image_menu_news a:hover
{
background: url("images_supergameland/image_menu_news.png") 0 no-repeat -150px;
padding: 0px;
}

N'hésitez pas à me donner votre avis sur la façon dont j'ai écrit mon code et si je peux le réduire...
Merci.

On pourra mieux te conseiller si ton code est clair

En mettant ton code entre 2 balises [code], ce sera plus clair.

Bonne chance

bonsoir,

ta syntaxe semble incorrect :

background: url("images_supergameland/image_menu_commander.png") 0 no-repeat -150px;

essai comme ceci plutot :

background: url("images_supergameland/image_menu_commander.png") 0  -150px no-repeat;

Les coordonnées se doivent d'être regroupées.

GC

Merci à tous les deux pour vos débuts de réponse.
Je vais tâcher d'être plus clair.

J'ai 5 images que j'ai placé à gauche de mon site pour créer le menu.
Ces 5 images sont des liens.
Chaque image représente en fait deux images :
- une à l'état normal
- une lorsque la souris passe dessus.
Chaque image à les dimensions suivantes :
200px de large et 300px de hauteur (150px par 2)

Je crois avoir ciblé le problème mais je ne voudrais pas vous mettre sur une mauvaise piste.
Peut être que je devrait assigné une class ou un id sur le lien et non pas sur un <li> pour que cela fonctionne sur IE7.

Voici mon code un peu rectifié et mieux présenté pour le forum. Mea culpa !

Mon code xhtml :

<div id="menu">

   <h3>MENU
   </h3>

    <ul>
<!--1ère image qui me dire vers "mon compte"-->
    <li id="image_menu_mon_compte">
	<a href="mon_compte.html" alt="Mon compte">Mon compte
	</a>
	</li>
	
<!--2ème image qui me dire vers la page "commander"-->
    <li id="image_menu_commander"><a href="commander.html" alt="Commander">Commander
	</a>
	</li>
	
<!--3ème image qui me dire vers la page "panier"-->	
	<li id="image_menu_panier"><a href="panier.html" alt="Panier">Panier
	</a>
	</li>
	
<!--4ème image qui me dire vers la page "news"-->	
	<li id="image_menu_news"><a href="index.html" alt="News">News
	</a>
	</li>
	
<!--5ème image qui me dire vers la page "favoris"-->	
	<li id="image_menu_favoris"><a href="favoris.html" alt="Favoris">Favoris
	</a>
	</li>
	  
    </ul>
	
</div>

Mon code css :

/*propriétés du menu rollover*/
#menu ul
{
list-style-type: none;
margin: 0px;
padding: 0px;
}

#menu li
{
margin: 0px;
margin-bottom: 5px;
padding: 0px;
text-indent: -50000px;
}

/*propriétés de la 1ère image afin que lorsque la souris passe par dessus cette image, celle-ci se décale de 150px vers le haut (mais que la partie du haut reste cachée) */
#image_menu_mon_compte a
{
display: block;
background: url("images_supergameland/image_menu_mon_compte.png") no-repeat;
height: 150px;
}

#image_menu_mon_compte a:hover
{
background: url("images_supergameland/image_menu_mon_compte.png") 0 -150px no-repeat;
padding: 0px;
}

/*propriétés de la 2ème image*/
#image_menu_commander a
{
display: block;
background: url("images_supergameland/image_menu_commander.png") no-repeat;
height: 150px;
}

#image_menu_commander a:hover
{
background: url("images_supergameland/image_menu_commander.png") 0 -150px no-repeat;
padding: 0px;
}

/*propriétés de la 3ème image*/
#image_menu_panier a
{
display: block;
background: url("images_supergameland/image_menu_panier.png") no-repeat;
height: 150px;
}

#image_menu_panier a:hover
{
background: url("images_supergameland/image_menu_panier.png") 0 -150px no-repeat;
padding: 0px;
}

/*propriétés de la 4ème image*/
#image_menu_favoris a
{
display: block;
background: url("images_supergameland/image_menu_favoris.png") no-repeat;
height: 150px;
}

#image_menu_favoris a:hover
{
background: url("images_supergameland/image_menu_favoris.png") 0 -150px no-repeat;
padding: 0px;
}

/*propriétés de la 5ème image*/
#image_menu_news a
{
display: block;
background: url("images_supergameland/image_menu_news.png") no-repeat;
height: 150px;
}

#image_menu_news a:hover
{
background: url("images_supergameland/image_menu_news.png") 0 -150px no-repeat;
padding: 0px;
}
/*fin des propriétés du menu rollover*/

Merci à tous !

Bonjour,
Après avoir rectifié mon code pour une meilleure présentation sur le forum je m'aperçois que dorénavant mon code marche sur les deux navigateurs Firefox et IE7.

L'erreur venait d'une class que j'avais ajouté à la balise <a> alors que j'avais déjà donné des id aux balises <li>.
J'ai donc simplement retiré les class sur les balises <a> de mon menu.

C'est un homme neuf qui vous parle et heureux que sont code marche.

@gcyrillus, peux-tu citer ta source ? Je pense que l'ordre, s'il y en a un est plutot

[<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>]

en effet, l'opérateur booléen || doit être interpreté séquentiellement, au contraire de | qui peut être interprèté dans l'ordre que l'on veut.

bonsoir,

@Antoine Cailliau
Je ne parlais pas de l'ordre , mais de cette portion:

a écrit :
0 no-repeat -150px

Il me semble que de glisser un 'background-repeat' entre les coordonnées d'un 'background-position' n'est pas des plus judicieux .

Pas de source , juste un 'point de vue' qui ne peut pas faire de mal .

GC