Gabarit 06

Menu vertical et pied de page à gauche, contenu à droite

À propos du gabarit 06

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 (commune à tous les gabarits)

  2. modele06.css, qui contient tous les styles propres à ce gabarit, et que je vous invite à consulter.

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. Le contenu principal a aussi une décoration à gauche ressemblant à une ombre portée ou un effet de relief, avec un coin en diagonale. Cet effet est réalisé avec un pseudo-élément ::before positionné en absolu, et le coin bisauté est réalisé avec la propriété CSS clip-path.