Gabarit 10

• Accueil
• Tous les gabarits
• Utilisation
• Licence
• Crédits

À propos du gabarit 10

Code HTML et CSS

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

<div id="global">
	<div id="entete">...</div>
	<div id="centre">
		<div id="navigation">...</div>
		<div id="principal">...</div>
		<div id="secondaire">...</div>
	</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. modele10.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).

Contenu secondaire

Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat.

Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue.