all html : Le portail des webmaster
La communauté ALL HTML c'est 58027 membres à ce jour dont 3 inscrits aujourd'hui et 32 depuis une semaine.
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...
<!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>
*
{
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%;
}
#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;
}
#corps
{
margin: 0 200px;
background-color: #8CF;
}
#colonne2
{
float: left;
width: 50%;
background-color: #F8C;
}
#colonne3
{
float: left;
width: 50%;
}
#astuce
{
clear: left;
}
p
{
padding: 20px;
}
#document
{
position: absolute;
width: 100%;
background: #CF8 url(background.png) center top repeat-y;
}
<!--Entete-->
<div id="entete">
<h1>Lorem ipsum</h1>
</div>
<!--Pied de page-->
<div id="pied">
<address><a href="http://www.allhtml.com">ALL HTML</a></address>
</div>
#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;
}
*
{
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;
}
Plus d'informations :
Commentaire publié le vendredi 23 juin 2006 à 05 h 54 par angecolonna Commentaire publié le vendredi 23 juin 2006 à 07 h 25 par koala64 
Commentaire publié le lundi 26 juin 2006 à 01 h 38 par angecolonna Commentaire publié le lundi 26 juin 2006 à 20 h 28 par koala64 Commentaire publié le dimanche 07 janvier 2007 à 02 h 04 par koala64
#colonne2
{
float: left;
width: 49.9%;
background-color: #F8C;
}
#colonne3
{
float: left;
width: 49.9%;
}... et ça fonctionne. ;-)Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.
Discutez et échangez sur ce thème dans notre forum XHTML - HTML - CSS.
16/05/2008 à 22 h 01
Propriétés opacités et héritage (0 réponse)
15/05/2008 à 12 h 07
Problème de résolution de Background (1 réponse)
15/05/2008 à 06 h 18
Méthode Facebook et autres ! (2 réponses)
14/05/2008 à 22 h 36
navigation (5 réponses)
14/05/2008 à 12 h 17
Lien Hypertexte vers un dossier exterieur (2 réponses)