Puces et liens

Bonjour,

Je fais face régulièrement à un problème récurrent : styler des puces avec liens hypertexte.
Vous allez me dire que c'est pas bien compliqué. Sans doute pas.. N'empêche que...
Alors il y a un super tutoriel sur les menus en CSS, mais il évacue mon problème car je souhaite conserver la puce.

Voilà l'objectif :
- le texte est cliquable
- la puce est personnalisée
- l'ensemble de la zone est cliquable
- texte et puce changent en roll-over, que l'on passe sur la puce, sur le texte, ou sur la zone
- le clic sur la puce (ou sur le texte, ou sur la zone) active le lien

Voilà le code HTML :

<ul>
    <a href="#"><li>Lien A</li></a>
    <a href="#"><li>Lien B</li></a>
    <a href="#"><li>Lien C</li></a>
    <a href="#"><li>Lien D</li></a>
</ul>

J'ai englobé le <li> par le <a> pour m'assurer que l'ensemble soit bien considéré comme un lien, quelque soit l'endroit où l'on clique.

Voilà ma feuille de styles :

a {
	color:#333;
	text-decoration:none;
	}
a:hover {
	color:#a04141;
	}
a img {
	border:0;
	}
ul {
padding:0;
	}
ul li {
	list-style:url(images/puce.gif);
	list-style-position:inside;
	}
ul li:hover {
	list-style:url(images/puce_hover.gif);
	list-style-position:inside;
	}
ul a  {
	display:block;
	width:185px;
	}

Je bricole et re-bricole, mais je ne parviens pas à remplir tous mes objectifs. La puce, par exemple, ne fonctionne jamais comme lien...

Merci du coup de pouce !

Hello !

Le plus simple je pense (en tout cas c'est ce que je fais), c'est de virer les puce pour tes <li> et d'utiliser le background-image sur ton <a> (sans oublier de passer celui-ci en display:block).

PS: il faut mettre le <a> dans le <li>

Bonjour,

yakou32 a écrit :
J'ai englobé le <li> par le <a> pour m'assurer que l'ensemble soit bien considéré comme un lien, quelque soit l'endroit où l'on clique.

Ceci est tout à fait invalide et risque plus de poser problème qu'autre chose. La solution la plus simple, propre, et certainement la plus robuste est celle que t'as donné pfoofen.

ok, merci pour vos réponses

Donc, pour le principe général, comme puces (html) et liens ne font pas bon ménage, du moins d'un point de vue ergonomique affordance au clic..., on supprime la puce html, et on la simule en background...

Merci

Pour info, voilà le code :

<ul>
        <li><a href="#">Lien A</a></li>
        <li><a href="#">Lien B</a></li>
        <li><a href="#">Lien C</a></li>
        <li><a href="#">Lien D</a></li>
</ul>

a {
	color:#333;
	text-decoration:none;
	}
a:hover {
	color:#a04141;
	}
ul {
	padding:0;
	list-style:none;
	}
ul li a {
	display:block;
	width:175px;
	padding-left:20px;
	background:url(images/puce.gif) no-repeat 0 3px;
	}
ul li:hover a{
	background-image:url(images/puce_hover.gif);
	}

Modifié par yakou32 (16 Nov 2009 - 17:10)

Au fait, je vais peut-être sortir un peu du sujet, mais c'est la réponse de Laurie-Anne qui m'interpelle...
D'une manière générale, en html, que vaut-il mieux ne pas encadrer dans une balise <a>, et pourquoi ?

yakou32 a écrit :
D'une manière générale, en html, que vaut-il mieux ne pas encadrer dans une balise <a>, et pourquoi ?

Tout ce qui n'est pas valide dans une balise A, principalement les éléments de type block.

Pour plus d'info, il te faudrait peut-être lire la documentation d'HTML.

Et passer tes pages au validateur du W3C pour confirmation.

Précision : HTML = "HTML4.01"

Il en sera autrement avec HTML5