Design CSS : fixe, élastique ou liquide ?

Difficile de choisir la bonne formule pour ses mises en pages CSS. Surtout si l’on se préoccupe des standards du W3C et des bonnes manières pour un web qui prenne du sens et perde du poids ! 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. Les dimensions ne changent pas quelle que soit la taille de la fenêtre du navigateur.
• Élastique — votre design semble fixe, mais peut supporter une augmentation plus ou moins importante de la taille du texte (ou du zoom) sans que le design global en pâtisse.
• 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 au site de s’adapter à l’internaute et non l’inverse ! J’en vois au fond qui soupirent, mais 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, ce n’est pas toujours le cas pour un design liquide. Surtout si l’on veut mettre des images partout et le designer finit pas jeter l’éponge pour se tourner vers le côté obscur : 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 HTML que nous allons le trouver. Pratique en apparence, les tableaux, et bien, c’est mal pour plein de raisons, que d’autres, ici en anglais ou encore là en français, vous expliquerons mieux que moi.

Il nous faut une structure souple pour 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 que la structure reste simple pour que les développeurs (vous savez les gars un peu bizarres) ne perdent pas leur précieux temps avec toutes ces satanées 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, Mac et les principaux navigateurs récents.

Et sans hack. Non pas que je n’en n’utilise pas parfois, mais c’est plus propre comme ainsi. Enjoy.

Télécharger le fichier .html ou .php et les images

MAJ— Lire ce billet complémentaire sur la mise en page liquide ou fluide full CSS : Design CSS liquide (ou fluide) encadré d’images répétées… sans table