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

retour

Mise en page fixe à 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 fixe à deux colonnes de mêmes hauteurs en utilisant les langages XHTML et CSS. On utilise ici la technique du positionnement flottant. Quelques rappels liés aux standards et à l'accessiblité y sont préconisés...

Mise en page fixe à 2 colonnes de mêmes hauteurs (positionnement flottant)

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 4 grandes zones:

une qui englobe le document,
une qui définit la première colonne,
une qui définit la seconde colonne,
une zone utile pour l'obtention de colonnes de mêmes hauteurs.

Dans cet exemple, nous intégrons, en plus, un paragraphe pour chaque 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 fixe à deux colonnes de mêmes hauteurs (positionnement flottant)</title>
	<link rel="stylesheet" type="text/css" media="screen" href="style.css" />

</head><body>

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

	<!--Colonne 1-->
	<div id="colonne1">
		<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>
	</div>

	<!--Colonne 2-->
	<div id="colonne2">
		<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>

	<!--Astuce-->
	<div id="astuce">
	</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° Définition des styles du conteneur du document °Oo.

Actuellement, il reste encore un grand nombre d'utilisateurs (environ 20%) disposant d'une résolution de 800x600 pixels. Vous devez donc considérer que c'est la résolution minimale sur laquelle votre mise en page doit passer. En enlevant la barre de défilement, vous obtenez alors une largeur maximale d'environ 770px.
De vos deux colonnes, le contenu de l'une d'entre elles sera certainement plus court que l'autre. L'astuce consiste alors à définir la couleur de fond de la colonne la plus courte sur le conteneur "document".
On écrit donc:


#document
{
	width: 770px;
	background-color: #FF8;
}

Visualiser

.oO° Définition des colonnes °Oo.

Pour cet exemple, nous souhaitons définir deux colonnes. Pour les placer côte à côte, nous allons utiliser la propriété "float" puis nous indiquons une largeur pour chacune. Pour différencier la colonne la plus longue (la 1ère zone du code xhtml), on lui affecte une couleur de fond différente. Celà donne:


#colonne1
{
	width: 185px;
	float: left;
	background-color: #FC8;
}
#colonne2
{
	width: 585px;
	float: left;
}

Visualiser

.oO° Astuce °Oo.

Mais où est-donc passée la couleur de fond du document ?
Comme nous nous servons du positionnement flottant pour le placement de nos colonnes, ceci a pour effet de faire sortir ces dernières du flux du document. Lorsque c'est le cas, la hauteur de la zone "document" se rétracte puisqu'elle considère que les deux colonnes ne s'y trouvent plus. C'est pourquoi nous avons ajouté le conteneur "astuce". En lui affectant la propriété CSS "clear", nous l'obligeons à venir se placer sous les éléments placés en "float". Comme celui-ci ne doit pas être visible, nous ne mettons rien à l'intérieur et aucun style n'est appliqué en dehors de cette propriété:


#astuce
{
	clear: left;
}

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° Centrer la mise en page °Oo.

Si vous souhaitez que le conteneur document soit toujours centré en milieu de fenêtre, vous devez ajouter des marges puis définir la propriété text-align: center; sur le conteneur afin que les anciens navigateurs agissent de concert. Dès lors, l'élément document est bien centré mais tout le texte qui s'y trouve aussi. Pour corriger ce problème, vous pouvez redéfinir la propriété text-align: left; sur tous les éléments qui s'y trouvent.

On écrit donc ceci:


#document
{
	width: 770px;
	background-color: #FF8;
	margin: 0 auto;
	text-align: center;
}
#document *
{
	text-align: left;
}

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 réutiliser le conteneur astuce en tant que pied de page.


			<!--Astuce-->
			<div id="astuce">
				<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.

Pour le CSS, çà donne donc:


#entete
{
	height: 7em;
	line-height: 7em;
	background-color: #8FC;
}
#astuce
{
	clear: left;
	height: 3em;
	line-height: 3em;
	background-color: #8FC;
}

Visualiser

.oO° Code CSS final °Oo.

Le code CSS final est donc:


*
{
	padding: 0;
	margin: 0;
	border: 0;
}
body
{
	background-color: #88F;
	color: #000;
	font: .8em/1.5em Verdana, Arial, sans-serif;
}
#document
{
	width: 770px;
	background-color: #FF8;
	margin: 0 auto;
	text-align: center;
}
#document *
{
	text-align: left;
}
#entete
{
	height: 7em;
	line-height: 7em;
	background-color: #8FC;
}
#colonne1
{
	width: 185px;
	float: left;
	background-color: #FC8;
}
#colonne2
{
	width: 585px;
	float: left;
}
#astuce
{
	clear: left;
	height: 3em;
	line-height: 3em;
	background-color: #8FC;
}
p
{
	padding: 20px;
}

Code final (zip)

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

Plus d'informations :

Initiation au positionnement flottant

VOS COMMENTAIRES ...

Commenter cette publication

Commentaire publié le vendredi 24 novembre 2006 à 09 h 19 par Mathyeux: Cool ce tutoriel ! Sauf que dès que je passe sous IE, tout est collé à gauche... pas de centrage sur la page... Sais-tu pourquoi ça me fait ça?
Merci
Commentaire publié le vendredi 24 novembre 2006 à 09 h 51 par koala64: Salut,

non je ne vois pas car cela fonctionne dans le tutoriel... Je pense que tu devrais vérifier que ta syntaxe est correcte et t'assurer que la méthode que tu emploies pour centrer ta page corresponde bien à celle décrite dans le tuto.

Si vraiment tu bloques, n'hésite pas poster ton code sur le forum xhtml-css, de préférence, plutôt qu'ici. ;-)