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.

  • Mon menu

    Liste de courses

    • Une salade
    • Du mou pour le chat
    • Le journal
    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.

    1. supprimer les puces
    2. suppression de l'espacement à gauche de la liste
    3. transformation de la liste (Item1, Item2, ...) en une série de boutons disposés horizontalement.

MenuA 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:

ul {
    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.
  • <ul>Dans la barre d'état, sélectionne le bloc <ul> correspondant à la première liste.
  • Attribue l'identificateur "menu" à ce bloc.
id = menu
  • Enregistre le document.
<ul id=" menu">
    <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.
  • élément liDans l'éditeur, double-clique sur l'élément li, dans la liste des  Feuilles et règles.
Une petite boîte de dialogue te permet alors de modifier la nature du sélecteur.
#menu li
  • 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 OK 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.

Parent et descendantSignification 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 }

#menu li {directives de style}

Autres exemples 

A quoi s'appliquent les règles de styles qui suivent le sélecteur suivant?
#texte .imageGauche
Les éléments de la classe "texte" qui contiennent un élément dont l'identifiant est "imageGauche"
Les éléments dont l'identifiant est "texte" et dont la classe est "imageGauche"
Les éléments dont la classe est "imageGauche" et dont le parent immédiat possède l'identifiant "texte"
Les éléments dont la classe est "imageGauche" et dont un parent possède l'identifiant "texte"
A quoi s'appliquent les règles de styles qui suivent le sélecteur suivant?
body p
A tous les éléments de type "paragraphe" qui se trouvent dans le corps du document
Tous les éléments de type <body> qui se trouvent dans un paragraphe
Aucun élément: l'expression n'a aucun sens.
Tous les éléments du document
A quoi s'appliquent les règles de styles pour le sélecteur suivant?
#menu li a
Tous les éléments contenus dans un bloc d'identifiant "menu"
Tous les éléments de type <li> contenus dans un bloc d'identifiant "menu"
Tous les éléments de type <a> qui se trouvent dans un bloc de type <li> qui se trouvent dans un bloc d'identifiant "menu"
Dans une feuille de style, on trouve
#zone {color: red};
#zone li {color: yellow}
et dans le texte HTML, on peut lire
<div id="zone">
<ul>
    <li>ligne1</li>
    <li>ligne2</li>
</ul>
</div>
Quelle est la couleur des deux items "ligne1" et "ligne2"
Aucune couleur n'est précisée: impossible de répondre à cette question.
La couleur est rouge: tous les éléments contenus dans un bloc <div id="zone"> sont rouges.
La couleur est jaune. La règle indiquée pour le sélecteur #zone est écrasée par la règle donnée pour le sélecteur #zone li
Un mélange de rouge et de jaune, c'est-à-dire orange

Quand tu as répondu à toutes les questions et bien compris les réponses, passe à la page suivante. Vers la page suivante Page suivante


Dernière modification 01/09/2016 Test dans /info ...