INFOR logo_ordinateur MATIQUE

Aide pour les CSS - Bruno Gadrat

CSS pour HTML4 et HTML5
Menu de navigation

Comment faire une feuille de style qui marche pour les menus de navigation en HTML4 et HTML5.

Codage HTML

En HTML4, on écrivait les menus avec des structures en listes

<div class="style1">
<ul>
<li> <a> ... </a> </li>
<li> <a> ... </a> </li>
<li> <a> ... </a> </li>
</ul>
</div>

En HTML5 on remplace la balise div par une balise nav (recommandation 3W) et rien n'empêche de raccourcir le code en supprimant la structure de liste (non recommandé mais sans erreur en vérification de conformité)
Version recommandée
<nav class="style1">
<ul>
<li> <a> ... </a> </li>
<li> <a> ... </a> </li>
<li> <a> ... </a> </li>
</ul>
</nav>

Version courte
<nav class="style1">
<a> ... </a>
<a> ... </a>
<a> ... </a>
</nav>

C'est plus court mais ça change l'ordre des balises à sélectionner.
On peut écrire une feuille de style qui marche pour les deux structures. Il faut qu'elle puisse fonctionner pour une structure longue avec ul et li ou pour une structure courte sans les ul et li. Cela évite d'avoir à changer toutes les pages du site web. Avez-vous remarqué qu'on avait toujours plusieurs sortes de menus de navigation sur un site ? En pratique, l'attribut class="..." est toujours présent.

Exemple en direct

Navigation façon HTML5 avec nav et juste la série des liens

Navigation façon HTML4 avec div, ul et li en plus de la série des liens

Navigation façon HTML5 recommandé avec nav, ul et li en plus de la série des liens

Sélection des bonnes balises dans la feuille de style

C'est qu'un exemple, pas un modèle

<style type="text/css">
nav, ul, li { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
.style1 { display: inline-block; background-color: #eee; margin:0px; padding:5px; color:#000;}
.style1 a { display: inline-block; background-color: #f00; padding:5px; color:#00f;}
.style1 a + a { background-color: #efe;}
.style1 ul {list-style:none; display: inline-block; }
.style1 li {display: inline;}
.style1 li + li a { background-color: #efe;}
</style>

 

pub