Gabarit 02

Caractéristiques: conteneur global aligné à gauche, largeur fixe 750px

À propos du gabarit 02

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. modele02.css, qui contient tous les styles propres à ce gabarit, et que nous vous invitons à 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. Le conteneur global (div#global) a une largeur fixe de 750px. Nous n'avons pas besoin de propriétés spécifiques pour le placer à gauche de la page: ce sera en effet son comportement par défaut.

  2. La largeur fixe résoud le problème du gabarit 01 avec les lignes de texte trop longues pour les grandes résolutions d'écran. Par contre, sur un très grand écran un site de 750px de large peut sembler étriqué. Le revers de la médaille, en quelques sortes.

  3. 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!