111
Mise en forme des listes et création de barres de navigation
La.première.chose.à.faire.est.de.supprimer.les.puces.par.défaut.et.de.ramener.à.zéro.la.marge.
et.le.remplissage :
ul.nav {
margin: 0;
padding: 0;
list-style-type: none;
}
Vous.pouvez.ensuite.commencer.à.disposer.la.mise.en.forme.graphique..Ici,.nous.donnons.
au.menu.de.navigation.un.arrière-plan.vert.clair.et.une.bordure.vert.sombre..Nous.définissons.
aussi.la.largeur.de.la.liste.de.navigation.en.cadratins.(em).
ul.nav {
margin: 0;
padding: 0;
list-style-type: none;
width: 8em;
background-color: #8BD400;
border: 1px solid #486B02;
}
Au.lieu.d’appliquer.la.mise.en.forme.aux.éléments.de.la.liste,.on.l’applique.aux.liens.d’ancre.
à.l’intérieur,.grâce.à.quoi.on.obtient.une.meilleure.compatibilité.entre.les.navigateurs..Pour.
créer. une. zone. réactive. analogue. à. un. bouton,. vous. devez. attribuer. la. valeur. block. à. la.
propriété.display.des.ancres..Les.liens.d’ancre.s’étirent.alors.de.manière.à.couvrir.tout.
l’espace.disponible,.qui.correspond.ici.à.la.largeur.de.la.liste..Vous.pouvez.définir.la.largeur.des.ancres.explicitement,.mais.j’ai.constaté.que.le.code.était.plus.facile.à.gérer.quand.
on.définissait.la.largeur.de.la.liste.parente..Les.deux.dernières.règles.sont.simplement.des.
ajouts.de.mise.en.forme.correspondant.à.la.couleur.du.texte.du.lien.et.à.la.désactivation.
des.soulignements.
ul.nav a {
display: block;
color: #2B3F00;
text-decoration: none;
}
Pour. créer. l’effet. de. biseau. sur. les. éléments. de. menu,. vous. devez. attribuer. à. la. bordure.
supérieure.une.couleur.plus.claire.que.la.couleur.d’arrière-plan.et.à.la.bordure.inférieure.
une.couleur.plus.sombre..À ce.stade,.vous.pouvez.aussi.insérer.une.image.d’arrière-plan.à.
utiliser.comme.icône.
Mise en forme des listes et création de barres de navigation
La.première.chose.à.faire.est.de.supprimer.les.puces.par.défaut.et.de.ramener.à.zéro.la.marge.
et.le.remplissage :
ul.nav {
margin: 0;
padding: 0;
list-style-type: none;
}
Vous.pouvez.ensuite.commencer.à.disposer.la.mise.en.forme.graphique..Ici,.nous.donnons.
au.menu.de.navigation.un.arrière-plan.vert.clair.et.une.bordure.vert.sombre..Nous.définissons.
aussi.la.largeur.de.la.liste.de.navigation.en.cadratins.(em).
ul.nav {
margin: 0;
padding: 0;
list-style-type: none;
width: 8em;
background-color: #8BD400;
border: 1px solid #486B02;
}
Au.lieu.d’appliquer.la.mise.en.forme.aux.éléments.de.la.liste,.on.l’applique.aux.liens.d’ancre.
à.l’intérieur,.grâce.à.quoi.on.obtient.une.meilleure.compatibilité.entre.les.navigateurs..Pour.
créer. une. zone. réactive. analogue. à. un. bouton,. vous. devez. attribuer. la. valeur. block. à. la.
propriété.display.des.ancres..Les.liens.d’ancre.s’étirent.alors.de.manière.à.couvrir.tout.
l’espace.disponible,.qui.correspond.ici.à.la.largeur.de.la.liste..Vous.pouvez.définir.la.largeur.des.ancres.explicitement,.mais.j’ai.constaté.que.le.code.était.plus.facile.à.gérer.quand.
on.définissait.la.largeur.de.la.liste.parente..Les.deux.dernières.règles.sont.simplement.des.
ajouts.de.mise.en.forme.correspondant.à.la.couleur.du.texte.du.lien.et.à.la.désactivation.
des.soulignements.
ul.nav a {
display: block;
color: #2B3F00;
text-decoration: none;
}
Pour. créer. l’effet. de. biseau. sur. les. éléments. de. menu,. vous. devez. attribuer. à. la. bordure.
supérieure.une.couleur.plus.claire.que.la.couleur.d’arrière-plan.et.à.la.bordure.inférieure.
une.couleur.plus.sombre..À ce.stade,.vous.pouvez.aussi.insérer.une.image.d’arrière-plan.à.
utiliser.comme.icône.