Gabarit 03

À propos du gabarit 03

Code HTML et CSS

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

<div id="global">
	<div id="entete">...</div>
	<div id="navigation">...</div>
	<div id="contenu">...</div>
	<div id="pied">...</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. modele03.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 (div#global) a une largeur fixe de 750px. Il est centré grâce aux marges automatiques (margin-left: auto et margin-right: auto).

2. Le conteneur global prend au minimum toute la hauteur de la fenêtre grâce à la propriété min-height, avec la valeur 100%.

   La petite subtilité ici est que pour que le min-height: 100% soit pris en compte, l'élément parent (body) doit lui-même avoir une hauteur déterminée. Et cela vaut également pour le parent de body, c'est à dire l'élément html (appelé aussi élément racine du document). On écrit donc:

   html, body {
   	height: 100%;
   }
   #global {
   	min-height: 100%;
   }

3. Attention: il ne faut pas donner de marge, padding ou bordure verticales aux éléments html, body et div#global. En effet, ils se rajouteraient à la hauteur de l'élément, or le moindre pixel en plus des 100% de hauteur provoquerait l'apparition d'une barre de défilement, même s'il n'y a aucun contenu à faire défiler.

   Pour la même raison, il faut éviter la fusion des marges entre div#global et ses éléments enfants. Dans ce gabarit, on utilise overflow: hidden sur div#global dans ce but.

On constate que même lorsque le contenu est court, le bloc div#global prend toute la hauteur de son parent, l'élément body.