121
Mise en forme des listes et création de barres de navigation
Comme.pour.tous.les.exemples.de.navigation.de.ce.chapitre,.il.faut.d’abord.ramener.à.zéro.
les.marges.et.le.remplissage.et.supprimer.les.puces.par.défaut..Il.faut.ensuite.donner.une.
largeur.aux.éléments.de.liste.et.les.faire.flotter.à.gauche..Pour.la.mise.en.forme,.je.souhaite.donner.aux.listes.de.navigation.une.bordure.et.une.couleur.d’arrière-plan..Toutefois,.
comme.les.éléments.de.liste.incorporés.sont.tous.flottants,.ils.ne.prennent.pas.d’espace.et.
les.listes.s’effondrent.sur.elles-mêmes..Pour.contourner.ce.problème,.j’ai.décidé.de.rendre.les.
listes.flottantes.également.
ul.nav, ul.nav ul {
margin: 0;
padding: 0;
list-style-type: none;
float: left;
border: 1px solid #486B02;
background-color: #8BD400;
}
ul.nav li {
float: left;
width: 8em;
background-color: #8BD400;
}
Pour.être.sûr.que.les.éléments.dans.les.menus.déroulants.s’empilent.verticalement,.il.faut.
définir.la.largeur.de.la.liste.en.lui.attribuant.la.même.valeur.que.la.largeur.des.éléments.de.
liste.incorporés..Le.menu.déroulant.commence.maintenant.à.prendre.forme..
Pour.masquer.les.menus.déroulants.jusqu’à.ce.qu’ils.soient.activés,.il.faut.les.positionner.de.
manière.absolue.(position: absolute).puis.les.masquer.en.les.sortant.à.gauche.de.l’écran.
ul.nav li ul {
width: 8em;
position: absolute;
left: -999em;
}
Mise en forme des listes et création de barres de navigation
Comme.pour.tous.les.exemples.de.navigation.de.ce.chapitre,.il.faut.d’abord.ramener.à.zéro.
les.marges.et.le.remplissage.et.supprimer.les.puces.par.défaut..Il.faut.ensuite.donner.une.
largeur.aux.éléments.de.liste.et.les.faire.flotter.à.gauche..Pour.la.mise.en.forme,.je.souhaite.donner.aux.listes.de.navigation.une.bordure.et.une.couleur.d’arrière-plan..Toutefois,.
comme.les.éléments.de.liste.incorporés.sont.tous.flottants,.ils.ne.prennent.pas.d’espace.et.
les.listes.s’effondrent.sur.elles-mêmes..Pour.contourner.ce.problème,.j’ai.décidé.de.rendre.les.
listes.flottantes.également.
ul.nav, ul.nav ul {
margin: 0;
padding: 0;
list-style-type: none;
float: left;
border: 1px solid #486B02;
background-color: #8BD400;
}
ul.nav li {
float: left;
width: 8em;
background-color: #8BD400;
}
Pour.être.sûr.que.les.éléments.dans.les.menus.déroulants.s’empilent.verticalement,.il.faut.
définir.la.largeur.de.la.liste.en.lui.attribuant.la.même.valeur.que.la.largeur.des.éléments.de.
liste.incorporés..Le.menu.déroulant.commence.maintenant.à.prendre.forme..
Pour.masquer.les.menus.déroulants.jusqu’à.ce.qu’ils.soient.activés,.il.faut.les.positionner.de.
manière.absolue.(position: absolute).puis.les.masquer.en.les.sortant.à.gauche.de.l’écran.
ul.nav li ul {
width: 8em;
position: absolute;
left: -999em;
}