▼ Table des matières

Les listes

les listes à puces

Les listes à puce se construisent à l'aide de trois balises:

ul = liste non ordonnée
ol = liste ordonnée (liste numérotée, par exemple)
li= chaque élément de la liste

Dans le cadre d'une utilisation de navigateurs en mode texte, les listes à puces sont la base d'une ergonomie optimale qui respecte les normes d'accessibilité dans la construction de menus horizontaux ou verticaux.
Les menus verticaux se construiront automatiquement par simple utilisation standard d'une liste non ordonnée:

<ul>
<li><a href="http://premiére URL">premier élément du menu</a></li>
<li><a href="http://seconde URL">second élément du menu</a></li>
<li><a href="http://troisième URL">troisième élément du menu</a></li>
</ul>

Par contre, des tableaux simples ou des menus horizontaux, peuvent être construits à l'aide de listes à puces contraintes de se placer à l'horizontale, chacune à la droite de la précédente, en utilisant la propriété float, associée à la direction "left".
Les puces se répartissent alors sur toute la largeur spécifiée. Au delà des possibilités de cette largeur, les puces passent à la ligne suivante.
Cette façon de faire peut être également très intéressante pour présenter une série de miniatures cliquables conduisant, chacune, à une image en grandeur réelle.

menu horizontal

Pour construire un menu horizontal HTML, valide accessibilité W3C, vous pouvez insérer des liens dans une liste à puces qui les disposera horizontalement par l'utilisation des deux propriétés conjointes float:left et display:block.

HTML

<ul style="display:block;height:24px; width:93%">
<li style="width:auto;float:left;display:block;padding:2px;background-color:green"><a href="#">|Accessibilité</a></li>
<li style="width:auto;float:left;display:block;padding:2px;background-color:green"><a href="#">|Archivage</a></li>
<li style="width:auto;float:left;display:block;padding:2px;background-color:green"><a href="#">|Audio</a></li>
<li style="width:auto;float:left;display:block;padding:2px;background-color:green"><a href="#">|Bureautique</a></li>
<li style="width:auto;float:left;display:block;padding:2px;background-color:green"><a href="#">|Graphisme</a></li>
<li style="width:auto;float:left;display:block;padding:2px;background-color:green"><a href="#">|Html</a></li>
<li style="width:auto;float:left;display:block;padding:2px;background-color:green"><a href="#">|Internet</a></li>
<li style="width:auto;float:left;display:block;padding:2px;background-color:green"><a href="#">|Mac Os</a></li>
<li style="width:auto;float:left;display:block;padding:2px;background-color:green"><a href="#">|Recherches</a></li>
</ul>

Le signe # n'est ici présent que pour désactiver le lien. Dans le cadre d'un fonctionnement effectif du menu, il serait nécessaire de le remplacer par l'URL d'une page du site.
D'autre part, les règles CSS inclues dans le code HTML, n'ont, en principe rien à y faire et devraient être reportées dans la feuille de style de cette façon:

CSS

.exemple {
  display:block;height:24px;
  width:100%
}
.exemple li {
  width:auto;
  float:left;
  display:block;
  padding:2px;
  background-color:green
}
.exemple a{
color:blue;
text-decoration: none; /*supprime le soulignement des liens qui est la règle par défaut*/
}
.exemple a:hover{
color:gold;
text-decoration: none;
}
/*La pseudo-classe CSS :hover agit sur tout élément (balise) survolé par le curseur de la souris. Dans ce cas, la règle définit green comme couleur du texte d'un lien qui, au survol de la souris, sera de couleur gold.*/

Commentaires

La pseudo-classe :hover risque d'avoir un avenir assez limité car elle n'est d'aucune utilité sur les appareils munis d'écrans tactiles (lien externe) qui ne répondent pas de manière optimale au curseur de la souris.
Les balises <li> et <ul> sont, par défaut des balises dites de type block. Elles se placent en blocs placés les uns en dessous des autres.
"display:block" contraint ses balises à adopter un comportement de type inline (affichage sur une même ligne).
Le menu improvisé (non actif) ci-dessous est donc le résultat des deux opérations HTML et CSS précédemment exposées:

Résultat

En savoir plus

Dialogues en Html