Mise en page fluide à 4 colonnes de mêmes hauteurs
Cet article est actuellement publié sur le site.
Article publié le vendredi 26 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 à quatre colonnes de mêmes hauteurs en utilisant les langages XHTML et CSS. On combine ici les techniques du positionnement absolu et du positionnement flottant. Quelques rappels liés aux standards et à l'accessiblité y sont préconisés...
Mise en page fluide à 4 colonnes de mêmes hauteurs
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 7 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 au sein de laquelle nous insérons 3 zones représentant les colonnes 2 et 3 ainsi qu'un conteneur supplémentaire.
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 fluide à 4 colonnes de mêmes hauteurs</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">
<!--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>
</div>
<!--Colonne 3-->
<div id="colonne3">
<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>
<!--Colonne 4-->
<div id="colonne4">
<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. Ceci 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.
Nous commençons par définir un positionnement absolu ainsi qu'une largeur égale à 100% de la largeur de la fenêtre pour le conteneur
document:
#document
{
position: absolute;
width: 100%;
}
Visualiser
.oO° Contraintes °Oo.
Les positionnements absolu et flottant ne vont pas sans leurs lots de contraintes. En effet, ces deux types de positionnement font sortir les éléments auxquels ils s'appliquent du flux du document. La division qui les contient se rétracte alors puisqu'elle ne les voit plus. Vous devez donc faire attention quant au choix du type de positionnement que vous allez utiliser, à savoir entre un qui fait sortir l'élément du flux ou non.
.oO° Définition des conteneurs 'document', 'colonne1' et 'colonne4' °Oo.
Vous devez déterminer quelles seront les colonnes les plus courtes entre les colonnes externes et celles contenues dans le corps de page. Pour cet exemple, nous partirons du principe que le corps de page sera le plus long. Dès lors, nous choisissons de placer nos colonnes en absolu puis nous ajoutons la couleur de fond de nos colonnes externes
sur le conteneur
document.
#document
{
position: absolute;
width: 100%;
background-color: #CF8;
}
#colonne1
{
position: absolute;
top: 0;
left: 0;
width: 200px;
}
#colonne4
{
position: absolute;
top: 0;
right: 0;
width: 200px;
}
Visualiser
.oO° Définition des conteneurs 'corps', 'colonne2', 'colonne3' et 'astuce' °Oo.
Dans le même ordre d'idées, vous devez déterminer quelles sera la colonne la plus courte entre la colonne gauche du conteneur
corps et la colonne droite du même conteneur. Pour cet exemple, nous partirons du principe que la colonne gauche sera la plus longue. Nous affectons donc la couleur de fond de la colonne droite sur le conteneur
corps. Nous savons, au passage, que les colonnes externes font 200px de large; nous affectons donc des marges, gauche et droite, en conséquence au conteneur
corps afin d'éviter la superposition.
#corps
{
margin: 0 200px;
background-color: #8CF;
}
Visualiser
Histoire de varier les plaisirs, nous choisissons de placer nos deux colonnes à l'aide du positionnement flottant.
Afin d'équilibrer le rendu, nous définissons une largeur de 50% de la taille du conteneur
corps pour nos 2 colonnes. On en profite pour déterminer le couleur de fond du conteneur
colonne2.
#colonne2
{
float: left;
width: 50%;
background-color: #F8C;
}
#colonne3
{
float: left;
width: 50%;
}
Visualiser
Comme je vous l'ai précisé précedemment, un élément placé à l'aide du positionnement flottant sort du flux; C'est ce qui fait que le conteneur
corps se rétracte. C'est là qu'intervient le conteneur supplémentaire,
astuce en l'occurence, qu'on fait passer sous nos deux colonnes à l'aide d'un
clear: left;. Ainsi le conteneur
corps s'allonge jusqu'à la fin de la colonne la plus grande.
#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° Bonus °Oo.
4 colonnes de couleurs différentes? Soit.
Créez une image d'environ 2000px de large sur 10px de haut, histoire de prévoir les grandes résolutions, puis séparez-la en 2 avec une couleur à gauche et une autre à droite.
Ensuite réécrivez le conteneur
document comme suit:
#document
{
position: absolute;
width: 100%;
background: #CF8 url(background.png) center top repeat-y;
}
Visualiser
Concernant la propriété
background:
- Nous affectons une couleur de fond afin d'être sûr, même en cas de désactivation des images, que nous aurons bien une couleur de fond de notre choix et non du choix de l'utilisateur. Pour peu que ce dernier ait choisi un fond noir par défaut dans son navigateur, il ne voit plus les écritures,
- Nous ajoutons ensuite le chemin menant à notre image,
- Nous centrons l'image et nous la positionnons en haut du conteneur,
- Nous faisons répéter l'image suivant l'axe des ordonnées.
.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
colonne4.
<!--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: #FF7;
}
#colonne1
{
position: absolute;
top: 7em;
left: 0;
width: 200px;
}
#colonne4
{
position: absolute;
top: 7em;
right: 0;
width: 200px;
}
#pied
{
height: 3em;
line-height: 3em;
background-color: #FF7;
}
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: #CF8 url(background.png) center top repeat-y;
}
#entete
{
height: 7em;
line-height: 7em;
background-color: #FF7;
}
#colonne1
{
position: absolute;
top: 7em;
left: 0;
width: 200px;
}
#corps
{
margin: 0 200px;
background-color: #8CF;
}
#colonne2
{
float: left;
width: 50%;
background-color: #F8C;
}
#colonne3
{
float: left;
width: 50%;
}
#astuce
{
clear: left;
}
#colonne4
{
position: absolute;
top: 7em;
right: 0;
width: 200px;
}
#pied
{
height: 3em;
line-height: 3em;
background-color: #FF7;
}
p
{
padding: 20px;
}
Code final (zip)
Et voilà, le tour est joué. ;-)
Plus d'informations sur :
all html : Le portail des webmaster