LI ou LI y est pas ?

[xpatval]

Bonjour,soir,

Je me pose un problème, que je vous soumets, n'arrivant pas à quelque chose de concluant (peut-être n'est pas faisable ?)

Mon menu, vertical, est défini avec des listes à pupuce.

Je souhaite y associer une toute petite image, lors des passages de souris.

Voici le css:

#linkList ul {
	margin: 0px;
	padding: 0px;
	}
#linkList li {
	line-height: 2.5ex; 
	list-style-type: none;
	display: block; 
	padding-top: 5px; 
	margin-bottom: 5px;
	}
#linkList li a:link { 
	background: transparent url(commun/pause1.gif) no-repeat top right; 
	color: #000000;
	}
#linkList li a:hover { 
	background: transparent url(commun/pause2.gif) no-repeat top right; 
	color: #000000;
	}
#linkList li a:visited {
	background: transparent url(commun/pause3.gif) no-repeat top right; 
	color: #000000;
	text-decoration:underline;
	}
#linkList li a:active { 
	background: transparent url(commun/pause.gif) no-repeat top right; 
	color: #000000;
	}

Le principe est d'afficher un rond (par exemple), lorsque le lien est inactif, puis un carré lors du survol, et un triangle lorsqu'il est actif.

Malheureusement, l'image ne prend que la taille de la chaîne de caractère (le nom du lien), et non sa taille réelle (bcp plus grande).

Auriez-vous une solution ?

Merci,

xpatval

Modifié 27 Mars 2005 par xpatval

[Boudha]

Essayes de cette manière :

#linkList li a:hover {
list-style-image: url('image.jpg');
color: #000000;

[xpatval]

Non, car je ne souhaite pas mettre une image en puce, mais bien appliquer une image de "fond" , sur toute la longueur de la chaîne de caractère du lien et quelques pixels en plus (disons une quinzaine) .

Or, le résultat auquel j'arrive, c'est l'application de cette image, mais seulement sur la longueur du lien, et pas plus.

Merci quand même.

xpatval

[lupucide]

Je crois que IE ignore les :hover sur autre chose que les liens, à vérifier.

[Striker]

Pour l'image de fond voici un tuto qui devrais t'aider.

http://mammouthland.free.fr/cours/css/cours3.php

Il y en a surement d'autres surement mieu fait mais celui ci devrais te donner une bonne piste à exploiter

[xpatval]

Je crois que IE ignore les :hover sur autre chose que les liens, à vérifier.

Je fais bien mon :hover sur un "a", contenu lui-même dans un <li>

En fait, là où je bloque, c'est l'attribution d'une longueur fixe à <li>. Je ne pense pas que cela soit permis.

xpatval

ps: Merci pour le lien...

[Loupilo]

En fait, tu donnes des propriétés à l'attribut a : a au survol, a activé, a visité.

Et l'attribut a, ce n'est que le texte de ton lien, donc c'est normal que l'effet ne s'applique qu'à lui.

Il faudrait que, comme en xHtml 2, li soit le lien, et que tu fasses li:hover, li:active, ...

Seulement, ce n'est pas encore possible.

La solution de contournement est de, si par exemple ton 'li', ton item, fait 200px de large, mettre un display:block;width:198px; à 'a', le lien.

L'image de fond s'appliquera donc bien au lien, mais celui-ci prendra la place du 'li'.

a+

Loupilo.

[xpatval]

Merci de l'info concernant Xhtml2 que je ne connaissais pas.

Comme la solution n'existe pas telle que je la souhaite, j'ai opté pour un jeu de puce différent.

En fait, je souhaitais aligné, avec les <li> ces puces, ou plutôt ces images de puces, à droite, sur un même plan vertical (l'inverse de la liste à puce, en fait).

Tant pis,

Et merci,

xpatval