Construire un menu en CSS
CHAPITRE 12
171
les deux côtés). L’élégant menu horizontal à base de boutons cliquables ainsi obtenu
est représenté figure 12-10.
Créer un menu avec puces
Jusqu’ici, nous avons choisi de gommer les puces des listes. La propriété list-styletype propose plusieurs styles de puces : carrés, disques, cercles, etc. Via la propriété
list-style-image, on peut même y placer des icônes personnalisées. Penchons-nous
sur cette dernière solution, bien prometteuse.
Puces graphiques personnalisées
Avec la propriété list-style-image, on précise le chemin d’accès à l’image de puce
comme suit : list-style-image: url(image.png). Les formats d’image reconnus
sont GIF, JPEG ou PNG. Testons l’appel à une puce personnalisée d’environ 10 à 15
pixels :
#menu a {
display: block;
width: 120px;
border: 1px solid black;
color: green;
background: #fc0;
margin: 0 5px;
text-decoration: none;
text-align: center;
}
Figure 12–10
Un menu horizontal (III)
ul#menu {
margin: 0;
padding: 0;
font: bold 1em Georgia, Times, serif;
list-style-image: url(dossier/puce.png);
}