Dans cet exemple, j'ai volontairement utilisé des fonds différents et bordé l'ensemble afin de souligner les possibilités graphiques ... si l'on peut parler de graphisme ici. Il y a donc 2 éléments centrés et un 3ème (le blanc) s'inscrivant dans le flux du contenu ... donc excentré.

Voici la feuille de styles complète, telle qu'elle affiche la page que vous lisez en ce moment :

html {height:100%;}
body {height:100%;margin:auto;font-family:arial,verdana;}
p {text-indent:1em}
.table1 {background-color:#ccccff;height:100%;width:100%;text-align:center;margin:auto;border:13px solid yellow;}
.table2 {background-color:#ffffcc;width:91%;text-align:justify;font-size:14px;margin:auto;}
.table3 {background-color:#ffffff;width:91%;text-align:left;margin:auto;font-size:12px;}

Chacun de ces éléments est constitué d'une table car il s'agit de la seule balise utilisable pour créer cet alignement. En effet, chose surprenante, il est impossible d'obtenir ce résultat par des calques au moyen des navigateurs actuels (cet exposé date de décembre 2002), sauf à utiliser une méthode peu orthodoxe que vous pourrez trouver dans un autre exposé.

Ces tables, ici au nombre de 3, sont imbriquées et s'écriront dans le corps du document comme vous le verrez en passant à la page suivante.

suite