Construire un menu en CSS
CHAPITRE 12
165
Le résultat ainsi obtenu, représenté figure 12-4, est un peu décevant : les éléments du
menu n’y sont pas larges de 120 pixels. Bon sang, mais c’est bien sûr ! Nous avons vu
que l’élément , en ligne, ne fait pas partie des rares exceptions pouvant recevoir
des dimensions. Il n’occupe que l’espace nécessaire au texte qu’il contient, ce qui
explique le comportement de ses bordures.
Il s’agit donc de faire de ces liens des blocs, en les dotant simplement de la déclaration display: block.
Profitons-en pour spécifier des marges de 5 pixels en haut et en bas :
width: 120px;
border: 1px solid black;
background: #fc0;
text-align: center;
}
Figure 12–4
Menu sous forme
de boutons (I)
ATTENTION Bloc HTML ou bloc CSS ?
Il ne faut pas confondre la structure HTML de l’élément et le comportement que l’on peut lui attribuer en
CSS (ici, la balise est de type « en ligne », quelle que soit la propriété CSS appliquée).
En clair, display: block modifie le comportement de telle sorte que l’élément apparaisse comme un
bloc (avec positionnement, hauteur et largeur), mais la structure HTML n’est pas modifiée : reste un
élément en ligne et ne pourra pas contenir d’éléments de type bloc.
#menu a {
display: block;
margin: 5px 0;
color: green;
text-decoration: none;
line-height: 25px;
width: 120px;
border: 1px solid black;
background: #fc0;
text-align: center;
}