Travaux pratiques
TROISIÈME PARTIE
164
Créer un menu sous forme de boutons
Enrichissons ce menu vertical élémentaire en y remplaçant les liens hypertextes par
des zones cliquables. Rejetant évidemment les techniques antiques empilant moults
éléments inutiles,
ou autres cellules , contentons-nous d’intervenir sur les
styles de la structure existante.
On obtient l’effet recherché en attribuant aux liens hypertextes hauteur, largeur, bordure et couleur de fond. L’élément apparaîtra ainsi comme une forme carrée ou
rectangulaire cliquable.
Complétons le code du menu vertical :
en y dotant les liens hypertextes de dimensions, d’une couleur de fond et d’une
bordure :
Figure 12–3
Menu vertical finalisé
CSS
ul#menu {
margin: 0;
padding: 0;
font: bold 1em Georgia, Times, serif;
list-style-type: none;
}
#menu a {
color: green;
text-decoration: none;
line-height: 25px;
}
#menu a:hover, #menu a:focus {
color: orange;
}
#menu a {
color: green;
text-decoration: none;
line-height: 25px;