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

retour

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

Article publié le mercredi 24 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 à trois 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 à 3 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,
une qui définit le corps de page

Dans cet exemple, nous intégrons, en plus, quatres paragraphes dont deux pour le corps du document.

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 à 3 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>

	<!--Corps de page-->
	<div id="corps">
		<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>

	<!--Colonne 2-->
	<div id="colonne2">
		<p>Aliquam erat volutpat. Aenean pulvinar. Aliquam at libero.</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 le conteneur 'document' avec 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 des conteneurs 'colonne1' et 'colonne2'°Oo.

Pour commencer, nous devons définir les deux conteneurs qui seront les plus courts. Considérons que ce sont nos deux colonnes. Le principe est de faire sortir ces conteneurs du flux en les positionnant en absolu par rapport au conteneur document.
On positionne le conteneur colonne1 à 0px du haut et 0px de la gauche.
Pour le conteneur colonne2, nous le plaçons à 0px du haut et 0px de la droite.
Ensuite, nous leur affectons une largeur puis on leur donne la même couleur de fond que le conteneur document.
Comme de nombreuses propriétés sont identiques, nous les regroupons en une seule déclaration puis nous déclarons séparemment ce qui diffère.
On obtient:


#colonne1,
#colonne2
{
	position: absolute;
	top: 0;
	width: 200px;
	background-color: #FC8;
}
#colonne1
{
	left: 0;
}
#colonne2
{
	right: 0;
}

Visualiser

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

Actuellement, les conteneurs colonne1 et colonne2 passent au dessus du conteneur corps puisqu'ils sont hors du flux.
Comme nous avons définis une largeur de 200px pour chaque colonne, nous affectons des marges gauche et droite égales à cette valeur.
On en profite pour affecter une couleur de fond au conteneur corps.
On écrit:


#corps
{
	margin: 0 200px;
	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 les deux colonnes extérieures de la hauteur de l'entête.

Pour le CSS, çà donne donc:


#entete
{
	height: 7em;
	line-height: 7em;
	background-color: #8FC;
}
#colonne1,
#colonne2
{
	position: absolute;
	top: 7em;
	width: 200px;
	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,
#colonne2
{
	position: absolute;
	top: 7em;
	width: 200px;
	background-color: #FC8;
}
#colonne1
{
	left: 0;
}
#colonne2
{
	right: 0;
}
#corps
{
	margin: 0 200px;
	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 :

VOS COMMENTAIRES ...

Commenter cette publication

Commentaire publié le jeudi 16 novembre 2006 à 11 h 08 par Ernstein: Bonjour,

le problème survient quand l'une de colonne présente un contenu plus long que la zone "corps" du document.

Comment faire alors pour le le pied de page vienne se positionner sous la colone la plus large ?
Commentaire publié le jeudi 16 novembre 2006 à 13 h 55 par koala64: Bonjour,

Oui, tout à fait et c'est pour ça que j'ai précisé dans ce document que les deux colonnes étaient plus courtes... ;)

Dans ton cas, tu peux reprendre la technique utilisée sur cette mise en page : http://css.alsacreations.com/modeles/modele16.htm

Le but du tuto est plus de montrer comment s'y prendre pour monter une mise en page plutôt que de répondre aux multiples besoins de chacun... :)

Commenter cette publication

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.

Forums de discussions associés

Discutez et échangez sur ce thème dans notre forum XHTML - HTML - CSS.

01/09/2010 à 17 h 49 ecoles en france qui font de la formation sur le web (0 réponse)
25/08/2010 à 11 h 36 Les bases du HTML (débutant) (1 réponse)
23/08/2010 à 18 h 48 balise de creation de menu (5 réponses)
20/08/2010 à 08 h 30 Aide Html (0 réponse)
15/08/2010 à 21 h 05 Problème d'affichage au bout de quelques secondes (1 réponse)

all html : Le portail des webmaster