Travaux pratiques
TROISIÈME PARTIE
172
On constate (figure 12-11) que les puces s’affichent hors du conteneur, le document
body dans le cas présent. Pour y remédier, on peut intervenir sur la marge de gauche
de la liste (jusqu’ici de valeur nulle) ou placer les puces dans la liste avec la déclaration
list-style-position: inside :
Voilà qui produit une liste munie d’une puce graphique personnalisée. Comment
modifier celle-ci lors d’un survol de son élément de liste par le pointeur de la souris ?
Théoriquement, la meilleure solution est d’appliquer la pseudo-classe :hover à l’élément

(li:hover) pour indiquer une image de substitution. Malheureusement
(nous avons déjà signalé ce bogue), le navigateur Internet Explorer, jusqu’à sa
version 7, ne reconnaît cette pseudo-classe qu’appliquée à la balise .
Composer à nouveau avec ces limitations implique un changement complet de
méthode : la balise n’étant pas de type « liste », elle n’interprète pas la propriété
list-style-image. Modifier la structure de cet élément par la propriété display:
list-item pourrait suffire… mais IE ne comprend pas non plus cette déclaration.
Le souci de compatibilité nous contraint donc à procéder différemment : appliquer
des images d’arrière-plan aux éléments .
Recourir aux images d’arrière-plan
Il s’agit d’associer des images de fond différentes aux éléments et aux liens survolés (a:hover), qui remplaceront les puces des listes. Ajoutons de telles images de
fond à l’habillage du menu vertical simple :
Figure 12–11
Puces graphiques (I)
ul#menu {
margin: 0;
padding: 0;
font: bold 1em Georgia, Times, serif;
list-style-image: url(dossier/puce.png);
list-style-position: inside;
}