Arrière-plans cliquables
Par Dan Cederholm
Existe-t-il un quelconque préjudice à documenter une technique CSS apparemment rudimentaire ? Je crois que non, et ce qui suit pourrait s'avérer utile (ou non) selon votre niveau de connaissance en CSS.
Objectif
Réaliser une liste parfaite de liens non-ordonnés, illustrés chacun par une icone unique (purement décorative) placée sur la gauche, le tout cliquable et entièrement réalisable à l'aide de CSS.
Souvent, nous utilisons une image de fond (NdT : background-image) sur les éléments de la liste non-ordonnée pour afficher cette puce unique. En appliquant un fond (NdT : background) aux éléments <li>, le tour est joué, en général. Mais si votre liste contient des liens, pourquoi les images ne pourraient-elles pas non plus être cliquables ?
Comment obtenir l'effet désiré ?
La première étape est de construire la liste non-ordonnée, en ajoutant à chacun des éléments un id unique. Nous utiliserons cet id quand il faudra assigner à chaque élément l'image qui lui correspond.
<ul>
<li id="email"><a href="/email/">Envoyer un e-mail</a></li>
<li id="donate"><a href="/donate/">Faire un don</a></li>
<li id="active"><a href="/active/">Être actif</a></li>
<li id="tell"><a href="/tell/">Prévenir un ami</a></li>
<li id="vote"><a href="/vote/">S'enregistrer pour voter</a></li>
</ul>
Nous allons maintenant ajouter le code CSS, qui est assez simple. On désactive le style par défaut des petites puces, on met à zéro margin et padding, puis on assigne une image de fond (NdT : background-image) à chaque élément <li>.
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
margin: 2px 0 6px 0;
padding: 0;
font-weight: bold;
line-height: 24px; /* Hauteur de l'icone */
background-repeat: no-repeat;
background-position: 0 50%;
}
ul li a {
padding-left: 30px; /* Largeur de l'icone et espacement */
}
#email { background-image: url(email.gif); }
#donate { background-image: url(donate.gif); }
#tell { background-image: url(tell.gif); }
#active { background-image: url(active.gif); }
#vote { background-image: url(vote.gif); }
Ce que nous avons fait ci-dessus, c'est donner un padding-left (NdT : remplissage gauche) qui équivaut à la largeur de l'icone. Ceci permet à la zone cliquable d'être étendue au-dessus de l'icone - qui est effectivement une image de fond à chaque élément <li>.
Vous avez sans doute remarqué l'astuce du line-height (NdT : la hauteur de ligne). Cette technique, consistant à faire correspondre cette valeur à la hauteur réelle de l'icone de façon à montrer l'image et rien de plus, fonctionne relativement bien. Ceci ne semble pas avoir d'impact négatif sur le redimensionnement du texte.
Sans scintillement
Pourquoi ne pas assigner l'image en tant que fond de l'élément <a> ? Simplement parce qu'alors, nous aurions un scintillement avec IE6/Windows. En assignant l'image à l'élément <li> et en étalant le lien par-dessus l'image, nous supprimons ce problème. C'est là toute la raison d'être de cet article.
Vous pouvez aussi vous demander où serait le tort d'insérer ces images à l'aide de balises en-ligne <img>. Il n'y a pas de raison. Mais la méthode précédente est un autre moyen, tout aussi simple, qui permet de concentrer ces images inutiles dans la feuille de style, clarifiant le balisage et facilitant ainsi la modification de la liste et des images.
http://www.simplebits.com/notebook/2004/07/18/clickable.html