Gabarit 01

Largeur fluide, contenu centré. En-tête, menu, contenu principal et pied de page

À propos du gabarit 01

Code HTML et CSS

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

<body>
	<header id="entete">
		<div class="centre">...</div>
	</header>
	<nav id="navigation">
		<ul class="centre">...</ul>
	</nav>
	<main id="contenu">
		<div class="centre">...</div>
	</main>
	<footer id="pied">
		<div class="centre">...</div>
	</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. modele01.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 menu de navigation est horizontal, alors que nous avons utilisé une liste non ordonnée (élément HTML ul) pour le coder (voir le code HTML). Comment se fait-ce? On obtient cette disposition grâce à la déclaration CSS display: flex.

  2. Le design de ce gabarit utilise des blocs prenant toute la largeur de la page. Cependant, sur un écran un peu large, cela peut donner des lignes de texte extrêmement longues et difficiles à lire.

    Pour éviter ce problème, on limite la largeur du contenu dans chaque bloc à une valeur maximale (avec la propriété CSS max-width). À noter qu’afin d’avoir le rendu souhaité avec des blocs de couleur sur toute la largeur de la page, et un contenu centré dans chaque bloc, on a besoin de rajouter un élément dans chaque bloc juste pour gérer le centrage du contenu. On a donc ajouté un élément <div class="centre">…</div>, sauf dans le cas où on a pu réutiliser un élément déjà présent (<ul class="centre">…</ul>).