HTML & CSS

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

Exemple de design css liquide sans tableaux Il 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 ^_^.

Publié le 31 janvier 2008 par Bruno Bichet