Un menu horizontal réactif

Transformer les liens du menu en "vrais" boutons

Vrai menuL'aspect actuel des "boutons" est encore vraiment trop loin de ce que l'on pourrait espérer.

Nous allons transformer ces rectangles en vrais boutons.

  •  Si nécessaire, ouvre le document menu.html

Nous allons établir un style pour les éléments de type "lien" (les balises <a>) qui figurent dans le menu.

  • #menu aOuvre l'éditeur de styles CasCadeS.
  • Établis une nouvelle règle de style pour le sélecteur #menu a 
  • Définis le style de la manière suivante:
    • couleur des caractères: blanc
    • caractères gras
    • pas de soulignement (décoration de texte: "Normal")
    • fond bleu

MenuBouuaaaahhh... Mais ce n'est pas du tout le bon résultat. Pourquoi tout le bouton n'est-il pas bleu?

Effectivement, ce n'est pas encore très au point. Et l'explication de la raison sera l'occasion d'un excellent petit rappel.

Élément "en-ligne" ou "bloc"

Paragraphes superposésIl existe deux grands types d'éléments dans un document HTML:

  • les éléments de type "en-ligne" et
  • les éléments de type "blocs".

Les éléments de type "blocs" occupent tout l'espace horizontal à leur disposition, comme les trois paragraphes de l'illustration ci-contre. Deux paragraphes successifs se superposent.

Les éléments de type "en-ligne" occupent seulement l'espace qui leur est nécessaire. Ce bloc <strong> (qui est un élément en-ligne) ne s'étendra pas plus loin que sa taille.

Les éléments de type <a> (les liens) sont des éléments "en-ligne".

Et si on insiste un peu, poliment, ils ne pourraient pas s'étendre dans l'espace disponible, ces liens?

Effectivement, si on insiste un peu, il y a moyen de s'arranger. Mais il va falloir les feinter.

  • display: blockOuvre l'éditeur de styles CasCadeS.
  • Sélectionne l'élément #menu a dans la liste.
  • Dans l'onglet Boîte, indique que tu souhaites que cet élément se dispose comme s'il était de type Bloc.
  • Admire le résultat.

Quand c'est nécessaire, un élément de type "bloc" peut être transformé en élément de type "en-ligne" et inversement.

Nous n'aurons toutefois plus beaucoup besoin d'approfondir cette possibilité.

Quand l'aspect des "boutons" est satisfaisant, passe à la page suivante. Page suivante


Dernière modification 04/11/2007
Ecrire