Page 1 sur 1

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

Publié : 13 août 2005, 00:29
par 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?

Publié : 13 août 2005, 00:57
par FF_Olivier

Code : Tout sélectionner

url(../images/menu_fle.gif)
À tout hasard, le .gif ne serait pas menu_file.gif ?

Publié : 13 août 2005, 01:10
par Bacchus_non_connecter
Non c'est correcte menu_fle :arrow: menu_fleche, en plus court

Publié : 13 août 2005, 09:26
par calimo
Tu as vu sur quoi tu as mis le hover ? Sur le a :lol:
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") :wink:

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

Publié : 13 août 2005, 18:33
par 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 :lol:

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!

Publié : 13 août 2005, 19:38
par calimo
Tu as un exemple en ligne qu'on puisse voir ? Ça n'a pas l'air normal...
Bacchus_non_connecter a écrit :

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 :wink:
C'est toujours le dernier, le plus spécifique, sur lequel les styles s'appliquent. Même s'il y a un :hover.

Publié : 13 août 2005, 23:03
par Bacchus_non_connecter
Ici, choisir Space Style (en construction)

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


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

Publié : 13 août 2005, 23:17
par 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 :?

Publié : 15 août 2005, 06:11
par 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! :shock:

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" :x

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.

Publié : 15 août 2005, 08:59
par calimo
Mouahahaha ! Je viens de comprendre :lol:

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 :wink:

Code : Tout sélectionner

#menu li a:hover {...}
devrait fonctionner à merveille :wink:

Publié : 15 août 2005, 18:14
par Bacchus
Ouais ça marche, c'est mettre un display:block qui foirait le tout.

Ouf...finalement.