280
Maîtrise des CSS
Passons.maintenant.à.la.mise.en.forme..Nous.allons.définir.des.styles.comme.font-family,.
font-size,.supprimer.ou.définir.des.marges.et.des.remplissages,.etc..Fait.important.à.noter,.
nous. déclarons. l’image. d’arrière-plan. elevation_marker.png. pour. l’élément. div#route_
elevation ul li,.en.appliquant.une.marge.gauche.de.15 pixels.afin.de.créer.un.espace.
entre.le.point.et.la.mesure.de.l’altitude..
div#route_elevation ul {
list-style:none;
margin:0;
font-family:Verdana,sans-serif;
font-size:9px;
font-weight:bold;
}
div#route_elevation ul li {
margin:0;
}
div#route_elevation ul li a {
color:#333;
display:block;
background:url(../images/site/elevation_marker.png) no-repeat 0 5px;
padding:0 0 0 15px;
}
div#route_elevation ul li a:hover,
div#route_elevation ul li a:focus {
color:#000;
}
div#route_elevation ul li a img {
display:none;
}
Nous.avons.ciblé.les.vignettes.d’image.de.Flickr.avec.div#route_elevation ul li a
img,.en.utilisant.display:none.afin.d’empêcher.les.images.de.s’afficher..
Le. graphique. d’altitude. présente. maintenant. la. liste. avec. une. mise. en. forme. plus. convenable,.mais.toujours.en.les.empilant.sur.le.côté.gauche.du.conteneur.(voir.Figure 11.27).
Figure 11.27
Les marqueurs de liste
sont mis en forme,
mais toujours empilés à
gauche.
Afin.de.nous.assurer.que.les.éléments.de.liste.trouvent.leur.emplacement.en.fonction.des.
coordonnées. de. position,. nous. devons. les. positionner. de. manière. absolue. en. utilisant.
position:absolute,.comme.ceci :
div#route_elevation ul li {
margin:0;
position:absolute;
}