En marges de la mise en boîte

Tous les éléments nécessaires à la mise en page globale de la page sont maintenant en place. L'architecture est terminée : nous pouvons passer à la décoration d'intérieur.

En-tête de la page

L'en-tête est un élément important de la page. Elle indique immédiatement de quoi il sera question. Il s'agira donc d'un titre de première importance. Le niveau de titre 1 conviendrait parfaitement.

  • Place le curseur de texte dans la zone d'en-tête.
  • Dans la liste déroulante, sélectionne le niveau de Titre 1.
En-tête

Hé, Mais c'est horrible ! Tout le bloc d'en-tête devient énorme pour le coup. C'est beaucoup trop grand.

Et bien oui, mais c'était prévisible. N'oublions pas que la boîte du style H1 est entourée par cette fameuse bande de cellophane.

Quelle partie de la boîte de style H1 devrait être réduite pour que l'en-tête soit moins envahissante?
Le contenu
L'espacement
La bordure
La marge

Nous allons devoir modifier le style " natif " de h1 afin de diminuer la marge existante.

  • Marges à 0 pt Dans l'éditeur de style, définis une nouvelle règle de style pour " tous les éléments correspondant au sélecteur " h1.
  • Dans l'onglet Boîte, définis les marges haute et basse à une valeur de 0.
  • Vérifie l'effet obtenu dans la page.

Plus de marges

Le titre du texte

Chaque page de texte aura sans doute son propre titre. Afin de bien le distinguer du titre principal de la page, nous allons lui conférer le niveau Titre 2.

  • Indique un titre quelconque en haut de la zone de texte, comme sur l'illustration précédente.
  • Confère-lui le niveau de Titre 2.

Marge et décalage Ca y est,  c'est reparti pour un tour. Voilà le bloc qui se décale vers le bas. Je crois qu'il y a comme un défaut.

Et si c'était exactement le même problème qui se posait ici ? La marge...

  • Dans l'éditeur de style, définis une nouvelle règle de style pour " tous les éléments correspondant au sélecteur " h2.
  • Plus de margeDans l'onglet Boîte, définis les marges haute à une valeur de 0. Laisse la marge basse non définie (c'est-à-dire avec sa valeur par défaut).
  • Vérifie l'effet obtenu dans la page : la marge supérieure a disparu.

Dans l'illustration ci-contre, on voit que l'on a profité de l'occasion pour définir une bordure basse pointillée d'une épaisseur de 2 px qui fera un soulignement pour le titre.

  • Ajoute l'effet de soulignement de l'élément h2, comme indiqué ci-dessus.

Le titre du menu

Le menu peut également recevoir son titre.

  • Confère le niveau de Titre 2 à la première ligne de la zone de Menu.

Il n'y a plus rien à préciser pour le style de ce titre : tout a déjà été fait plus haut.

C'est géant ! J'aime quand il n'y a rien à faire.

Quand tu as obtenu la mise en forme correcte pour les titres de niveau 1 et 2, passe à la page suivante. Vers la page suivante Page suivante


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