Design CSS liquide (ou fluide) encadré d'images répétées… sans table

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 liquide (ou fluide) encadré d'images répétées… sans table

Exemple de design css liquide sans tableauxIl y a deux choses que l’on passe généralement sous silence lorsqu’on fait la promotion des CSS pour la mise en page d’un site web : 1) la conception d’un design fluide contenant des visuels aux quatres angles et sur les 4 côtés, et 2) l’équilibrage des colonnes sur le pied de page quelque soit leurs contenus. Et oui, dès que l’on sort des designs avec une largeur fixe, c’est le « brodel » ! Alors que c’est si facile avec les tableaux… Alors, j’ai pensé au jeune Padawan qui désire échanger son design Old School contre une mise en page CSS plus sexy : je présenterais deux exemples de design liquide ou fluide tableless.

Design liquide full CSS

En juin 2006, j’avais présenté une solution pour réaliser une mise en page fluide sans utiliser de tableaux avec une structure HTML et CSS liquide permettant de mettre des images de fond à tous les étages tout en s’adaptant à la fenêtre des navigateurs.

Voici à quoi ressemble la structure du code HTML lorsqu’on affiche les éléments de niveaux block avec Web Developper

design css liquide ou fluide

Le marquage HTML :

<div id="wrap">
    <div id="sideTop">
        <div id="topRight"></div><div id="topLeft"></div>
    </div>
    <div id="sideRight">
        <div id="sideLeft" class="content">
            <p> Votre contenu ici </p>
        </div>
    </div>
    <div id="sideBottom">
        <div id="bottomRight"></div><div id="bottomLeft"></div>
    </div>
</div>

Comment ça marche ?

Les propriétés float: right et float: left calent les angles droit et gauche (en haut) à l’aide de deux div placées côte-à-côte dans le code HTML, elles-mêmes enveloppées d’une autre div qui accueille une image répétée horizontalement pour créer la bordure du haut :

<div id="sideTop">
    <div id="topRight"></div><div id="topLeft"></div>
</div>
Voilà pour le haut de la structure. Le bas est construit sur le même principe :
<div id="sideBottom">
    <div id="bottomRight"></div><div id="bottomLeft"></div>
</div>
Pour créer les côtés droit et gauche, il faut ruser un peu. Ces bordures doivent s’adapater en hauteur en fonction du contenu que je place dans la même div que le côté gauche, lui-même inclus dans la div qui accueille le côté droit. Toujours là ? ;)
<div id="sideRight">
    <div id="sideLeft" class="content">
        <p> Votre contenu ici </p>
    </div>
</div>
Voilà, il ne reste plus qu’à envelopper le tout dans une div container, et le tour est joué !

La feuille de style CSS

Voici la feuille de style associée dans laquelle j’ai supprimé les éléments de reset CSS présents dans l’exemple en ligne :

/* Layout global */
#wrap {
    position: relative;
    width: 60%;
    margin: 0 auto;
}
#topRight,
#bottomRight {
    float: right;
}
#topRight {
    background: transparent url(pix/top_right.gif) no-repeat;
}
#bottomRight {
    background: transparent url(pix/bottom_right.gif) no-repeat;
}
#topLeft,
#topRight,
#bottomLeft,
#bottomRight {
    width: 32px;
    height: 32px;
}
#topLeft {
    background: transparent url(pix/top_left.gif) no-repeat;
}
#bottomLeft {
    background: transparent url(pix/bottom_left.gif) no-repeat;
}
#sideLeft {
    background: transparent url(pix/side_left.gif) top left repeat-y;
}
#sideRight {
    background: transparent url(pix/side_right.gif) top right repeat-y;
}
.sideTop,
.sideBottom {
    width: auto;
    height: 32px;
}
#sideTop {
    background: transparent url(pix/side_top.gif) repeat-x;
}
#sideBottom {
    background: transparent url(pix/side_bottom.gif) repeat-x;
}

/* layout content */ .content { padding: 1em 3em; }

Cette structure offre une bonne résistance à l’agrandissement sur pratiquement tous les navigateurs : à l’époque, j’avais même poussé le soucis du détail à tester sous Safari, c’est dire ;).

Les plus perspicaces d’entre vous aurons sans doute remarqué qu’une structure réalisée en tableau n’aurait pas nécessitée beaucoup plus de balises pour parvenir au même résultat ;) L’avantage de le réaliser en div (faut les placer, les cinq légumes par jour…), c’est de garantir un affichage correcte sur tout les périphériques, quelque soit leur résolution d’écran. Sans même modifier la feuille de style CSS et y compris en l’absence de cette dernière !

Design liquide full CSS Reloaded ;)

Comme promis, voici une deuxième version de cette structure CSS pour obtenir une mise en page liquide :

J’ai mis du vrai faux contenu avec des éléments en float pour tester la résistance de la structure

design css liquide ou fluide Reloaded

Même chose en mettant les blocs en évidence via « Outline block Level Element » de l’incontournable Web Developper

design css liquide ou fluide Reloaded avec contours activés

Le marquage HTML Reloaded

Le balisage HTML est quasi-identique à l’exemple donné plus haut si ce n’est l’ajout d’un module pour donner un titre :


<div class="wrapModules">
    <div class="sideTop">
        <div class="topRight"></div><div class="topLeft"></div>
        <div class="moduleHeader">
            <h1>Titre du site</h1>
        </div>
    </div>
    <div class="sideRight">
            <div class="sideLeft">
                <div class="moduleContent">
                    <p> Votre contenu ici </p>
                </div>
        </div>
    </div>
    <div class="sideBottom">
        <div class="bottomRight"></div><div class="bottomLeft"></div>
    </div>
</div>
J’ai supprimé le superflu dans cet exemple. Voici l’exemple complet de cette mise en page liquide en CSS.

La feuille de style CSS Reloaded

Si le code HTML diffère peu, en revanche, la feuille de style est différente pour s’adapter à la nature des images :

/* Structure générale */
.wrapModules {
    position: relative;
    width: 80%;
    margin: 0 auto;
}
.moduleContent {
    padding: 0.5em;
    margin-top: -0.5em;
    overflow: hidden;
    zoom: 1;
}

/* angles */ .wrapModules .topRight { float: right; width: 10px; height: 32px; background: transparent url(img/module_top_right.gif) no-repeat; } .wrapModules .topLeft { float: left; width: 10px; height: 32px; background: transparent url(img/module_top_left.gif) no-repeat; } .wrapModules .bottomRight { float: right; width: 10px; height: 10px; background: transparent url(img/module_bottom_right.gif) no-repeat; } .wrapModules .bottomLeft { float: left; width: 10px; height: 10px; background: transparent url(img/module_bottom_left.gif) no-repeat; }

/* cotés */ .wrapModules .sideLeft { height: 100%; background: transparent url(img/module_side_left.gif) top left repeat-y; } .wrapModules .sideRight { height: 100%; background: transparent url(img/module_side_right.gif) top right repeat-y; } .wrapModules .sideTop { width: auto; height: 32px; background: transparent url(img/module_side_top.gif) repeat-x; } .wrapModules .sideBottom { width: auto; height: 10px; background: transparent url(img/module_side_bottom.gif) repeat-x; }

Voilà, c’est fini…

Plus d’excuse pour utiliser les tableaux pour autre chose que les données tabulaires ? Ca s’pourrrait ^_^.

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.



21 commentaires pour “Design CSS liquide (ou fluide) encadré d'images répétées… sans table”

  1. Guiral dit :

    bonjour! J’ai fait un billet la dessus il y a quelques jours. J’utilise une methode un peu differente. La seconde que tu presente à l’avantage de pouvoir caler un titre sur la bordure :p !

    A quand un groupe facebook « contre l’utilisation des tableaux autres que pour les données tabulaires » ! je milite avec toi lol

    A bientot

    le lien du tuto : http://guiralantoine.wordpress.com/2008/01/13/tuto-cadre-avec-bordures-extensibles-valide-xhtmlcss/

  2. Darklg dit :

    Pas fan des multiplication de div :) Mais tres bon tuto sinon ^^

  3. bruno bichet dit :

    Guiral {

    Bien vu le calage des coins arrondis avec le positionnment absolu ;)

    Si ça te dérange pas, je ferais bien un édit de mon billet en présentant ta solution (avec un lien vers ton billet of course). Allez, dis-moi oui ;)

    Pour le groupe facebook, lâche-toi je m’inscris de suite ;)

    }

    Darklg {

    Merci ! Au sujet des div, je te comprends, mais j’ai une philosophie personnelle qui élargit la notion de sémantique pour inclure des éléments visuels, notamment les coins arrondis qui ajoutent du sens tout à fait conforme à la notion de sémantique : les coins arrondis rendent le design plus proche des sentiments humains ; ils valent bien deux ou trois div rien que pour eux ;)

    Ceci dit, vivement CSS3 avec la possibilité de mettre plusieurs images par background :) }

    • Jacques Bodin-hullin dit :

      CSS3 devrait aussi permettre de donner un contour arrondi aux éléments. Parfois une simple bordure grisée arrondie donne un tout autre aspect au design. C’est d’ailleurs ce que je fais dans les backends que je développe, en conseillant au client d’utiliser un navigateur avec les moteurs de rendu Gecko ou Webkit.

      Cette pratique des divs imbriqués est très utilisée (par les intégrateurs, je ne parle pas des p’tits d’jeuns), parfois pas assez, mais parfois trop. Il faut trouver la juste limite :).

  4. Guiral dit :

    Je t’en pris edit donc ton billet! Pour ce qui est du groupe facebook je te tiens au courant ca me permettra de me familiariser avec facebook lol

    A bientôt!

  5. burningHat dit :

    Comme tu dis « vivement CSS3″ parce que ça devient vraiment lourd les manipulations de fou qu’il faut parfois faire pour disposer d’un effet « tout con ». À part ça, jolies solutions… parmi les plus élégantes que j’ai vu jusqu’ici pour ce type de mise en forme…

  6. Guiral dit :

    et juste pourr rebondir par rapport aux tableaux/div javais un billet a finir que je viens de publier. Si je peux avoir vos aavis ce sera avec plaisir ;)

    A bientôt!

  7. [...] Design CSS liquide (ou fluide) encadré d’images répétées… sans table [...]

  8. Florent V. dit :

    Hello,

    Pour ma part, je ne suis pas fan non plus de la multiplication des DIV. Mais il faut bien comprendre que tant que nous n’aurons pas la possibilité d’utiliser plusieurs images d’arrière-plan pour un bloc donné (prévu pour CSS3, donc peut-être utilisable en production dans 6-7 ans), il y aura forcément une surchage du balisage HTML.

    Maintenant, que cette surcharge se fasse avec des DIV ou des TABLE-TR-TD, ça n’a pas une grande importance, si? À complexité égale, j’utiliserai sans doute des DIV si la solution est robuste… mais si la structure en DIV devient plus complexe que le classique tableau à 9 cellules (ou le tableau simplifié à 4 cellules, d’ailleurs…), j’opterai sans hésiter pour un tableau de mise en forme.

    (Juste en passant: le premier qui dit «accessibilité» est invité à réviser ses classiques. ;))

    Bruno, j’avais tenté une solution «synthétique» sur ce sujet. Ça t’intéressera peut-être d’y jeter un oeil. http://web.covertprestige.info/test/35-boites-fluides-bords-coins-en-images.html

  9. Bruno Bichet dit :

    Florent V. {

    Effectivement ta solution et tous les exemples que tu donnent sont très intéressants. Ils me font penser qu’au début on galère pour trouver une solution qui fonctionne sans être difficile sur l’élégance, et puis on se rend compte qu’il existe une foultitude de solutions, assez fines pour parvenir à faire des structures fluides à coins arrondis ;)

    J’espère que HTML 5 ne va pas casser cette souplesse que nous procure ce bon vieil XHTML 1.0 ^_^v

    Tu disait : « que cette surcharge se fasse avec des DIV ou des TABLE-TR-TD, ça n’a pas une grande importance, si? »

    C’est vrai qu’on pourrait se dire que tant qu’à faire des surcharges autant boire le calice jusqu’à la lie et mettre des table tr td… Mais bon, je trouve qu’avec les solutions présentées ici et celles que tu donnes (et celle de Guiral également) il y a pas mal de matière pour s’affranchir des tableaux :)

  10. Michel dit :

    Bonjour

    La désactivation du javascript par les utilisateurs est de moins en moins courante, il y a a sur la toile pléthore de scripts pour faciliter la tâche. Un exemple parmis tant d’autres: http://www.smart-com.com.mx/Des-coins-arrondis-avec-les-css-et.html

    Et puis si le JS est désactivé, tant pis, il y a pleins d’alternatives pour afficher un rendu correct.

    On va pas se pendre si une minorité d’oficionados antijavascript n’a pas ses jolis coins arrondis.

    @+

  11. Bruno Bichet dit :

    Michel {

    Cette solution javascript est vraiment intéressante car elle permet d’évacuer du balisage html les balises superflues. Merci pour le lien :) }

  12. Florent V. dit :

    Michel, les solutions Javascript en question sont intéressantes, mais personnellement j’ai quelques réticences.

    Déjà, il faut bien comprendre que ces solutions consistent uniquement à générer du balisage HTML (ou plutôt créer des noeuds éléments dans l’arbre DOM du document). Ainsi, pour le deuxième exemple de la solution indiquée le code bla bla est transformé en bla bla. Ce n’est pas forcément problématique, mais il faut bien le garder à l’esprit car dans certains cas ça peut être problématique, surtout si on oublie cette information. Je pense par exemple à l’interaction avec d’autres scripts sur la même page qui seraient censés agir sur les mêmes éléments.

    Ensuite, comme on a pu le voir à travers les différentes solutions HTML/CSS évoquées (celle présentée par Bruno, celle indiquée par Guiral, celles que je présente dans mon article…), on est obligé de faire du très spécifique côté balisage HTML afin d’arriver à nos fins. Ce qui signifie que si le design change, il se peut qu’on doive changer le balisage HTML. C’est le même problème avec les scripts JS (qui, je le rappelle, créent ce balisage à la volée): si le design change, il se peut qu’on doive changer le script.

    Si on voulait une solution Javascript (ou pas Javascript, d’ailleurs) à l’épreuve des flammes, il faudrait un balisage de fou avec 9 ou 10 éléments (div) imbriqués.

    Bref, dans tous les cas c’est compliqué et il y a des limites. Si on part sur un tutoriel ou un script existant, il se peut qu’on se retrouve bloqué car le balisage proposé par le tutoriel ou généré par le script ne répond pas aux besoins du design. À vrai dire, du point de vue de la facilité d’adaptation je crois que c’est le tableau à neuf cellules qui remporte la palme (quoi qu’il ait lui aussi ses limites…).

  13. Florent V. dit :

    Je rajouterai que quitte à faire du balisage spécifique, on pourra coder son propre script JS qui génèrera le bon balisage. On conjugue alors le meilleur de deux mondes (maitrise du balisage final et simplification du code HTML des documents). Et comme on aura fait le script JS soi-même, on diminue le risque de problèmes liés aux modifications de l’arbre DOM.

    Mais bien sûr, ce degré de maitrise n’intéressera que les intégrateurs professionnels, et uniquement dans le cadre de projets qui le méritent. ;)

  14. Michel dit :

    Bonjour

    j’ai rencontré le pb que tu stipules sur le choc des JS, avec PhP nous pouvons solutionner pas mal de situations.

    Pour le moment je surveille ça avec impatience « Telamon is the only WYSIWYG » http://bdn.backbase.com/frank/preview-of-project-telamon-the-backbase-visual-ajax-builder

    Néanmoins, je suis convaincu que des exemples en ligne tout frais moulus avec plusieurs scenarios et téléchargement à la clef, reste la solution pour péréniser ta démarche, je construis quelque chose dans ce sens en ce moment.

    Parce-que du site qui explique tout ça manque pas, mais des sites qui fournissent tout, ben heu .., y sont pas légion.

    Ce n’est que mon avis d’intégrateurautididactchevroné, j’aime quand même beaucoup ta démarche Laurent.

    cordialement

    @+

  15. digiboy dit :

    Tres bon tuto en effet. Mais avec Css3, ce sera du passé.

  16. bruno bichet dit :

    digiboy { Oui, vivemenet css3… c’est pas pour tout de suite, malheureusement. Quoique si on veut préparer l’arrivée des css 3, la solution Javascript présentée par Michel est idéale, puisque c’est la seule qui n’oblige pas à mettre des balises (div, tr, td) superflues.

    Comme ça, il suffit d’ajouter les background multiples pour les navigateurs prenant en charge cette fonctionnalité et les autres feront chauffer le javascript ;) }

  17. Anonyme dit :

    Design CSS liquide (ou fluide) encadr dimages rptes sans table…

    Le design d’un site web full CSS commence entrer dans les moeurs, mais il reste toujours certaines choses qui semblent un peu plus simples grer avec des tableau. Cet article propose deux mthodes pour concevoir un design CSS fluide avec des bords arr…

  18. AkaiKen dit :

    Bonjour, des années après, je passe par là, et joie un code simple et élégant pour faire des coins arrondis ? Je saute dessus. Mais… Si j’ai bien compris, les images des coins sont sur fond blanc, et si l’on met un fond transparent, l’image du centre est visible et les coins arrondis perdus. N’y a-t-il pas un autre moyen ?

    (je pense à Florent V. qui parle des multiples backgrounds, désormais implémentés, mais pas dans IE, et j’en ai un peu besoin aussi)

  19. trucmuch dit :

    j’ai rien compris! adapte la syntaxe explicative en mode « non-codeur/novice-blaireau mais parlant français » aiderait peut être à clarifier…?!?

    • Bruno Bichet dit :

      Bonjour, tu peux préciser ce que tu n’as pas bien compris exactement ? Ca me permettra de m’améliorer et peut-être même d’ajouter une explication supplémentaire dans le billet ;)

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