Gabarit 05

À propos du gabarit 05

Code HTML et CSS

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

<div id="global">
		<header id="entete">...</header>
		<nav id="navigation">...</nav>
		<main id="contenu">...</main>
</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. modele05.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. L'aplat de couleur qui remplit à la fois l'en-tête et la colonne de gauche est en réalité une couleur de fond appliquée au conteneur global (div#global).

2. Dans ce gabarit, nous utilisons la propriété CSS float pour placer deux blocs à la même hauteur plutôt que l'un en dessous de l'autre. Voir les notes de la feuille de style du gabarit pour en savoir plus.

3. Grâce à la couleur de fond de div#global, ce gabarit simule deux colonnes de même hauteur. En réalité, les blocs placés à gauche (menu) et à droite (contenu) n'ont pas la même hauteur, contrairement à ce que l'on obtiendrait avec les cellules d'un tableau. La supercherie sera d'ailleurs révélée si le contenu de droite est plus court que celui de gauche.

   Il existe une version plus évoluée de cette astuce, qui utilise une image de fond. Il s'agit de la technique dite des colonnes factices, qui permet de simuler des colonnes de même hauteur quelle que soit la hauteur réelle des contenus. Tous les gabarits ayant «colonnes factices» dans leur descriptif utilisent cette technique.

4. Pour éviter que les colonnes ne «débordent» de leur conteneur, il est nécessaire de gérer le dépassement des flottants (dans ce gabarit, on utilise div#global pour cela — voir les styles du gabarit pour les détails).