Une barre de navigation consiste en une image graphique placée dans une rangée de cellules de tableau. Étant donné que l'utilisation de tableaux pour localiser tout contenu de page autre qu'un tableau n'est plus recommandée, de nombreux créateurs du Web recherchent de (nouvelles) façons d'utiliser des pages structurées.
Balisage XHTML et formatage CSS pour créer des barres de navigation.
Une simple barre de navigation CSS
La solution la plus simple pour créer une barre de navigation de texte de style CSS consiste peut-être à placer tous les liens sur une seule ligne de texte, comme dans l'exemple A.
Cette approche semble raisonnable et intuitive. Mais le problème est que le fait de placer tous les liens sur une seule ligne de texte rend difficile le contrôle de l’espace blanc entre les liens, ainsi qu’avant et après eux. Alors, pour éviter d'avoir tous vos liens entassés, vous feriez mieux
Après cela, vous devez généralement insérer des barres verticales et des espaces autres que des nouvelles lignes comme délimiteurs.
Comme le montre le code ci-dessous, le résultat n’est pas le balisage clair et structuré que nous souhaitons.
| Voici le contenu cité : <div id="navbar1"> <a href="link1a.html">Bouton 1</a> <a href="link2a.html ">Bouton 2</a> | <a href="link3a.html "> Bouton 3</a> </div> |
Barre de navigation CSS basée sur une liste Une autre façon de créer une barre de navigation CSS consiste à utiliser les balises <ul> et <li> pour représenter les liens sous forme de liste non ordonnée.
À première vue, utiliser une liste non ordonnée pour une barre de navigation semble contre-intuitif, car nous avons l'habitude de considérer une liste non ordonnée comme une liste d'éléments poussés verticalement, avec une puce devant chacun. Cela semble incompatible avec l'orientation horizontale de la barre de navigation.
Cependant, la structure logique d'une liste en tant que collection d'éléments de liste indépendants peut être appliquée aux liens dans la barre de navigation et les règles CSS vous permettent de forcer le remplacement de la présentation par défaut des éléments de liste, d'éliminer les puces et d'organiser les éléments de liste sur la page. de flotteur ci-dessous.
Sachant cela, regardons maintenant l'exemple B, créant une barre de navigation de style CSS et étiquetée XHTML basée sur une liste non ordonnée.
Voici le balisage XHTML :
| Voici le contenu cité : <div id="navbar2"> |
Voici le code CSS pour convertir une liste de liens texte en barre de navigation :
| Voici le contenu cité : div#barredenavigation2 { |