Gabarit 07

À propos du gabarit 07

Code HTML et CSS

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

<div id="global">
<header id="entete">...</header>
<div id="centre">
	<nav id="navigation">...</nav>
	<main id="contenu">...</main>
</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. 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.

   Le bloc de droite n'utilise pas la propriété float, mais une simple marge à gauche (margin-left).

2. Ce gabarit utilise la technique des colonnes factices pour afficher deux colonnes de même hauteur quelle que soit la hauteur des contenus. On utilise donc une image de fond (07-colonnes.png), répétée en hauteur et appliquée au conteneur div#centre.

3. 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#centre pour cela — voir les styles du gabarit pour les détails).