116
Maîtrise des CSS
Création d’une barre de navigation graphique
Les.barres.de.navigation.simples.sont.excellentes.pour.le.contenu.paginé,.mais.vous.souhaiterez.sans.doute.créer.des.menus.plus.élaborés.sur.le.plan.graphique.pour.votre.navigation.
principale..Dans.cet.exemple,.vous.allez.voir.comment.créer.une.barre.de.navigation.graphique.comme.celle.de.la.Figure 6.4.
Figure 6.4
Barre de navigation horizontale.
Comme.dans.le.précédent.exemple,.vous.devez.commencer.par.une.liste.à.puces.simple :
Ensuite,. vous. devez. réduire. à. zéro. le. remplissage. et. les. marges,. ainsi. que. supprimer. les.
puces. par. défaut.. Pour. cet. exemple,. il. faut. que. la. barre. de. navigation. horizontale. fasse.
72 cadratins.de.large.et.possède.un.arrière-plan.dégradé.orange.
ul. nav {
margin: 0;
padding: 0;
list-style: none;
width: 72em;
background: #FAA819 url(img/mainNavBg.gif) repeat-x;
}
Pour.le.moment,.la.liste.s’affiche.verticalement..Pour.l’afficher.horizontalement,.faites.flotter.
à.gauche.les.éléments.de.liste.
ul. nav li {
float: left;
}
Rappelez-vous.que,.lorsqu’un.élément.flotte,.il.ne.prend.plus.d’espace.dans.le.flot.du.document..Du.coup,.la.liste.parente.n’a.plus.de.contenu ;.elle.s’effondre.et.l’arrière-plan.de.la.
liste.disparaît..Comme.vous.l’avez.appris.au.Chapitre 3,.il.existe.plusieurs.moyens.d’amener.
les.éléments.parents.à.contenir.les.enfants.flottants..L’un.d’eux.consiste.à.ajouter.un.élément.
de.dégagement..Malheureusement,.cela.nécessite.d’ajouter.une.balise.inutile.à.la.page,.ce.
qu’il.vaut.mieux.éviter..L’une.des.autres.méthodes.consiste.à.faire.flotter.l’élément.parent.
également.et.à.le.dégager.plus.bas,.par.exemple.en.utilisant.le.pied.de.page.du.site..La.troisième.méthode,.que.j’adopte.habituellement,.passe.par.l’utilisation.d’overflow:hidden :
ul.nav {
margin: 0;
padding: 0;
Maîtrise des CSS
Création d’une barre de navigation graphique
Les.barres.de.navigation.simples.sont.excellentes.pour.le.contenu.paginé,.mais.vous.souhaiterez.sans.doute.créer.des.menus.plus.élaborés.sur.le.plan.graphique.pour.votre.navigation.
principale..Dans.cet.exemple,.vous.allez.voir.comment.créer.une.barre.de.navigation.graphique.comme.celle.de.la.Figure 6.4.
Figure 6.4
Barre de navigation horizontale.
Comme.dans.le.précédent.exemple,.vous.devez.commencer.par.une.liste.à.puces.simple :
Ensuite,. vous. devez. réduire. à. zéro. le. remplissage. et. les. marges,. ainsi. que. supprimer. les.
puces. par. défaut.. Pour. cet. exemple,. il. faut. que. la. barre. de. navigation. horizontale. fasse.
72 cadratins.de.large.et.possède.un.arrière-plan.dégradé.orange.
ul. nav {
margin: 0;
padding: 0;
list-style: none;
width: 72em;
background: #FAA819 url(img/mainNavBg.gif) repeat-x;
}
Pour.le.moment,.la.liste.s’affiche.verticalement..Pour.l’afficher.horizontalement,.faites.flotter.
à.gauche.les.éléments.de.liste.
ul. nav li {
float: left;
}
Rappelez-vous.que,.lorsqu’un.élément.flotte,.il.ne.prend.plus.d’espace.dans.le.flot.du.document..Du.coup,.la.liste.parente.n’a.plus.de.contenu ;.elle.s’effondre.et.l’arrière-plan.de.la.
liste.disparaît..Comme.vous.l’avez.appris.au.Chapitre 3,.il.existe.plusieurs.moyens.d’amener.
les.éléments.parents.à.contenir.les.enfants.flottants..L’un.d’eux.consiste.à.ajouter.un.élément.
de.dégagement..Malheureusement,.cela.nécessite.d’ajouter.une.balise.inutile.à.la.page,.ce.
qu’il.vaut.mieux.éviter..L’une.des.autres.méthodes.consiste.à.faire.flotter.l’élément.parent.
également.et.à.le.dégager.plus.bas,.par.exemple.en.utilisant.le.pied.de.page.du.site..La.troisième.méthode,.que.j’adopte.habituellement,.passe.par.l’utilisation.d’overflow:hidden :
ul.nav {
margin: 0;
padding: 0;