117
Mise en forme des listes et création de barres de navigation
list-style: none;
width: 72em;
overflow: hidden;
background: #FAA819 url(img/mainNavBg.gif) repeat-x;
}
Comme.avec.le.précédent.exemple.de.navigation,.chacun.des.liens.dans.cette.barre.de.navigation.horizontale.est.créé.de.manière.à.se.comporter.comme.un.bouton,.car.la.valeur.block.
a.été.attribuée.à.sa.propriété.display..Pour.que.chaque.bouton.ait.une.taille.fixe,.vous.pouvez.fixer.explicitement.sa.hauteur.et.sa.largeur,.mais.ce.choix.peut.poser.des.problèmes.en.
termes.de.facilité.de.maintenance..Laissez.plutôt.la.largeur.de.chacun.d’eux.se.caler.sur.la.
taille.du.texte.d’ancre..Au.lieu.de.définir.une.largeur.explicite,.j’applique.donc.3 cadratins.de.
remplissage.aux.côtés.gauche.et.droit.de.chaque.lien.d’ancre..Comme.dans.l’exemple.précédent,.on.a.centré.le.texte.du.lien.verticalement.en.utilisant.le.paramètre.de.hauteur.de.ligne..
Les.soulignements.de.lien.sont.ensuite.désactivés,.et.la.couleur.du.lien.passée.en.blanc :
ul.nav a {
display: block;
padding: 0 3em;
line-height: 2.1em;
text-decoration: none;
color: #fff;
}
Je.souhaite.créer.des.séparateurs.entre.les.liens.dans.la.barre.de.navigation..Il.est.possible.
de.définir.des.bordures.horizontales.sur.l’élément.de.liste.ou.les.ancres.mais,.par.souci.de.
simplicité,.je.préfère.appliquer.une.image.d’arrière-plan.aux.liens.d’ancre.
ul.nav a {
display: block;
padding: 0 2em;
line-height: 2.1em;
background: url(img/divider.gif) repeat-y left top;
text-decoration: none;
color: #fff;
}
Le.premier.lien.dans.la.barre.de.navigation.possède.du.coup.un.séparateur.indésirable..On.
peut.s’en.débarrasser.en.ajoutant.une.classe.au.premier.élément.de.la.liste.et.en.supprimant.
l’image.d’arrière-plan :
ul. nav .first a {
background-image: none;
}
Si.vous.ne.vous.préoccupez.pas.spécifiquement.de.prendre.en.charge.Internet.Explorer 6,.
vous. pouvez. aussi. renoncer. à. la. classe. additionnelle. et. utiliser. la. pseudo-classe. :firstchild.à.la.place..
ul.nav li:first-child a {
background: none;
}