[CSS 2] Problème d'affichage d'image en hover dans une liste

[dev45]

Salut tout le monde!

Après avoir bien galérer pour mettre en place un menu déroulant en css (je suis débutant) je voudrais faire en sorte qu'une seule case de ce menu prenne en charge une image de fond en temps normal et la même image mais d'une couleur différente lors du passage de la souris.

Je vous met ici un bout de code que j'ai essayé mais qui ne marche pas.


en html j'ai donné un nom de class à la "case" en question

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div id="menu">
<ul class="niveau1">
<li ><a href="">nom1</a></li>
<li ><a href="">nom2</a>
<ul>
<li><a href="">nom2.1</a></li>
<li class="fond"><a href="">nom2.2</a></li>
</ul>
</li>
<li><a href="">nom3</a></li>
</ul>
</div>

Et je veux changer le li fond seulement en conservant le nom "nom2.2" mais avec une image à côté de la même couleur de la police sans le hover et la même image qui change de couleur lors du hover tout comme la police.
J'ai donc essayé ceci en CSS sans grand succès.

Code :

1
2
3
4
5
6
7
ul li.fond
{background: url(http://imageblanche.png) no-repeat; position:absolute; 
} 
 
ul li.fond:hover
{background: url(http://imagenoir.png) no-repeat; position:absolute;
}

Rien ne s'affiche. Est ce que quelqu'un aurait une petite idée.? Merci d'avance !

[Meloooo]

Salut,
Il faut spécifier la largeur et la longueur de ton image :

Code :

1
2
3
4
 
ul li.fond:hover
{background: url(http://imagenoir.png) no-repeat; position:absolute;height:150px;width:150px
}

[dev45]

Envoyé par Meloooo

Salut,
Il faut spécifier la largeur et la longueur de ton image :

Code :

Salut.

Le problème c'est que mon image fait environ 20px sur 20px. la taille d'une toute petite flèche. Mais je crois en effet que c'est surement un problème de position comme si l'image s'affichait à l'extérieur du bloc li.

[Meloooo]

Vire le position absolute

[dev45]

J'ai fait par curiosité ce que tu m'as recommandé et la case li fond s’agrandit (un carré de 150 sur 150) mais toujours pas d'image qui s'affiche.

Ma syntaxe est celle ci pour l'url, j'espère ne pas avoir oublié des guillemets quelque part.

Code :

1
2
3
{background: url(http://image.noir.png) no-repeat; 
position:absolute;height:150px;width:150px
}

[Meloooo]

Ton url est bizarre quand même
Pourquoi tu mets http devant ???
tu dois mettre seulement mettre le chemin pour aller à ton image
donc un truc du genre images/fleche.png ou si c'est sur un site tu fais http://monsite.fr/images/fleche.png
et si ton image fait 20/20 alors pourquoi tu mets 150/150 ?

[dev45]

Envoyé par Meloooo

Vire le position absolute

Position absolute dégagée, donc j'ai bien mon affichage texte "nom2.2" quand je passe la souris sur la case elle change bien de couleur tout comme le texte mais mon image n'apparait désespérément toujours pas.

Je remet le menu en html exactement comme je l'ai pour ne pas avoir d'erreur dans le css lorsque je précise "le chemin" de la case li "fond".

[Meloooo]

tu es sur du chemin d'accès à ton image ?

[dev45]

Envoyé par Meloooo

Ton url est bizarre quand même
Pourquoi tu mets http devant ???
tu dois mettre seulement mettre le chemin pour aller à ton image
donc un truc du genre images/fleche.png ou si c'est sur un site tu fais http://monsite.fr/images/fleche.png
et si ton image fait 20/20 alors pourquoi tu mets 150/150 ?

Non mais en fait l'url c'est un exemple c'est http + l’adresse complète de l'image qui fini par noir.png ou blanche.png.

Sinon pour les 150 c'était juste pour voir si quelque chose se passait.

[dev45]

Envoyé par Meloooo

tu es sur du chemin d'accès à ton image ?

Oui chef!

[Melcain]

ca va probablement pas etre utile...mais puisque tu utilise une liste pour ton menu tu peux utiliser la propriété list-style-image: url('tonimage.gif');

edit : et la propriété list-style-position:inside comme ca tu l'aura à l’intérieur de tes bordures si tu utilise des bordures.

Code css :

1
2
3
4
5
6
7
8
9
10
 
ul li.fond{
background-image:url('bg1.png');
list-style-image: url('li1.png');
list-style-position: inside;
}
ul li.fond:hover{
background:url('bg2.png');
list-style-image: url('li2.png');
}

le background est optionnel si tu souhaite aussi un background différent au hover.

[Meloooo]

Code :

1
2
 
Oui chef!

La classe
Bon sinon essayes ca :

Code :

1
2
3
4
5
 
li:hover .fond
{
background-image:url(tafleche.png);width:20px;height:20px;
}

[dev45]

Envoyé par Meloooo

Code :

La classe
Bon sinon essayes ca :

Code :

Alors avant tout je vous met le type d'url que j'utilise pour que vous écartiez cette hypothèse ^^.

C'est du genre

http://idata.over-blog.com/3/93/22/87/blanc.png
http://idata.over-blog.com/3/93/22/87/noir.png


Melcain, en fait j'ai fait ce que tu as écrit avec les liens ci dessus et ma police est devenu noire et a grossie. :/

La seule façon que j'ai eu de pouvoir voir mon image s'afficher a été de l'afficher en html avec une image src. je n'y suis pas parvenu en css.

Melooo j'avais essayé en 20par20 quand j'ai lu ton post mais toujours pas d'image. Tout à l'heure tu m'as dis d'enlever le absolute mais en html c'était "un reste" de la façon de l'afficher en html avec le img src.

Merci pour vos contributions en tout cas.

[Meloooo]

J'ai essayé ce code sur mon poste et ca passe... je vois bien l'image..
fait nous voir ton code actuel (css & html)

Code :

1
2
3
4
li:hover .fond
{
background-image:url(tafleche.png);width:20px;height:20px;
}

je viens de voir ton image, blanche, est-tu sur que ton fond de ton hover n'est pas blanc, parce que blanc sur blanc, généralement ca le fait pas

[Melcain]

mmm les deux images que tu compte utiliser n'ont pas la meme taille (blanc est à 400x400 alors que noir est à 20x20) ensuite si tu pouvais mettre tout ton code css ca aiderais pas mal je crois ^^ y'a surement une couche qui merdouille en cascade

[dev45]

Envoyé par Meloooo

J'ai essayé ce code sur mon poste et ca passe... je vois bien l'image..
fait nous voir ton code actuel (css & html)

Code :

je viens de voir ton image, blanche, est-tu sur que ton fond de ton hover n'est pas blanc, parce que blanc sur blanc, généralement ca le fait pas

Mon fond n'est pas blanc mais ce qui est sûr c'est que j'avais un problème de syntaxe

J'avais mis li.fond:hover au lieu de li:hover.fond

Ma case fond retrécie à 20px mais j'ai toujours pas d'image qui s'affiche

Je te met mon code le plus vite possible mais je t'accorde une pause de 7min pour aller manger ^^.

[dev45]

Envoyé par Melcain

mmm les deux images que tu compte utiliser n'ont pas la meme taille (blanc est à 400x400 alors que noir est à 20x20) ensuite si tu pouvais mettre tout ton code css ca aiderais pas mal je crois ^^ y'a surement une couche qui merdouille en cascade

Oui tu as raison j'ai oublié de redimensionner la deuxième. Je met le code dans 5min.

[dev45]

Voilà le Css. Dans notepad je viens de voir qu'au premier ul li.fond le mot .fond ne se met pas en rouge comme le deuxième (peut être un problème de syntaxe ici?). ps: j'ai modifié la taille en 20*20.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/
#menu{ position: absolute;
  margin-left: 1px; 
  margin-right: auto; 
  width:1024px; 
   text-align: center;
 
 
ul li.fond
{background: url(http://idata.over-blog.com/3/93/22/87/blanc.png) ;width:20px;height:20px;
} 
 
 
ul li:hover  .fond
{background: url(http://idata.over-blog.com/3/93/22/87/noir.png) ;width:20px;height:20px;
} 
 
#menu a {color:#ffffff; font-size: 0.9em; font-weight:normal; }
 
#menu ul {padding: 0; margin:0px; background: #D3DAED;}
 
#menu li {background:#578CAF;text-align: center;}
 
#menu li a:hover {color:#000000;background: #E0E9EF; }
 
#menu ul.niveau2 li {background: #8FADBF;text-align: left;}
 
#menu li.sousmenu a:hover {background: #E0E9EF;}
 
#menu ul li {position:relative; list-style: none; float:left; border-top:1px solid}
#menu ul li.niveau2{text-align: left;}
#menu ul ul {position: absolute;display:none; /*width:100px*/}
#menu li a {text-decoration: none; padding: 4px 0 4px; display:block; width:146px; }
#menu ul.niveau1 li.sousmenu:hover ul.niveau2, 
#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}
#menu ul.niveau3 {top:-1px; left: 146px;}
 
 
#menu ul.niveau3 li {background: #9BBBCF;text-align: center;}
 
#menu ul.niveau3 li:hover {background: #9BBBCF;}

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id="menu">
		<ul class="niveau1">
				<li class="sousmenu , plop"><a href="lien">nom1</a></li>
				<li class="sousmenu"><a href="lien">nom2</a>
						<ul class="niveau2">
								<li class="sousmenu"><a href="lien">snom1</a>
									<ul class="niveau3">
											<li class="fond"><a href="lien">item1</a></li>
											<li><a href="lien">item2</a></li>
											<li><a href="lien">item3</a></li>
											<li><a href="lien">item4</a></li>
											<li><a href="lien">item5</a></li>
											<li><a href="lien">item6</a></li>
									</ul>
								</li>
								<li class="sousmenu"><a href="lien">snom2</a>
									<ul class="niveau3">
											<li><a href="lien">item1</a></li>
											<li><a href="lien">item2</a></li>
											<li><a href="lien">item3</a></li>
											<li><a href="lien">item4</a></li>
											<li><a href="lien">item5</a></li>
										</ul>			
								</li>
						</ul>
				</li>

[Melcain]

Code css :

1
2
3
4
5
6
 
#menu{ position: absolute;
  margin-left: 1px; 
  margin-right: auto; 
  width:1024px; 
   text-align: center;} /* il faut fermer à ce niveau la */

Code css :

1
2
 
url('lien') /* la syntaxe correct est de mettre ton url entre ('')*/

Code html :

1
2
3
 
<li class="sousmenu , plop"><a href="lien">nom1</a></li>
<!-- y'a peut etre un soucis avec le nom de la classe :D -->

mais ca ne va pas régler ton problème...

A suivre x)

[dev45]

Envoyé par Melcain

Code css :

J'ai supprimé un commentaire à moi et la parenthèse involontairement.

Code css :

C'est noté.

Code html :

C'était dans le code original j'ai laissé le nom sans l'utiliser pour mon propre menu.

mais ca ne va pas régler ton problème...A suivre x)

La situation est grave mais pas désespérée... : )...je vais essayer de bidouiller je vous tiens au courant si je trouve d'où vient mon problème.