277
Étude de cas : Climb the Mountains
Arrondir les coins
Nous.avons.examiné.précédemment.la.propriété.CSS 3.border-radius,.en.créant.un.cadre.
à.bords.arrondis.simple.pour.une.image..Ici,.nous.allons.utiliser.des.propriétés.similaires.
pour.donner.des.bords.arrondis.à.une.forme.simple.(l’élément.sélectionné.de.la.liste.dans.
notre.système.de.navigation).
Nous. utilisons. des. variétés. propres. aux. navigateurs. de. border-radius-top-left. et.
.
border-radius-top-right.pour.n’appliquer.les.bords.qu’au.haut.de.la.forme :
ul#route_nav li.cur {
background:#dff1f1;
-moz-border-radius-topleft:3px;
-webkit-border-top-left-radius:3px;
-moz-border-radius-topright:3px;
-webkit-border-top-right-radius:3px;
}
Cet.ajustement.simple.au.code.CSS.produit,.dans.Firefox.et.Safari,.l’onglet.subtil.présenté.
à.la.Figure 11.22.
Figure 11.22
L’onglet sélectionné
possède maintenant
des coins supérieurs
arrondis, avec des CSS
uniquement.
Notre.système.de.navigation.terminé,.passons.maintenant.aux.données.d’altitude..
Le graphique d’altitude
Sous.la.barre.de.navigation.de.la.zone.Your.latest.route,.nous.allons.maintenant.ajouter.le.
panneau.de.statistiques.qui.apparaît.par.défaut.dans.l’étude.de.cas,.soit.le.graphique.d’altitude.(Elevation).

Le.point.le.plus.important.à.noter.est.que.nous.utilisons.la.div.route_elevation.pour.dégager.les.listes.de.navigation.flottantes..clear:both.est.donc.immédiatement.défini.pour cette.
div.
.home div#route_elevation {
clear:both;
background:#dff1f1 url(../images/site/elevation_home.gif) 0 bottom no-repeat;
position:relative;
height:195px;
}