Difficile, en effet, de choisir la bonne formule pour ses mises en pages CSS. Surtout si l’on se préocuppe des standards web et des bonnes manières pour un web qui prenne du sens et perde du poids ! bon, ne nous emballons pas et entrons dans le vif du sujet en précisant rapidement de quoi il s’agit :
- Fixe, votre design possède une largeur fixe exprimée le plus souvent en pixels. Elle ne change pas, et ce, quel que soit la taille/résolution de l’écran du visiteur.
- Elastique, votre design semble fixe, mais peut supporter une augmentation plus ou moins importante de la taille du texte sans que votre design en souffre trop.
- Liquide, la largeur de votre design est exprimée plutôt en pourcentage et s’adapte à la taille de la fenêtre du navigateur. Cette dernière solution va retenir notre attention, car c’est ça le web : on s’adapte à l’internaute et pas l’inverse… J’en vois au fond qui soupirent, mais bon, un peu de bon sens n’a jamais fait de mal à personne.
Si la conception d’un design fixe avec en-tête, pied de page et bordures de chaque côté est simple à réaliser en CSS, il n’en va pas toujours de même pour un design liquide. Notamment lorsqu’on veut mettre des images partout. Souvent, le designer finit pas jeter l’éponge et retourne vers le côté obscur. Et voila que les balises TR et TD poussent comme des champignons après la pluie.
Le beau temps, c’est vers les CSS et une organisation judicieuse de notre code (x)html que nous allons le trouver. Car, pratique en apparence, les tableaux, et bien, c’est pas bien, et cela pour plein de raisons, que d’autres, ici en anglais ou encore là en français, vous expliquerons mieux que moi.
L’objectif est d’obtenir une structure souple qui permette d’accueillir tous les délires de votre graphiste. Vous savez, le gars un peu sauvage (mais sympa) qui vous dit souvent qu’avec les tableaux, c’était mieux avant ! J’ai voulu aussi une structure simple pour que les développeurs (vous savez les gars un peu… bizarre, quoi…) ne perdent pas leur précieux temps avec toutes ces satanés balises TABLE TR TD.
Voici donc le design composé de quatre coins, de deux bordures verticales, et pourquoi pas, soyons fous, de deux bordure horizontales. Testé sur Windows, sur Mac et sur les principaux navigateurs récents. Et sans hack. Non pas que je n’en utilise pas parfois, mais bon, pour une structure réutilisable c’eût été une faute de goût. Enjoy 
