Gabarit 08

Caractéristiques: menu de navigation horizontal, colonnes factices, largeur fixe 900px

À propos du gabarit 08

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="centre">
		<div id="principal">...</div>
		<div id="secondaire">...</div>
	</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. modele08.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. Nous avons à nouveau un menu de navigation horizontal, mais cette fois il est réalisé grâce à la propriété CSS float. Nous nous sommes permis quelques subtilités pour ce menu, alors n'oubliez pas d'observer le code HTML et le code CSS correspondant!

  3. 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 (08-colonnes.png), répétée en hauteur et appliquée au conteneur div#centre.

  4. 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.

    Ici, div#principal est flottant à gauche, tandis que div#secondaire n'est pas flottant mais a une marge à gauche de 620px. On remarquera que seul l'élément flottant a une largeur fixe (propriété width).

  5. 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.