261
Étude de cas : Climb the Mountains
Ensuite,.nous.utilisons.les.CSS.pour.appliquer.la.mise.en.forme.à.la.liste.de.navigation..Vous.
remarquerez.que.l’élément.est.positionné.de.manière.absolue,.à.un.endroit.précis.défini.par.
rapport.au.haut.et.à.la.gauche.du.conteneur.principal.
ul#navigation_pri {
list-style:none;
margin:0;
position:absolute;
top:0;
left:415px;
font-size:19px;
font-weight:bold;
font-family:Helvetica,Arial,sans-serif;
}
ul#navigation_pri li {
float:left;
margin:0;
padding:30px 10px 0 10px;
height:3000px;
}
ul#navigation_pri li a {
color:#000;
}
ul#navigation_pri li a:hover,
ul#navigation_pri li a:focus {
color:#333;
text-decoration:underline;
}
Notre.système.de.navigation.de.base.est.maintenant.mis.en.forme.(voir.Figure 11.6),.mais.
sans. indication. concernant. la. page. actuellement. affichée. (nous. reviendrons. sur. l’élément.
blockquote.qui.se.trouve.sur.le.calque.de.navigation.plus.loin.dans.cette.section).
Figure 11.6
Navigation principale
de base.
L’étape. suivante. consiste. à. utiliser. un. sélecteur. pour. définir. la. relation. entre. la. classe. de.
l’élément.body.et.la.classe.home.de.navigation..Vous.remarquerez.que.nous.avons.groupé.
deux.règles.identiques.pour.la.page.d’accueil.et.la.page.Routes :
.home ul#navigation_pri li.nav_home,
.routes ul#navigation_pri li.nav_routes {
background-color:#f5f5f5;
}