276
Maîtrise des CSS
gauche.et.ajouter.quelques.déclarations.de.style.de.base,.dont.une.couleur.plus.vive.pour.
l’onglet.sélectionné :
ul#route_nav {
list-style:none;
font-family:Verdana,sans-serif;
font-size:11px;
font-weight:bold;
float:left;
margin:0;
}
ul#route_nav li {
float:left;
margin:0;
padding:7px 10px;
}
ul#route_nav li a {
color:#666;
}
ul#route_nav li a:hover,
ul#route_nav li a:focus {
color:#333;
}
ul#route_nav li.cur a {
color:#000;
}
On. obtient. ainsi. les. deux. listes. présentées. à. la. Figure  11.20,. l’une. flottante. à. gauche. et.
l’autre.flottante.à.droite,.avec.une.mise.en.forme.initiale..
Figure 11.20
Les deux listes flottent
respectivement à
gauche et à droite.
Nous. allons. maintenant. dégager. ces. éléments. flottants. en. utilisant. clear:both. sur. le.
conteneur. des. statistiques. qui. suivra. cette. barre. de. navigation.. Ensuite,. nous. ajouterons.
une.couleur.d’arrière-plan.à.la.classe.sélectionnée :
ul#route_nav li.cur {
background:#dff1f1;
}
Ce.code.définit.la.zone.exacte.de.l’onglet.sélectionné.(voir.Figure 11.21).
Figure 11.21
Les deux listes flottent
respectivement à
gauche et à droite
lorsque l’onglet
sélectionné est mis en
surbrillance.
Notre.système.de.navigation.pour.la.section.Your.latest.route.est.maintenant.fonctionnel,.
mais.on.peut.encore.tirer.parti.d’une.intéressante.astuce.CSS 3.