Gabarit 04

En-tête, corps et pied de page séparés, menu vertical à gauche, largeur fixe

À propos du gabarit 04

Code HTML et CSS

Ce gabarit est structuré de la manière suivante:

<body>
	<header id="entete">...</header>
	<nav id="navigation">...</nav>
	<main id="contenu">...</main>
	<footer id="pied">...</footer>
</body>

Il est mis en forme par deux feuilles de styles:

  1. base.css (mise en forme minimale du texte, commune à tous les gabarits);
  2. modele04.css, qui contient tous les styles propres à ce gabarit.

Pour voir le détail du code HTML de cette page, utilisez la fonction d'affichage de la source de votre navigateur web (ex: «Affichage > Code source de la page»).

À noter

  1. Le conteneur global est l'élément body. Sur un écran large, il est centré grâce à une largeur maximale et des marges automatiques.

  2. Les enfants de body sont disposés les uns sous les autres par défaut, puis sur un écran large ils sont disposés dans les zones nomées d'une grille CSS.

  3. Les écarts visibles entre les principaux blocs de contenu proviennent soit de la propriété CSS gap utilisée sur le conteneur principal, soit d'un margin-bottom (sur la navigation) et/ou du padding de certains blocs.