112
Maîtrise des CSS
ul.nav a {
display: block;
color: #2B3F00;
text-decoration: none;
border-top: 1px solid #E4FFD3;
border-bottom: 1px solid #486B02;
background: url(/img/arrow.gif) no-repeat 5% 50%;
padding: 0.3em 1em;
}
Idéalement, j’aurais défini le positionnement de la flèche à 10 pixels du bord gauche de l’ancre. La
spécification CSS n’autorise cependant pas le mélange des unités. J’ai donc utilisé un pourcentage à la
place. En vérité, la plupart des navigateurs acceptent les unités multiples, et il me semble que c’est un
des rares points où la spécification a tort.
Avec.toutes.les.bordures.empilées.les.unes.sur.les.autres,.vous.remarquerez.que.la.bordure.
inférieure.sur.le.dernier.lien.double.la.bordure.inférieure.de.la.liste..Dans.le.cas.présent,.
je.m’en.tiens.au.plus.simple.et.je.supprime.la.bordure.inférieure.de.la.liste..Si.ce.n’est.pas.
possible,. on. peut. ajouter. une. classe. sur. le. premier. ou. le. dernier. élément. de. la. liste. pour.
supprimer.directement.la.bordure..À l’avenir,.vous.pourrez.aussi.utiliser.la.pseudo-classe.
:last-child,.mais.sa.prise.en.charge.par.les.navigateurs.est.à.cette.heure.encore.limitée..
ul.nav .last a {
border-bottom: 0;
}
La.liste.ressemble.maintenant.à.une.barre.de.navigation.verticale.de.fière.apparence..Pour.
compléter.l’effet,.il.ne.reste.qu’à.appliquer.les.états.:hover,.:focus.et.:selected..Pour.
cela,.changez.les.couleurs.de.texte.et.d’arrière-plan..Vous.pouvez.aussi.changer.celles.des.
bordures.afin.de.créer.un.effet.d’enfoncement.du.bouton..Ces.styles.sont.appliqués.aux.liens.
d’ancre.lorsque.l’utilisateur.les.survole..Ils.sont.également.appliqués.à.toutes.les.ancres.dont.
l’élément.de.liste.parent.reçoit.la.classe.selected..
ul.nav a:hover,
ul.nav a:focus,
ul.nav .selected a {
color: #E4FFD3;
background-color: #6DA203;
}
ception.d’Internet.Explorer 6.et.de.ses.versions.antérieures.pour.Windows..Internet.Explorer 6.ajoute.inexplicablement.un.espace.supplémentaire.au-dessus.et.en.dessous.des.éléments.
de.liste..Pour.corriger.ce.bogue,.vous.devez.définir.la.propriété.display.des.éléments.de.
liste.en.lui.attribuant.la.valeur.inline :
ul.nav li {
display: inline: /* :KLUDGE: Supprime l’espace incongru dans IE/Win */
}
Et.voilà :.vous.avez.maintenant.une.barre.de.navigation.verticale.mise.en.forme,.complète,.
avec.ses.effets.de.survol..
Maîtrise des CSS
ul.nav a {
display: block;
color: #2B3F00;
text-decoration: none;
border-top: 1px solid #E4FFD3;
border-bottom: 1px solid #486B02;
background: url(/img/arrow.gif) no-repeat 5% 50%;
padding: 0.3em 1em;
}
Idéalement, j’aurais défini le positionnement de la flèche à 10 pixels du bord gauche de l’ancre. La
spécification CSS n’autorise cependant pas le mélange des unités. J’ai donc utilisé un pourcentage à la
place. En vérité, la plupart des navigateurs acceptent les unités multiples, et il me semble que c’est un
des rares points où la spécification a tort.
Avec.toutes.les.bordures.empilées.les.unes.sur.les.autres,.vous.remarquerez.que.la.bordure.
inférieure.sur.le.dernier.lien.double.la.bordure.inférieure.de.la.liste..Dans.le.cas.présent,.
je.m’en.tiens.au.plus.simple.et.je.supprime.la.bordure.inférieure.de.la.liste..Si.ce.n’est.pas.
possible,. on. peut. ajouter. une. classe. sur. le. premier. ou. le. dernier. élément. de. la. liste. pour.
supprimer.directement.la.bordure..À l’avenir,.vous.pourrez.aussi.utiliser.la.pseudo-classe.
:last-child,.mais.sa.prise.en.charge.par.les.navigateurs.est.à.cette.heure.encore.limitée..
ul.nav .last a {
border-bottom: 0;
}
La.liste.ressemble.maintenant.à.une.barre.de.navigation.verticale.de.fière.apparence..Pour.
compléter.l’effet,.il.ne.reste.qu’à.appliquer.les.états.:hover,.:focus.et.:selected..Pour.
cela,.changez.les.couleurs.de.texte.et.d’arrière-plan..Vous.pouvez.aussi.changer.celles.des.
bordures.afin.de.créer.un.effet.d’enfoncement.du.bouton..Ces.styles.sont.appliqués.aux.liens.
d’ancre.lorsque.l’utilisateur.les.survole..Ils.sont.également.appliqués.à.toutes.les.ancres.dont.
l’élément.de.liste.parent.reçoit.la.classe.selected..
ul.nav a:hover,
ul.nav a:focus,
ul.nav .selected a {
color: #E4FFD3;
background-color: #6DA203;
}
ception.d’Internet.Explorer 6.et.de.ses.versions.antérieures.pour.Windows..Internet.Explorer 6.ajoute.inexplicablement.un.espace.supplémentaire.au-dessus.et.en.dessous.des.éléments.
de.liste..Pour.corriger.ce.bogue,.vous.devez.définir.la.propriété.display.des.éléments.de.
liste.en.lui.attribuant.la.valeur.inline :
ul.nav li {
display: inline: /* :KLUDGE: Supprime l’espace incongru dans IE/Win */
}
Et.voilà :.vous.avez.maintenant.une.barre.de.navigation.verticale.mise.en.forme,.complète,.
avec.ses.effets.de.survol..