Votre mise en pages CSS : fixe, élastique ou liquide ?

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 😉

3 commentaires »

  1. indicadesbois nous dit :

    Le 11 juin 2006 @ 10:30

    Aprés ton speach Br1o.
    Je me sens obligé de passer le BlogDesBois en Fluide 😉
    Allez promis mais dabord je fini 2-3 sites persos, je m’oblige a skaté l’aprés midi le week-end et met un point d’honneur faire la fête le soir … 😮
    Bah il reste plus que la pause du midi au boulot pour la fluidité.

  2. Fy nous dit :

    Le 11 juin 2006 @ 20:29

    Du grand art ^^
    Je pense que ça dépend du but recherché par le site ainsi que de son contenu. Par exemple pour un site ayant peut de contenu textuel le type liquide est innutile, pour un forum l il l’est grandement.

  3. xhtml nous dit :

    Le 22 mai 2007 @ 16:06

    Vous avez dit page fluide…?

    Voici un page ou sont regroupé plusieurs exemples:

    http://www.1computer.info/1work/1work_internet.html

    Salutations :-)

Flux RSS des commentaires de ce billet · URI de TrackBack

Laisser un commentaire

Bad Behavior has blocked 0 access attempts in the last 7 days.