Gabarit 09

Largeur fixe 900px, colonnes factices, colonnes latérales positionnées en float

À propos du gabarit 09

Code HTML et CSS

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

<body>
	<header id="entete">...</header>
	<span id="fond-gauche"></span>
	<span id="fond-droite"></span>
	<nav id="navigation">...</nav>
	<div id="principal">...</div>
	<div id="secondaire">...</div>
	<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. modele09.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. Ce gabarit a une largeur fixe (900px) et est centré horizontalement grâce aux marges automatiques. (Propriétés CSS appliquées à div#global.)

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

  3. Nous utilisons la propriété CSS float pour placer nos trois blocs à la même hauteur plutôt que les uns en dessous des autres.

    Ici, les deux premières enfants de div#centre sont flottants à gauche (il s'agit de div#navigation et de div#principal). Le troisième et dernier enfant n'est pas flottant, mais a une marge à gauche de 700px, marge qui passe donc sous les deux flottants. Là encore, seuls les éléments flottants ont une largeur fixe.

    Notons tout de même que d'autres configurations sont possibles: faire flotter les trois éléments (le troisième pouvant être flottant à gauche ou à droite), faire flotter uniquement les deux colonnes latérales (l'élément central doit alors venir en troisème dans le code HTML), etc.

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