Un Menu vertical léger sans liste à puces valide W3C.
Menu 1 (validé CSS/w3c, HTML4.1/W3C, Norme CArotte) Démonstration.
code CSS :
<head>
<style type="text/css">
div.mn{
margin:5px 5px 0 0;
width:120px;
background-color: #fff;
font-size:11px;
}
div.mn a{
padding-left:5px;
background-color: #f1f1f1;
text-decoration:none;
border-top:1px solid #e4e4e4;
border-bottom:1px solid #f9f9f9;
color:#000;
display:block;
width:100%;/*largeur IE pour avoir la souris sur la largeur complète du menu*/
}
div.mn a:hover{
background-color: #333;
color:#f1f1f1;
}
</style>
</head>
code HTML :
<body>
<div class="mn">
<a href="#">item 1</a>
<a href="#">item 2</a>
<a href="#">item 3</a>
<a href="#">item 4</a>
<a href="#">item 5</a>
<a href="#">item 6</a>
</div>
</body>
Explications : div.mn
Ce menu adopte la même présentation sous :
PC : IE6, Firefox 1.0, Opéra 7.54
MAC : OMNIWEB-SAFARI 1.2, Firefox 1.0.1
Il présente une toute petite différence d’interprétation de hauteur de ligne sous Firefox sous MAC, différente que sous le même navigateur sous PC.
Explications :
Dans cette exemple la balise div joue le rôle de container, elle remplace la balise ul. Il n’y a plus non plus de balise li. Seulement la balise a, nécessaire pour les liens.
1 er avantage.
j’ai supprimé du code non nécessaire :
côté CSS : élément : list-style : none ;
côté HTML : balise : li
J’utilise un élément de CSS fondamental : "display:block". Cet élément est une petite merveille.
Conclusion :
Il n’est nécessaire d’utiliser des listes à puces que quand cela se justifie. Ce n’est en règle général pas le cas.
Dans la même rubrique
- Un beau travail : Julien Pons Designer.
- Vidéo et imagerie numérique - Infographie
- Un site qui a du ventre.
- SPIP Admin
- Liste de sites avec valorisation des CSS
- geek vidéos web 2.0
- Créer une icône de type favicon.ico
- ProzeValide, un validateur W3C multipages
- Couleurs identiques.
- Un Menu vertical léger sans liste à puces valide W3C.
Mots-clés
RSS 2.0