ALL HTML - Mise en page fluide à 2 colonnes de mêmes hauteurs

retour

Mise en page fluide à 2 colonnes de mêmes hauteurs

Article publié le mardi 23 mai 2006 par koala64.
Cet article est classé dans les catégories « CSS »

Ce tutoriel a pour objectif de vous montrer comment faire une mise en page fluide à deux colonnes de mêmes hauteurs en utilisant les langages XHTML et CSS. On utilise ici la technique du positionnement absolu. Quelques rappels liés aux standards et à l'accessiblité y sont préconisés...

Mise en page fluide à 2 colonnes de mêmes hauteurs (positionnement absolu)

Prérequis

Une bonne mise en page repose sur un code html ou xhtml valide. Celà permet, entre autres, d'assurer un bon rendu quelquesoit le navigateur utilisé. En d'autres termes, toute page ne respectant pas ce critère s'expose à une source de problèmes lors de la mise en forme...

Structure XHTML de base

On crée un fichier base.html puis on commence par la structure du document avec le strict minimum.
Notre code comprend:

un doctype (déclaration de type de document),
l'élément racine "html",
une entête de document "head",
le contenu d'affichage "body".

L'entête comprend au minimum:

une balise meta indiquant le type MIME du document ainsi que le jeu de caractères utilisé,
un titre,
un lien vers une feuille de style externe.

Pour ce que nous souhaitons faire, le contenu du document contient 3 grandes zones:

une qui englobe le document,
une qui définit la première colonne,
une qui définit la seconde colonne

Dans cet exemple, nous intégrons, en plus, trois paragraphes dont deux dans la deuxième colonne.

Pour un code XHTML 1.0 Strict, on obtient donc:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>

	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Mise en page fluide à deux colonnes de mêmes hauteurs (positionnement absolu)</title>
	<link rel="stylesheet" type="text/css" media="screen" href="style.css" />

</head><body>

<!--Document-->
<div id="document">

	<!--Colonne 1-->
	<div id="colonne1">
		<p>Aliquam erat volutpat. Aenean pulvinar. Aliquam at libero.</p>
	</div>

	<!--Colonne 2-->
	<div id="colonne2">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sollicitudin. Vivamus ac est sit amet nulla gravida sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis ultricies, elit nec imperdiet ultricies, magna urna porta mi, et tempor mi tellus at pede. Praesent eros ipsum, venenatis at, ultrices sed, tincidunt sed, nisl. Aliquam erat volutpat. Aenean pulvinar. Aliquam at libero. Suspendisse tristique, justo sed malesuada sodales, eros lorem tempor nisl, vitae egestas lectus diam at lectus. Morbi purus felis, euismod eget, iaculis a, fermentum a, magna. Morbi lacus. Curabitur ligula. In lacinia. Sed massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc vitae ipsum in urna vestibulum placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus rutrum nisi vel nulla. Proin condimentum interdum elit.</p>
		<p>Nulla facilisi. Vestibulum odio velit, mollis eget, ornare ut, tincidunt et, lacus. Duis scelerisque, mauris nec laoreet commodo, neque ipsum convallis ligula, in vehicula ligula elit sit amet leo. Aliquam erat volutpat. Phasellus ac odio. Cras cursus consectetuer velit. Fusce cursus volutpat odio. Aliquam et pede sit amet quam aliquam blandit. Ut non magna. Mauris et risus nec mi congue elementum. Phasellus justo. Maecenas erat. In egestas, enim ac vehicula aliquet, dolor felis tempor lacus, at elementum leo sapien sed ipsum. In porttitor nulla vel mi.</p>
	</div>
	
</div>

</body></html>

Visualiser

Pour le lien vers la feuille de style, vous devez surtout faire attention à bien avoir défini le type de média pour lequel cette feuille est destinée. Celà a toute son importance afin de ne pas interférer avec les supports que vous ne contrôlez pas. Comme nous souhaitons modifier la mise en page uniquement pour les moniteurs couleurs, nous attribuons la propriété "screen".

Mise en page CSS

Tous les styles qui suivent sont, pour le cas présent, définis dans un fichier style.css, placé dans le même dossier que le fichier base.html. Le fait de les placer dans un fichier externe allège le document html et permet de s'en resservir lorsqu'on crée d'autres pages.

.oO° Définition des styles par défaut °Oo.

Par défaut, un navigateur définit ou non suivant l'élément:

une marge,
du remplissage,
une bordure

Celà assure un rendu lisible sans aucune mise en page associée et ce quelquesoit le support utilisé. Notre premier soucis est que chaque navigateur possède son propre modèle. Comme nous souhaitons contrôler ce rendu sans se soucier du navigateur graphique utilisé, nous commençons par supprimer ces propriétés. Il va sans dire que nous devrons bien penser à les redéfinir par la suite. Pour se faire, nous écrivons:


*
{
	padding: 0;
	margin: 0;
	border: 0;
}

Visualiser

Le sélecteur * affecte ici tous les éléments du document.

.oO° Définition des styles généraux °Oo.

Chaque utilisateur est susceptible de paramétrer son navigateur comme bon lui semble, à savoir qu'il peut, par exemple, changer le paramétrage par défaut en modifiant les couleurs de fond et de police ainsi que la taille et le type de police. On commence donc par les redéfinir.


body
{
	background-color: #88F;
	color: #000;
	font: .8em/1.5em Verdana, Arial, sans-serif;
}

Visualiser

Ici, nous avons affecté du bleu pour le fond, du noir pour la couleur de police, une taille .8em pour la police, une hauteur de ligne de 1.5em, puis une police de base (Verdana), une de remplacement (Arial) en cas d'indisponibilité et enfin une famille de police (sans-serif) au cas où celles citées précédemment n'existent pas sur le poste récepteur.

A noter que l'unité em n'est pas obligatoire mais qu'il faut, dans tous les cas, laisser une unité relative afin de laisser la possibilité à l'utilisateur de pouvoir redimensionner le texte. Tout le monde ne voit pas aussi bien que vous... ;-)
L'unité px est à éviter car IE ne permet pas son redimensionnement.

.oO° Principe du positionnement absolu °Oo.

Lorsqu'un élément est positionné en absolu, celui-ci sort du flux.

Si cet élément est placé directement dans <body></body> ou dans un conteneur non positionné, l'élément se positionne par rapport au body.
Si cet élément est placé dans un conteneur déjà positionné, l'élément se positionne par rapport à celui-ci.

.oO° Définition des styles du conteneur du document °Oo.

Pour cet exemple, on définit un positionnement absolu, une largeur égale à 100% de la largeur de la fenêtre ainsi qu'une couleur de fond:


#document
{
	position: absolute;
	width: 100%;
	background-color: #FC8;
}

Visualiser

.oO° Définition du conteneur 'colonne1' °Oo.

Nous souhaitons ici définir deux colonnes. Le principe est de faire sortir le conteneur qui sera le plus court du flux en le positionnant en absolu ( ici le conteneur colonne1 ). On le positionne par rapport au conteneur document à 0px du haut et 0px de la gauche. Ensuite, nous affectons une largeur puis on lui donne la même couleur de fond que le conteneur document. On obtient:


#colonne1
{
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	background-color: #FC8;
}

Visualiser

.oO° Définition du conteneur 'colonne2' °Oo.

Actuellement, le conteneur colonne1 passe au dessus du conteneur colonne2 puisqu'il est hors du flux.
Comme nous avons définis une largeur de 300px, nous affectons une marge à gauche égale à cette valeur.
On en profite pour affecter une couleur de fond au conteneur colonne2.
On écrit:


#colonne2
{
	margin-left: 300px;
	background-color: #FF8;
}

Visualiser

.oO° Esthétique °Oo.

Les paragraphes sont actuellement accolés aux bordures. Afin d'avoir un rendu plus agréable, on ajoute un remplissage sur chacun d'eux:


p
{
	padding: 20px;
}

Visualiser

.oO° Définir une entête et un pied de page °Oo.

Bien souvent, vous ne souhaiterez pas vous contenter de ces simples colonnes. Une entête et un pied de page viendront compléter cette mise en page. Pour les ajouter, vous devez tout d'abord mettre dans votre code XHTML:


			<!--Entete-->
			<div id="entete">
				<h1>Lorem ipsum</h1>
			</div>

... avant le conteneur colonne1 puis un conteneur pied à la suite du conteneur colonne2.


			<!--Pied de page-->
			<div id="pied">
				<address><a href="http://www.allhtml.com">ALL HTML</a></address>
			</div>

Il ne vous reste qu'à définir les propriétés CSS correspondantes en ajoutant par exemple une hauteur pour chaque conteneur, une hauteur de ligne de même dimension ( ainsi, le texte est centré ) ainsi qu'une couleur de fond.
A noter que vous ne devez pas oublier de déplacer la colonne de gauche de la hauteur de l'entête.

Pour le CSS, çà donne donc:


#entete
{
	height: 7em;
	line-height: 7em;
	background-color: #8FC;
}
#colonne1
{
	position: absolute;
	top: 7em;
	left: 0;
	width: 300px;
	background-color: #FC8;
}
#pied
{
	height: 3em;
	line-height: 3em;
	background-color: #8FC;
}

Visualiser

.oO° Code CSS final °Oo.

Le code CSS final est alors:


*
{
	padding: 0;
	margin: 0;
	border: 0;
}
body
{
	background-color: #88F;
	color: #000;
	font: .8em/1.5em Verdana, Arial, sans-serif;
}
#document
{
	position: absolute;
	width: 100%;
	background-color: #FC8;
}
#entete
{
	height: 7em;
	line-height: 7em;
	background-color: #8FC;
}
#colonne1
{
	position: absolute;
	top: 7em;
	left: 0;
	width: 300px;
	background-color: #FC8;
}
#colonne2
{
	margin-left: 300px;
	background-color: #FF8;
}
#pied
{
	height: 3em;
	line-height: 3em;
	background-color: #8FC;
}
p
{
	padding: 20px;
}

Code final (zip)

Et voilà, le tour est joué. ;-)

Plus d'informations :