Gabarit 11

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

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.

À propos du gabarit 11

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="centre-bis">
			<div id="navigation">...</div>
			<div id="secondaire">...</div>
			<div id="principal">...</div>
		</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. modele11.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 de 90%, et est centré horizontalement grâce aux marges automatiques. (Propriétés CSS appliquées à div#global.)

   En plus de cela, on a utilisé les propriétés min-width et max-width pour l'empêcher de prendre une largeur trop faible ou trop importante.

   C'est cette utilisation conjointe des différentes propriétés pour gérer la largeur de manière à la fois souple et précise que nous appelons une «largeur fluide intelligente».

   Si vous disposez d'un écran suffisamment grand, essayez de redimensionner la fenêtre de votre navigateur pour voir comment cette page s'adapte à ces changements.

2. Ce gabarit utilise la technique des colonnes factices pour afficher trois colonnes de même hauteur quelle que soit la hauteur des contenus. Mais comme la largeur du conteneur principal est variable, on ne peut pas utiliser une simple image de fond comme c'est le cas dans plusieurs autres gabarits.

   On utilise donc deux images de fond. La première, appliquée à div#centre, dessine la colonne de gauche et la colonne centrale (cf. 11-colgauche.png). La deuxième, appliquée à div#centre-bis, dessine la colonne de droite (cf. 11-coldroite.png).

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 pour le premier et à droite pour le second (il s'agit de div#navigation et de div#secondaire).

   Le troisième et dernier enfant (div#principal) n'est pas flottant, mais a des marges à gauche et à droite pour éviter d'être (en partie) recouvert par les flottants.

   Attention: pour réussir cette mise en page sans utiliser le positionnement absolu (qui peut être problématique, voir les commentaires du gabarit 09), on a dû placer les deux éléments flottants en premier dans le code. Par conséquent, le contenu secondaire (bloc de droite) se retrouve placé avant le contenu principal (bloc central) dans le code HTML.

   D'autres configurations sont envisageables, mais elles ne seront peut-être pas compatibles avec la largeur fluide et les colonnes factices.

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-bis pour cela — voir les styles du gabarit pour les détails).