On a pour l'instant un menu assez rudimentaire. Il existe beacoup de présentations différentes de menus à partir du même code XHTML, nottamment en utilisant des images.
Nous allons nous contenter d'un menu sobre, vous pourrez le personnaliser.
On utilise la propriété CSS list-style-type dont les valeurs possibles sont :
Pour mettre une image à la place des puces, on utilise : list-style-image
ul {
list-style-image: url('puce.png');
}Etant donné que IE n'interprète pas les pseudo classes hover sur autre chose que des liens, il faut qu'on agrandisse la taille des liens pour "coller" avec celle des blocs li. Sauf que l'élément a est en ligne : transformons le !
a {
/*
* Donne le comportement bloc à cet
* élément en ligne
*/
display:block;
}Vous pouvez maintenant colorer les liens et leur arrière plan
a {
display:block;
background-color:green;
color:red;
}
/*
* A mettre après le style concernant a
*/
a:hover {
background-color:red;
color:green;
}On enlève les puces et les indentations des listes
ul {
list-style-type:none;
padding:0; /*Pas besoin d'unité pour 0*/
}Vous pouvez régler les marges, tailles, bordures pour arriver au résultat attendu.
J'ai rencontré un bug sous IE qui m'oblige à spécifier une bordure pour que l'affichage du menu soit correct (les boutons s'espacent trop, sans raison)
Eh oui, comme souvent, IE buggue. Pour corriger le bug de IE, ajoutez la règle :
li {
display:inline;
}Il suffit d'ajouter :
li {
float:left
}Utilisez les propriétés border, background-color de l'élément ul, en réglant les marges si necessaire.
Arrangez le rendu de votre menu à votre goût. Enlevez au moins les puces et réduisez le padding de la liste.