Gabarit 07

Menu horizontal, deux colonnes de contenu avec Flexbox

À propos du gabarit 07

Code HTML et CSS

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

<body>
	<header id="entete">...</header>
	<nav id="navigation">...</nav>
	<div id="centre">
		<main id="principal">...</main>
		<aside id="secondaire">...</aside>
	</div>
</div>

Il est mis en forme par deux feuilles de styles:

  1. base.css (mise en forme minimale du texte, commune à tous les gabarits)
  2. modele07.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. Ce gabarit utilise une largeur maximale (max-width) avec deux valeurs différentes en fonction de la largeur de la page.

  2. On utilise le conteneur <div id="centre">…</div> pour créer un affichage du contenu en deux colonnes sur les écrans larges.

  3. Dans cet exemple, on a utilisé Flexbox (display: flex) plutôt que les grilles CSS (display: grid) pour créer cet affichage en colonnes. Les deux modes de mise en page peuvent être utilisés. Pour voir des exemples utilisant les grilles CSS, inspectez les gabarits 04 et 05.