Gabarit 02

Conteneur global aligné à gauche, largeur fixe

À propos du gabarit 02

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. modele02.css, qui contient tous les styles propres à ce gabarit, et que nous vous invitons à 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 (body) a une largeur maximale de 760px (840px en comptant le padding). Nous n'avons pas besoin de propriétés spécifiques pour le placer à gauche de la page: ce sera en effet son comportement par défaut.

  2. La largeur maximale résoud le problème mentionné dans le gabarit 01 avec les lignes de texte trop longues pour les grandes résolutions d'écran. Par contre, sur un très grand écran, un site de 760px de large peut sembler étriqué.

  3. Nous utilisons Flexbox pour la mise en page de l'en-tête et du menu.