263
Étude de cas : Climb the Mountains
Mise en forme de la citation
Revenons.maintenant.à.cette.citation.de.John.Muir.qui.se.trouve.sur.le.calque.de.navigation.
principal..J’aime.cette.citation ;.elle.m’incite.à.sortir.par.tous.les.temps..N’oublions.jamais.
qu’il.faut.aller.dehors.et.voir.le.monde.tel.qu’il.est !.Sur.le.site.CTM,.il.serait.possible.de.
proposer.des.citations.bien.choisies.et.de.les.faire.tourner.dans.cette.partie.de.la.page,.pour.
stimuler.les.visiteurs..Voici.le.code :

“Climb the mountains and get their good tidings. Nature’s peace will
„ flow into you as sunshine flows into trees. The winds will blow their own
„ freshness into you, and the storms their energy, while cares will drop away
„ from you like the leaves of Autumn.”

John Muir, 1903

Hormis.l’emploi.des.entités.de.caractères.spécifiques.pour.les.guillemets,.il.n’y.a.là.rien.
de. bien. inhabituel.. Passons. donc. à. la. mise. en. forme..Auparavant,. nous. avons. positionné.
l’élément.ul#navigation_pri.de.manière.absolue.avec.position:absolute,.à.0 pixel.
du.haut.et.415 pixels.de.la.gauche.
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;
}
On.peut.maintenant.définir.la.mise.en.forme.pour.le.bloc.de.citation :
div#branding blockquote {
width:505px;
float:right;
padding:0 70px 20px 0;
background:url(../images/site/branding_johnmuir.jpg) no-repeat right top;
}
Le.bloc.figure.cependant.sous.la.zone.d’onglet.de.navigation.(voir.Figure 11.9).
Comme. le. système. de. navigation. est. positionné. de. manière. absolue,. on. peut. ajouter.
position:relative.à.l’élément.blockquote.et.le.faire.remonter.au-dessus.de.la.zone.de.
l’onglet :
div#branding blockquote {
position:relative;
width:505px;
float:right;
padding:0 70px 20px 0;
background:url(../images/site/branding_johnmuir.jpg) no-repeat right top;
}