119
Mise en forme des listes et création de barres de navigation
Comme.pour.les.exemples.précédents,.les.marges.et.le.remplissage.sont.ramenés.à.zéro,.les.
puces.des.listes.sont.supprimées.et.une.largeur.est.définie.pour.la.barre.de.navigation..La.
valeur.hidden.est.attribuée.à.la.propriété.overflow.de.la.liste.de.navigation.afin.d’ouvrir.un.
dégagement.pour.tous.les.éléments.flottants.qui.y.sont.inclus..
ul.nav {
margin: 0;
padding: 0;
list-style: none;
width: 72em;
overflow: hidden;
}
Ici.aussi,.les.éléments.de.la.liste.sont.rendus.flottants.à.gauche.afin.qu’ils.s’affichent.horizontalement.et.non.verticalement..Cette.fois,.la.plus.grande.des.deux.images.qui.composent.
l’onglet. est. cependant. appliquée. sous. forme. d’image. d’arrière-plan. à. l’élément. de. liste..
Comme.elle.forme.la.partie.droite.de.l’onglet,.elle.est.positionnée.à.droite.
ul.nav li {
float: left;
background: url(img/tab-right.gif) no-repeat right top;
}
L’affichage.des.ancres.est.aussi.défini.comme.de.niveau.bloc.(display: block).afin.que.
l’utilisateur.puisse.cliquer.n’importe.où.dans.la.zone..La.largeur.de.chaque.onglet.est.à.nouveau.contrôlée.par.la.largeur.du.contenu..La.valeur.de.hauteur.de.ligne.contrôle.également.
la.hauteur..Pour.compléter.l’effet.des.onglets,.la.partie.gauche.de.l’onglet.est.appliquée.sous.
forme.d’arrière-plan.à.l’ancre.et.alignée.à.gauche..Lorsque.l’onglet.change.de.taille,.cette.
image.reste.alignée.à.gauche,.par-dessus.l’image.plus.grande.et.en.couvrant.son.bord.gauche.
à.angle.droit..Enfin,.pour.s’assurer.que.cette.technique.fonctionne.sous.Internet.Explorer 5.2.
sur.Mac,.les.ancres.sont.rendues.flottantes.également..
ul.nav li a {
display: block;
padding: 0 2em;
line-height: 2.5em;
background: url(img/tab-left.gif) no-repeat left top;
text-decoration: none;
color: #fff;
float: left;
}
Mise en forme des listes et création de barres de navigation
Comme.pour.les.exemples.précédents,.les.marges.et.le.remplissage.sont.ramenés.à.zéro,.les.
puces.des.listes.sont.supprimées.et.une.largeur.est.définie.pour.la.barre.de.navigation..La.
valeur.hidden.est.attribuée.à.la.propriété.overflow.de.la.liste.de.navigation.afin.d’ouvrir.un.
dégagement.pour.tous.les.éléments.flottants.qui.y.sont.inclus..
ul.nav {
margin: 0;
padding: 0;
list-style: none;
width: 72em;
overflow: hidden;
}
Ici.aussi,.les.éléments.de.la.liste.sont.rendus.flottants.à.gauche.afin.qu’ils.s’affichent.horizontalement.et.non.verticalement..Cette.fois,.la.plus.grande.des.deux.images.qui.composent.
l’onglet. est. cependant. appliquée. sous. forme. d’image. d’arrière-plan. à. l’élément. de. liste..
Comme.elle.forme.la.partie.droite.de.l’onglet,.elle.est.positionnée.à.droite.
ul.nav li {
float: left;
background: url(img/tab-right.gif) no-repeat right top;
}
L’affichage.des.ancres.est.aussi.défini.comme.de.niveau.bloc.(display: block).afin.que.
l’utilisateur.puisse.cliquer.n’importe.où.dans.la.zone..La.largeur.de.chaque.onglet.est.à.nouveau.contrôlée.par.la.largeur.du.contenu..La.valeur.de.hauteur.de.ligne.contrôle.également.
la.hauteur..Pour.compléter.l’effet.des.onglets,.la.partie.gauche.de.l’onglet.est.appliquée.sous.
forme.d’arrière-plan.à.l’ancre.et.alignée.à.gauche..Lorsque.l’onglet.change.de.taille,.cette.
image.reste.alignée.à.gauche,.par-dessus.l’image.plus.grande.et.en.couvrant.son.bord.gauche.
à.angle.droit..Enfin,.pour.s’assurer.que.cette.technique.fonctionne.sous.Internet.Explorer 5.2.
sur.Mac,.les.ancres.sont.rendues.flottantes.également..
ul.nav li a {
display: block;
padding: 0 2em;
line-height: 2.5em;
background: url(img/tab-left.gif) no-repeat left top;
text-decoration: none;
color: #fff;
float: left;
}