Design CSS : fixe, élastique ou liquide ?

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

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

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



7 commentaires pour “Design CSS : fixe, élastique ou liquide ?”

  1. Dédé dit :

    Salut Je te remerci de m’avoir aidé pour faire la mise en page de mes div. (je suis passé par le Flo GamePlayer) Merci beaucoup :)

  2. br1o dit :

    Content d’avoir pu t’être utile. Si tu as un autre souci, n’hésite pas. Tu peux laisser un autre commentaire sur ce billet avec tes questions. A plus !

  3. xhtml dit :

    Pour ceux qui s’interessent a ce sujet voici un lien comprenant quelques sites fluide, liquide, elastique.

    http://www.1computer.info/1work_...

  4. xhtml dit :

    Changement adresse du site: http://www.1computer.info/1work et les exemples: http://www.1computer.info/1work/...

    Salutation de la Suisse :-)

  5. biker67 dit :

    bonjour

    mon site ne s’affiche pas dans firefox sans le plugins ie tab pouvez vous m aider

    merci biker67

  6. salut

    j’ai un probleme avec mon site web, mes pages web sont compatible sur Mozilla,safari, et quand j’execute ces même pages sur Opera ou IE c’est tout autres chose. on dirait même que ce n’est pas le même site web.

    SVP veuillez m’aider a trouver une solution !!!!!

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site