[Résolu]Quel est la bonne méthode?

[Bacchus]

Salut!

J'ai un menu, et c'est une liste. J'essai de mettre une image qui apparaît en hover juste devant le lien.

dans le css, jai ceci:

Code : Tout sélectionner

#menu {
	position: absolute;
	top: 150px;
	left: 10px;
	width: 15%;
	font-size: small;
}

#menu ul {
	list-style-type: none;
}

#menu li {
	background-color: #738EAC;
	text-align: left;
	font-family: "Times New Roman", Times, serif;
	font-size: small;
}

#menu li a {
	color: #ececfa;
	text-decoration: none;
	display: block;
}

#menu li a:hover {
	list-style-image: url(../images/menu_fle.gif);
	color: #87CEFA;
	text-decoration: none;
	display: block;
	text-align: right;
}

Dans firefox l'image n'apparait pas. Alors je me suis dis que je pourrais tester avec un :before. Mais je connais pas la bonne méthode à utilisé, une idée kekun?

[FF_Olivier]

Code : Tout sélectionner

url(../images/menu_fle.gif)

À tout hasard, le .gif ne serait pas menu_file.gif ?

[Bacchus_non_connecter]

Non c'est correcte menu_fle menu_fleche, en plus court

[calimo]

Tu as vu sur quoi tu as mis le hover ? Sur le a
Alors je sais que c'est le seul moyen de faire fonctionner les :hover dans IE, mais le list-style-image tu dois l'appliquer sur le "li" (ou sur n'importe quel élément dont le display est "list-item")

PS : tu dis "Dans firefox ça marche pas"... ça veut dire que tu as testé dans un autre navigateur où ça marche ?

[Bacchus_non_connecter]

bon j'ai en parti réussi avec ceci:

Code : Tout sélectionner

#menu li:hover {
	display: list-item;
	list-style-image: url(../images/menu_fle.gif);
	list-style-position: inside;
	cursor: hand;
}

#menu li a {
	color: #ececfa;
	text-decoration: none;
	display: block;
}

#menu li a:hover{
	color: #87CEFA;
	text-decoration: none;
	display: block;
}

Mais maintenant c'est le hover sur le a qui ne marche pas ou presque pas, je suppose qu'on peut pas mettre deux hover au même endroit

j'ai même essayer ça (O-K-Ou ^^)

Code : Tout sélectionner

#menu li:hover, a:hover{
	color: #87CEFA;
	text-decoration: none;
	display: list-item;
	list-style-image: url(../images/menu_fle.gif);
	list-style-position: inside;
	cursor: hand;
}

Et le a:hover ne fonctionne toujours pas!

[calimo]

Tu as un exemple en ligne qu'on puisse voir ? Ça n'a pas l'air normal...

Code : Tout sélectionner

#menu li:hover, a:hover{
	color: #87CEFA;
	text-decoration: none;
	display: list-item;
	list-style-image: url(../images/menu_fle.gif);
	list-style-position: inside;
	cursor: hand;
}

Et le a:hover ne fonctionne toujours pas!

Là tu appliques ces styles sur le a, pas sur le li
C'est toujours le dernier, le plus spécifique, sur lequel les styles s'appliquent. Même s'il y a un :hover.

[Bacchus_non_connecter]

Ici, choisir Space Style (en construction)

http://users.rockweb.org/Isolder/index.php


p.s. mon hébergeur déconne encore !

[calimo]

Mouais, il déconne, mais j'ai eu le temps de voir un peu.

Essaye de supprimer le display:block sur a:hover. Celui sur a suffit, a reste a, donc le display:block continue de faire effet. Je dis ça parce qu'il y a un effet étrange au survol...

Pour le reste, je réessayerai quand ça remarchera, là l'hébergeur semble HS

[Bacchus]

Bon décidément je me fourre le doit dans l'oeil jusqu'au coude, ça marche pas dutout mon truc. C'est claire que je peuc pas mettre deux "display" différent sur le même élément. Et pire le "display: list-item" désactive mes liens du menu!

Code : Tout sélectionner

#menu {
	position: absolute;
	top: 150px;
	left: 10px;
	width: 15%;
}

#menu ul {
	list-style-type: none;
}

#menu li {
	background-color: #738EAC;
	text-align: right;
	font-family: "Times New Roman", Times, serif;
	font-size: small;
}

#menu li:hover {
	list-style-image: url(../images/menu_fle.gif);
	list-style-position: inside;
	display: list-item;
}

#menu li a {
	color: #ececfa;
	text-decoration: none;
	display: block;
}

J'essai de faire le malin et je me dis que le "#menu li a:hover" foire le tout, alors je l'enlève et....voir le résultat Toujour avec Space Style

Le problème c'est que sans le "display: list-item", pas moyen d'affiché mon "list-stye-image"

Des idées, parce que moi je nage dans le vide!!

EDIT: Comme-ci c'étais pas suffisant selon W3Schools

Notes in IE 4.0+:

* This property does not work with elements with "display" property set to "list-item"

EDIT2: Bon j'ai réglé mon prob, c'est pas le top mais c'est mieux que rien. Au lieu du display:block sur le a, je lui ai mis un display:inline.

[calimo]

Mouahahaha ! Je viens de comprendre

Code : Tout sélectionner

#menu li:hover, a:hover

S'applique sur

• au survol des li dans #menu
• Au survol de tous les liens de la page !

Eh oui, il y a une virgule en trop

Code : Tout sélectionner

#menu li a:hover {...}

devrait fonctionner à merveille

[Bacchus]

Ouais ça marche, c'est mettre un display:block qui foirait le tout.

Ouf...finalement.