Gabarit 09

Caractéristiques: minimaliste, largeur fluide, colonnes latérales positionnées en absolu

À propos du gabarit 09

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>
		<div id="principal">...</div>
		<div id="secondaire">...</div>
	</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. 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 utilise le positionnement absolu pour les colonnes de gauche et de droite.

    Les blocs div#navigation et div#secondaire sont positionnés en absolu par rapport à leur conteneur, div#centre, positionné en relatif.

  2. Le conteneur global (div#global) a une largeur fluide. Mais on pourrait aussi bien lui donner une largeur fixe, ou jouer avec les propriétés max-width et min-width pour limiter sa largeur.

  3. Attention: si nous souhaitons placer un pied de page dans ce gabarit, il faudra nécessairement le placer (visuellement) sous le contenu central. En effet, si le pied de page s'étend sur toute la largeur de div#global il risque d'être survolé par les colonnes latérales positionnées en absolu.

    Pour rappel, un élément positionné en absolu est «ignoré» par les autres éléments de la page qui ne sont pas des descendants de l'élément positionné en absolu. (Voilà pourquoi on utilise souvent les flottants pour positionner les principaux blocs d'une page web.)

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.