110
Maîtrise des CSS
Vous pourrez.ensuite.utiliser.les.propriétés.de.positionnement.de.l’image.d’arrière-plan.pour.
contrôler.précisément.l’alignement.des.puces.
Les.versions.plus.anciennes.d’Internet.Explorer.et.d’Opera.contrôlent.le.retrait.des.listes.
avec.la.marge.gauche,.alors.que.la.plupart.des.navigateurs.modernes,.dont.Firefox.et.Safari,.
utilisent.le.remplissage.gauche..À cet.égard,.la.première.chose.à.faire.est.de.supprimer.ce.
retrait.en.ramenant.à.zéro.la.marge.et.le.remplissage.de.la.liste..Pour.supprimer.la.puce.par.
défaut,.choisissez.none.(aucun).pour.le.type.de.style.de.la.liste :
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
Rien.de.plus.simple.que.d’ajouter.une.puce.personnalisée..Le.remplissage.du.côté.gauche.de.
l’élément.de.liste.crée.l’espace.nécessaire.pour.la.puce,.laquelle.est.ensuite.appliquée.sous.
forme.d’image.d’arrière-plan.à.l’élément.de.liste..Si.celui-ci.doit.couvrir.plusieurs.lignes,.il.
faudra.peut-être.positionner.la.puce.vers.le.haut.ou.près.du.haut.de.l’élément.de.liste..Si.vous.
savez,.au.contraire,.que.le.contenu.des.éléments.de.la.liste.ne.s’étendra.pas.sur.plus.d’une.
ligne,.vous.pouvez.centrer.verticalement.la.puce.en.définissant.la.position.verticale.avec.la.
valeur.middle.ou.50% :
li {
background: url(/img/bullet.gif) no-repeat 0 50%;
padding-left: 30px;
}
La.liste.résultante.est.présentée.à.la.Figure 6.1.
Figure 6.1
Une liste simple mise
en forme avec des
puces personnalisées.
Création d’une barre de navigation verticale
En.combinant.l’exemple.précédent.avec.les.techniques.de.mise.en.forme.apprises.au.Chapitre 5,.vous.pouvez.créer.des.barres.de.navigation.verticales.sophistiquées.avec.des.survols.
CSS,.comme.celle.présentée.à.la.Figure 6.2.
Figure 6.2
Barre de navigation
verticale mise en
forme.
Comme.toujours,.vous.devez.commencer.par.un.balisage.sémantique.de.qualité :