Menu image

Je tente de créer un menu en css avec pour chaque <li> une image/background différent mais avec un hover identique.

voila mon menu:

<ul>	  
<li><a href="DSC00612.JPG"><img src="DSC00612.JPG" /></a></li>

<li><a href="DSC00613.JPG"><img src="DSC00613.JPG" /></a></li>
	  
<li><a href="DSC00614.JPG"><img src="DSC00614.JPG" /></a></li>
    </ul>

puis j'attribue un css:

#navigation a {
	color: #FF4500;
}

#navigation li:hover {
background-color: #000000;

} 

#navigation ul {
	list-style: none;
}
#navigation li.gauche {
	float: left;
	margin-right: 10px;
	font-size: 1.4em;
	font-style: italic;	
	height: 190px;
	width: 90px;
	text-align: center;
	font-weight: bold;
}

#navigation img {
	height: 180px;
	width: 85px;
	text-decoration: none;
}

sur cette exemple je fais volontairement déborder le li hover pour qu'on voit bien le rectangle noir apparaitre.
Par contre le résultat n'est pas celui espéré, je souhaite que le hover passe devant le img.

comment faire?

petite erreur de frappe il faut lire

#navigation li

et pas

#navigation li.gauche

Bonjour Douby,

Une fois connecté sur Alsacréations, tu peux éditer tes messages. Ce serait préférable.

je sais mais quand j'ai voulu le faire le message n'apparait plus ^^

Bonsoir,

Les images doivent-elles nécessairement être incluses "en dur" dans le code HTML via une balise <img /> ? Si elles n'ont pas d'autre vocation que de décorer le menu, mieux vaut les afficher en CSS pour bien séparer le contenu et la forme de votre page. En plus cela simplifie beaucoup la réalisation d'un tel effet :

HTML :

<ul id="navigation">
	<li><a id="item_1" href="#">Item 1</a></li>
	<li><a id="item_2" href="#">Item 2</a></li>
	<li><a id="item_3" href="#">Item 3</a></li>
</ul>

CSS :

body, ul {
	margin: 0;
	padding: 0;
}

#navigation {
	margin: 10px;
	list-style-type: none;
	font-size: 1.4em;
	font-weight: bold;
	font-style: italic;
	text-align: center;
}

#navigation li {
	float: left;
}

#navigation li + li {
	margin-left: 10px;
}

#navigation a {
	width: 85px;
	height: 170px;
	padding-top: 10px;
	display: block;
	background-image: url(fond_navigation.jpg);
	background-repeat: no-repeat;
	text-decoration: none;
	color: #ff4500;
}

#item_1 {background-position: 0 0;}
#item_2 {background-position: -85px 0;}
#item_3 {background-position: -170px 0;}

#navigation a:hover {
	background: #000;
}

Voici l'image pour tester le bout de code ci-dessus :


Comme vous pouvez le constater, on utilise qu'une seule et unique image qu'on fait "coulisser" à l'intérieur de chaque lien (à l'aide de la propriété background-position) pour n'afficher à chaque fois que la partie qui nous intéresse. Il s'agit de la technique des "sprites" ou des "portes coulissantes" expliquée plus en détail ici et là.

Bon je vais faire un peu de lecture mais à première vue c'est ce que je cherchais.
Merci beaucoup cela m'aide beaucoup car j'étais partie sur une piste complètement à l'opposé
Il est pas toujours facile de faire des recherches quand on utilise les mauvais termes ou si on est pas en train de travaillé sur le code à la base.


Merci encore.

En faite ça pas vraiment ça que je cherchais..
je n'ai pas de background différent à chaque <li>, la sur ton exemple que j'ai essayé de modifier je n'ai pas pu afficher correctement plus de 4 <li>.

le 5 et 6ème li ne s'affiche pas peut importe ce que je fais..

voici l'exemple

http://www.doubycollection.fr/collection/index.php