Gabarit 06

Caractéristiques: menu vertical à gauche, largeur fluide «intelligente», colonnes factices

À propos du gabarit 06

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="contenu">...</main>
	<footer id="pied">...</footer>
</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. modele06.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. div#global a ici une largeur de 90% de la fenêtre du navigateur, et est centré horizontalement grâce à la technique des marges automatiques:
    #global {margin: 0 auto;}.

    Cette largeur fluide est bridée pour les grandes et très grandes résolutions par un max-width: 1000px. On évite également un rendu très dégradé pour une très faible résolution avec un min-width: 700px.
    Concrètement, cela signifie que suivant la largeur de la fenêtre du navigateur, la largeur de div#global va osciller entre 700 et 1000px.

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

  3. Le bloc de contenu n'a pas de couleur de fond: il laisse apparaitre la couleur de fond de div#global.

  4. Malgré ce que vous voyez à l'écran, il n'y a pas deux colonnes de même hauteur dans cette page. La colonne de droite est en effet bien plus longue que le menu de gauche.
    L'impression de voir deux colonnes égales est crée grâce à une image de fond, répétée en hauteur, sur div#global (lien direct vers l'image), et par la couleur de fond de div#global.

    Cette astuce est notamment connue sous le nom de technique des colonnes factices.

  5. Dernière petite subtilité: l'effet de volume en fausse 3D est complété par une deuxième image de fond, placée en haut à gauche de div#contenu (voir cette image).

Comme vous pouvez le constater, ce gabarit a une construction assez subtile, qui exploite les couleurs de fond, des images de fond, des imbrications de blocs, et même une bordure de 20px de large. Toutes ces astuces combinées forment un effet de trompe-l'oeil.

On peut dire deux choses à propos de ces effets de trompe l'oeil:

  1. Avantage: ils sont souvent très puissants et permettent — pour peu que l'on ait un peu d'expérience — la réalisation de choses que l'on pensait trop difficiles.
  2. Inconvénient: les solutions techniques trouvées seront efficaces, mais peu souples. Si les conditions changent (modification même modérée du design, par exemple), il faudra parfois trouver une solution nouvelle.