275
Étude de cas : Climb the Mountains
blanc.ni.arrondi..Vous.remarquerez.aussi.que.nous.sommes.privés.de.notre.belle.ombre.portée..Rappelez-vous.que.nous.nous.sommes.assurés.que.le.texte.de.la.légende.repose.sur.un.
arrière-plan.gris.en.ajoutant.une.règle.à.notre.feuille.de.styles.screen-i8.css..J’espère.que.les.
choses.auront.évolué.pour.Internet.Explorer.avant.que.je.ne.devienne.grand-père..
Positionner des listes et révéler leur contenu
Dans.cette.partie.de.notre.étude.de.cas,.nous.allons.nous.concentrer.sur.la.zone.Your.latest.
route.(votre.dernier.itinéraire).du.site,.du.côté.gauche.de.la.page..Dans.une.version.totalement.aboutie.du.site,.il.s’agirait.d’une.sélection.de.statistiques,.de.cartes.et.de.graphiques.
liés.à.une.randonnée.particulière,.chaque.panneau.pouvant.être.observé.en.cliquant.sur.un.
onglet.différent.
Pour. commencer,. nous. allons. ajouter. la. navigation. pour. la. section. des. statistiques. de. la.
page.d’accueil.du.site.CTM..Le.code.HTML.requiert.deux.listes,.l’une.pour.les.onglets.de.
statistique.à.gauche.et.l’autre.pour.les.options.de.partage,.d’impression.et.d’e-mail.à.droite :
Notez.que.nous.avons.ajouté.class="cur".à.l’onglet.Elevation,.car.nous.souhaitons.qu’il.
apparaisse.comme.sélectionné.dans.cet.exercice,.et.nous.ciblons.directement.ce.lien.avec.
cette.classe.supplémentaire..
Les.deux.listes.à.puces.héritent.de.quelques.styles.existants.provenant.d’autres.endroits.
du. document ;. on. obtient. ainsi. les. liens. bleus. et. les. règles. font-family. et. font-size.
présentées.à.la.Figure 11.19.
Figure 11.19
Les listes de navigation
de base de la zone
Your latest route.
Sinon,.j’ai.fait.flotter.la.liste.Share,.Print.et.Email.à.droite..Rien.de.spécial.à.ce.sujet..Donc,.
à.partir.de.maintenant,.concentrons-nous.sur.la.liste.à.gauche..Nous.allons.la.faire.flotter.à.
Étude de cas : Climb the Mountains
blanc.ni.arrondi..Vous.remarquerez.aussi.que.nous.sommes.privés.de.notre.belle.ombre.portée..Rappelez-vous.que.nous.nous.sommes.assurés.que.le.texte.de.la.légende.repose.sur.un.
arrière-plan.gris.en.ajoutant.une.règle.à.notre.feuille.de.styles.screen-i8.css..J’espère.que.les.
choses.auront.évolué.pour.Internet.Explorer.avant.que.je.ne.devienne.grand-père..
Positionner des listes et révéler leur contenu
Dans.cette.partie.de.notre.étude.de.cas,.nous.allons.nous.concentrer.sur.la.zone.Your.latest.
route.(votre.dernier.itinéraire).du.site,.du.côté.gauche.de.la.page..Dans.une.version.totalement.aboutie.du.site,.il.s’agirait.d’une.sélection.de.statistiques,.de.cartes.et.de.graphiques.
liés.à.une.randonnée.particulière,.chaque.panneau.pouvant.être.observé.en.cliquant.sur.un.
onglet.différent.
Pour. commencer,. nous. allons. ajouter. la. navigation. pour. la. section. des. statistiques. de. la.
page.d’accueil.du.site.CTM..Le.code.HTML.requiert.deux.listes,.l’une.pour.les.onglets.de.
statistique.à.gauche.et.l’autre.pour.les.options.de.partage,.d’impression.et.d’e-mail.à.droite :
Notez.que.nous.avons.ajouté.class="cur".à.l’onglet.Elevation,.car.nous.souhaitons.qu’il.
apparaisse.comme.sélectionné.dans.cet.exercice,.et.nous.ciblons.directement.ce.lien.avec.
cette.classe.supplémentaire..
Les.deux.listes.à.puces.héritent.de.quelques.styles.existants.provenant.d’autres.endroits.
du. document ;. on. obtient. ainsi. les. liens. bleus. et. les. règles. font-family. et. font-size.
présentées.à.la.Figure 11.19.
Figure 11.19
Les listes de navigation
de base de la zone
Your latest route.
Sinon,.j’ai.fait.flotter.la.liste.Share,.Print.et.Email.à.droite..Rien.de.spécial.à.ce.sujet..Donc,.
à.partir.de.maintenant,.concentrons-nous.sur.la.liste.à.gauche..Nous.allons.la.faire.flotter.à.