rss
Ils ont besoin de votre aide Tous les messages sans réponse
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Non résolu

[CSS] Associer image à menu (li:hover)

Posté par Dédé86, le mercredi 4 juillet 2007 à 15:44:17
Bonjour,

J'essaye de créer un menu en html et css grâce au balises <ul> et <li>. Je souhaiterais associer à la balise <li> (donc à l'élément du menu) une image (list-style-image:url(images/soleil.gif)) lors du passage de la souris sur cet élément. J'arrive à mettre la même image pour tous les éléments mais je n'arrive pas à faire en sorte que l'image soit différente selon l'élément du menu.

Voici mon code (j'ai mis en gras ce qui ne fonctionne pas) 


<html>
    <head>
		<title>Index</title>		
		<style type="text/css">
			.navigation
				{
					border-style:inset;
					background-color:#ffffff;
					
					width:300px;
				}
			.navigation li
				{
					
					font-family:"Arial";
					font-size:20px;
					background-color:yellow;
					margin-bottom:15px;
					width:250px;
					height:30px;
					margin-left:0px;
					padding-top:5px;
					list-style-type:none;	
					list-style-image:none;
				}
				
			
			/*.navigation li:hover <- Ce code fonctionn, il affiche l'image du soleil pour chaque élément li
				{
					list-style-image:url(images/soleil.gif);
				}
			*/
			
			
			.soleil li:hover 
				{
					list-style-image:url(images/saturne.gif);
					
				}
			.mercure li:hover
				{
					
					list-style-image:url(images/mercure.gif);
				}
	
		</style>


	</head>


	<body>
		<ul class="navigation">
			<li class="soleil"><a href="soleil.htm" >Saturne</a></li>
			<li class="mercure"><a href="mercure.htm">Mercure</a></li>­
		</ul>
	</body>
</html>


J'ai utilisé une class à l'intérieur d'une class. Est-ce que cela vient de là ?

Pouvez-vous m'aider, quelque chose m'échappe
Configuration: Windows XP
Firefox 2.0.0.4
Répondre à Dédé86  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
youplaboum, le mercredi 4 juillet 2007 à 17:57:47
essaye sa dans ton css

li:hover.soleil {
................;;
   
Répondre à youplaboum

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dédé86, le mercredi 4 juillet 2007 à 18:46:30
Non ça ne marche toujours pas.

Ce qui m'embête, c'est que je sais pas vraiment de quoi ça vient : l'utilisation d'un class dans un autre ? Un problème d'héritage ?...

Tu peux m'aider stp ??

Merci d'avance
   
Répondre à Dédé86

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Daddy Cool, le samedi 29 mars 2008 à 01:58:33
ça serait plutôt de cette forme 
li.soleil:hover{...}

Quand tu fais un style du genre 
.soleil li:hover{...}

C'est comme si tu cherchais un <li> sous tes balises de la classe .soleil.

Du genre : 
<li class="soleil">
	<ul>
		<li>text</li>
	<ul>
</li>

Utilisé une class à l'intérieur d'une autre est une chose tout à fait régulière. Ça a le même effet que de déclarer un style a un id => ce qui est en-dessous va hérité du style.

++
   
Répondre à Daddy Cool

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
rené, le vendredi 11 avril 2008 à 06:23:17
she's crazy like a daddy, daddy, daddy, dadada, daddy, daddy, daddy
   
Répondre à rené

5


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Devilish, le vendredi 11 avril 2008 à 06:52:26
Il y a aussi internet explorer qui n'applique le hover qu'au lien aussi je crois...(Me frappé pas si j'ai tord)...
   
Répondre à Devilish

6


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 Daddy Cool, le mardi 15 avril 2008 à 10:49:18
si si, tu as tout à fait raison ;)
   
Répondre à Daddy Cool
Posez votre question Répondre
Logiciels pertinents trouvés dans les téléchargements
Télécharger PE Builder 3.1.10aPE Builder - PE Builder vous permet de créer un CD-Rom (ou un DVD) bootable (appelé BartPE) de Windows XP (SP1 minimum) ou Windows Server...Catégorie: Personnalisation
Licence: Freeware/gratuit
Télécharger JPG Livret Print 7.12.12JPG Livret Print - JPG Livret Print permet d'imprimer des livrets en tous genres : bandes dessinées, sport, mots croisés, etc ... Ce...Catégorie: Impression
Licence: Freeware/gratuit
Télécharger GLPI 0.71GLPI - GLPI est une application libre, distribuée sous licence GPL destinée à la gestion de parc informatique et de helpdesk. ...Catégorie: Gestion de parc
Licence: Freeware/gratuit
Télécharger Aubade 1.0Aubade - Des écrans de veilles et des fonds d'écrans, vous en avez déjà vu et de toutes les couleurs ! Aujourd'hui on vous offre bien...Catégorie: Personnalisation
Licence: Freeware/gratuit
Plus de logiciels gratuits sur « [CSS] Associer image à menu (li:hover) »