3 COLONNES DE LONGUEURS VARIABLES,
AVEC EN-TETE ET EN-PIED

Menu "Trois colonnes"

Commentaires

Les mises en pages CSS peuvent remplacer les mises en page par tableau. Elles ont pour avantage de permettre des choses difficiles ou impossibles avec les tableaux, tout en étant souvent beaucoup plus légères en code. Elles passent cependant mal ou pas du tout dans NS4 voir IE 5.0. Elles nécessitent également un apprentissage plus long. Voici un 1er exemple.

Dans un système allant au plus simple, on peut créer un tableau avec N colonnes en utilisant des boites en float:left. Ces boites n'auront cependant pas la même taille en hauteur. Dès lors, si on veut leur donner à chacune un encadrement ou une couleur spécifique, l'affichage sera laid. Ce 1er exemple montre une solution pour afficher quelque chose qui ressemble à un tableau, avec des colonnes de hauteurs égales.

Dans cette mise en page, les colonnes s'allongent automatiquement. On peut donc utiliser ce script dans de nombreuses pages, sans connaître la taille du contenu. Seule contrainte, la colonne qui n'est pas en position:absolute (ici la colonne centrale) doit être impérativement la plus longue. C'est elle qui "pousse" l'en-pied vers le bas.

L'encadré discret des colonnes gauche et droite doit être enlevé. Dans l'exemple, il ne sert qu'à voir la taille réelle de ces 2 colonnes. On voit bien que les 3 colonnes n'ont pas la même hauteur. On obtient l'impression inverse grace à .container.

Cet exemple est dérivé de scripts trouvés sur discuss.incutio.com

Ne marche pas dans NS4, et est passable dans IE5.0.

CODE SOURCE CSS ET HTML

<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {margin: 0; padding: 0 } /* marges intérieures et extérieures */

h4 { /* style des en-tête et en-pied */
  font-size: 30px; /* taille de la police */
  margin: 0; /* pas de marge : colle aux bords de l'écran */
  background-color: #dda; /* couleur de fonds */
  text-align:center ; /* le texte est centré */
  border-top: 3px solid black; /* style de l'encadrement haut */
  border-bottom: 3px solid black} /* style de l'encadrement bas */

.container { /* boite qui entoure les 3 colonnes */
  background-color: #E7E4E4 ; /* couleur de fond */
  margin:0 ; padding:0} /* marges intérieures et extérieures à 0 */

.gauche { /* boite gauche (avec le menu) */
   position: absolute; /* positionné par rapport à la boite parent (ici .container) */
   left: 10px; /* démarre à 10 pixels de la gauche de la boite parent */
   width: 23%; /* largeur de la boite */
   border:dashed 1px orange} /* encadrement discret de la boite */

.centre { /* boite qui "pousse" vers le bas le reste de la page */
   margin: 0 25% 0 25%; /* marges gauche et droite, pour la place des 2 autres colonnes */
   border-left: 3px solid black; /* bordure gauche */
   border-right: 3px solid black; /* bordure droite */
  padding: 10px; /* marge intérieure - indispensable */
  background-color: #CCCCCC} /* couleur du fond */

.droite { /* boite droite (avec le commentaire) */
  position: absolute; /* positionné par rapport à la boite parent (ici .container) */
  right: 10px; /* démarre à 10 pixels de la droite de la boite parent */
  width: 23%; ; /* largeur de la boite */
  border:dashed 1px orange} /* encadrement discret de la boite */
</style>
</head>

<body>
<div class="container">

<h4>EN-TETE</h4>

<div class="gauche">
  <p>Colonne gauche</p>
</div>

<div class="droite"> <!-- Dans certains cas, mettre la colonne droite avant la centre passe mieux -->
  <p>Colonne droite</p>
</div>

<div class="centre">
  <p>Colonne centre</p>
  <p>Colonne centre</p>
  <p>Colonne centre</p>
  <p>Colonne centre</p>
</div>

<h4>EN-PIED</h4>

</div> <!-- fin du container -->

</body>
</html>

Pour tester ce script

en-pied