Un menu horizontal réactif
La notion de descendance et notre menu
Ben oui, il me semble que nous avons un peu dérivé. L'objectif était bien de faire un beau menu et pas de nous occuper de ces affaires de famille.
Ces affaires de famille vont nous occuper un peu
dans la suite, pour construire notre menu. Voyons cela.
- Observe le document ci-contre, dans l'encadré. Il contient deux listes non-ordonnées.
La première liste servira à établir un menu composé de trois items. La deuxième liste figure un contenu quelconque pour la page.
- Télécharge ici une version "propre" de ce document. (clic droit > Télécharger la cible sous...)
- Enregistre-la dans ton répertoire personnel sous le nom menu.html.
- En utilisant les notions abordées précédemment, réalise les transformations suivantes sur la première liste:
-
- supprimer les puces
- suppression de l'espacement à gauche de la liste
- transformation de la liste (Item1, Item2, ...) en une série de boutons disposés horizontalement.
A ce stade, il est
bien évident que la seule solution admise fera appel à une feuille
de style.
Qu'est-ce que c'est que ce beanz? Pas de problème pour faire ce menu: j'ai bien suivi la leçon jusque là. Mais impossible d'empêcher la deuxième liste de faire comme la première...
Bon, j'avoue que je vous ai piégé. Si l'on
travaille sur les balises <ul> et <li>, tout ce qui
s'applique à la première liste s'applique aussi à la deuxième.
Il nous faut trouver un moyen d'isoler la première liste pour la
traiter séparément.
Solution
A ce stade, la feuille de style obtenue est probablement du type suivant:
padding-left: 0; // suppression de l'espacement à gauche
}
li {
list-style-type: none; // suppression des puces
border: 1px solid red; // fin cadre autour de chaque item
margin: 0 5px; // léger écartement entre les "boutons"
float: left; // les "boutons" sont disposés côte à côte
width: 150px; // largeur de 150 px pour chaque "bouton"
text-align: center; // alignement centré
}
Le problème essentiel est donc bien que ces directives s'appliquent aux deux listes et non seulement au "menu".
- Vérifie que ta solution permet bien d'obtenir des boutons de la forme demandée. Si nécessaire, utilise les informations données dans le code ci-dessus pour rectifier ton travail.
-
Dans la barre d'état,
sélectionne le bloc <ul> correspondant à la
première liste. - Attribue l'identificateur "menu" à ce bloc.
- Enregistre le document.
<li><a href="..">Item 1</a></li>
<li><a href="..">Item 2</a></li>
<li><a href="..">Item 3</a></li>
</ul>
Le bloc <ul> est maintenant identifié comme "menu".
On le vérifiera aisément dans le code HTML de la page.
Il suffit maintenant de préciser que les directives de style concernant <li> ne sont valables que pour les élements qui ont un parent dont l'id est "menu".
- Ouvre l'éditeur CasCadeS de KompoZer.
-
Dans l'éditeur,
double-clique sur l'élément li, dans la liste
des .
- remplace la mention li par #menu li
avec un espace entre #menu et li - remplace de même la mention ul par #menu ul
- Clique sur et ferme l'outil CasCadeS.
- Enrgistre ton travail sous le nom menu.html.
- Vérifie que seul le bloc supérieur est encore sous forme de boutons.
Signification
de la manoeuvre dans l'éditeur CSS
L'ensemble de règles de mises en formes qui figurent dans la feuille de style doit être appliqué uniquement aux éléments de type li dont un parent est muni de l'identifiant menu.
Le deuxième bloc <ul> n'étant pas muni de l'identifiant menu, il n'est plus affecté.
La syntaxe générale est la suivante:
parent descendant { directives de style }
Autres exemples
Quand tu as répondu à toutes les questions et bien compris les
réponses, passe à la page suivante.
Dernière modification 05/11/2007
