Style CSS et balises DIV


Ce tutoriel explique pas à pas comment structurer une page web avec des zones de menus, une en-tête et un pied de page, un bloc dans le corps de page, et tout ceci sans utiliser de tableau (balises <table> du HTML) mais les balises DIV issues de la feuille de style CSS.

L'utilisation d'un tableau pour structurer une page web atteint vite ses limites face à un contenu dense et aux interprétations diverses des navigateurs, sans parler de la lourdeur du code et de la difficulté à le maintenir, ni des problèmes d'impression. Pour ces différentes raisons il faut laisser les tableaux à leur fonction première qui est la présentation de données tabulaires, et confier la mise en page au CSS qui a été conçu pour ça !

Nous allons donc créer une feuille de style "div.css" spécifique aux balises DIV qui sera appelée depuis les pages HTML du site web par le code <link rel="stylesheet" type="text/css" href="div.css"> inséré entre les balises <head> et </head>.

Nous allons successivement définir dans le CSS les tailles, les fonds et l'emplacement des différentes zones nécessaires à la construction d'une page web de 600 pixels de haut sur 800 de large avec en-tête, menu vertical à gauche de la page, corps , pied de page, plus un bloc à droite de la page :

1. L'en-tête de page

div#entete {
width:800px;
height:100px;
background-color:#CCCCCC;
text-align:center;
}

2. Le menu vertical gauche

div#menu {
float:left;
width:150px;
height:450px;
background-color:#006600;
text-align:center;
}

Remarque : la propriété float évite que les blocs se positionnent les uns sous les autres, ce qui est le cas par défaut, et les obligent à se positionner côte à côte.

3. Le corps de page

div#corps {
float:left;
width:650px;
height:450px;
background-color:pink;
text-align:left;
}

4. Un bloc à droite du corps de page

div#blocdroit {
float:right;
width:250px;
height:250px;
background-color:#660000;
text-align:left;
color:white;
}

5. Le pied de page

div#pied {
clear:both;
width:800px;
height:50px;
background-color:yellow;
text-align:center;
}

Remarque : la propriété clear:both; oblige le pied de page à se positionner sous les blocs flottants qui le précédent.


6. L'utilisation de la structure dans la page HTML

Pour finir et utiliser la structure définie dans le CSS il suffit d'ajouter le contenu de chaque zone entre les balises DIV correspondantes dans la page HTML, soit par exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="div.css">
</head>
<body>
<div id="entete">Titre du site</div>
<div id="menu">Ici on ajoute le menu</div>
<div id="corps">
<div id="blocdroit">Le bloc droit</div>
Le contenu
</div>
<div id="pied">Le bas de page</div>
</body>
</html>

Ce qui donne :





Valid HTML 4.01 Transitional CSS Valide !




Ce tutoriel est copyright www.shopmarques.net. La consultation en ligne est libre pour usage personnel mais toute reproduction ou copie sans autorisation et sans citer la source à des fins de réutilisation comme cours de formation ou contenu de site web est illégale. Les liens hypertextes vers ce cours sont libres et autorisés, toutefois, pour la bonne forme, nous apprécierions d'en être informé par mail au préalable. Dernière mise à jour : mars 2010.