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

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>

<div id="sideBottom">
    <div id="bottomRight"></div><div id="bottomLeft"></div>
</div>

<div id="sideRight">
    <div id="sideLeft" class="content">
        <p> Votre contenu ici </p>
    </div>
</div>

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;
}

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

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

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>

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

• Quelques notes autour du design fluide avec 3 colonnes du collectif Alsacréations
• Quelques notes — Programme de formation HTML & CSS
• Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Frameworks CSS + Reset CSS : design from scratch

Pour avoir un design fluide (ou liquide), Florent dote les deux colonnes latérales d’une largeur, et donne à la zone centrale des marges droites et gauches au moins égales à la valeur des colonnes. Reste à spécifier float: left et float: right pour que ces colonnes flottent de part et d’autre du contenu. On obtient ainsi une mise en pages en 3 colonnes qui prend toute la largeur de l’écran.

Soit la structure HTML :

<div id="sideleft"></div>
<div id="sideright"></div>
<div id="content"></div>

… associée aux règles CSS :

#sideleft {
     width: 280px;
     float: left;
}
#sideright {
     width: 180px;
     float: right;
}
#content {
     margin-left: 280px;
     margin-right: 180px;
}

Pour obtenir un espacement entre les colonnes et le contenu, on peut ajouter quelques pixels à margin-left et margin-right de div#content.

Remarquez que l’auteur du tutoriel a très justement nommé ces colonnes colonne 1 et colonne 2 au lieu de sideleft et sideright, puisqu’en permutant les propriétés float des colonnes latérales il est possible de mettre la colonne gauche à droite et vice-versa. Prenez le temps quand même de modifier également les marges droites et gauches de content si les width des colonnes sont différentes.

Dans ce billet je considère que chaque colonne reste à sa place. (N’y voyez aucune allusion au positionnement flottant de certaines personnalités politiques qui passent tantôt à droite du contenu, tantôt à gauche…). On obtient donc une structure solide pour gérer une maquette en 3 colonnes avec une zone centrale dont la largeur s’adapte à la taille de l’écran. Ce qui est un pas supplémentaire en direction de l’utilisateur en lui permettant de lire selon ses préférences et non les vôtres.

It’s a bug?..

L’article de Florent a provoqué moult commentaires dont je vous recommande la lecture. Une intervention a retenu mon attention : cette structure place les deux colonnes latérales au début du code HTML, ou en tout cas avant le contenu principal. Ce qui peut poser des problèmes d’accessibilité pour les humains et des difficultés pour référencer correctement le contenu des pages web :

• Il est généralement recommandé de mettre le contenu en avant pour que Google, Yahoo et MSN alimentent leur index avec du contenu renouvelé : les barres latérales contiennent le plus souvent des éléments qui ne changent pas souvent (menu, éléments de navigation, présentation du site ou de l’auteur, etc.). Encore que la deuxième colonne latérale sert souvent à présenter les derniers articles, les derniers commentaires ou les dernies liens entrants. Rien n’empêche de placer cette colonne en premier dans le code.
• Etant plus loin dans le code, le contenu est moins accessible dans tout les sens du terme pour les humains porteurs de handicaps ou surfant depuis des périphériques mobiles.

… or a feature

A la réflexion, ces deux points, s’ils ne sont pas faux, ne sont pas à prendre au pied de la lettre non plus :

• Les moteurs de recherche scannent toute la page et pas seulement le début, et les descriptions qui apparaissent dans les résultats sont de plus en plus contextuelles : les moteurs vont chercher des phrases un peu partout dans la page pour former la description. Si le contenu est mis à jour régulièrement, Google le trouvera même s’il se trouve dans la cave !
• En ce qui concerne l’accessibilité pour les humains, je pense que les liens d’évitement de la forme « Aller au contenu » (appellés très justement d’ailleurs skip-link dans le thème Sandbox) sont fait pour passer au-dessus d’une navigation qu’il parait logique de placer avant le contenu !

Et oui, à force de penser SEO ou SEM finirait-on par oublier l’essentiel ? Le texte nu (en l’absence de prise en charge des feuilles de style) en début de page sans le contexte de la navigation et la présentation du site ou de l’auteur, peut être perturbante lorsqu’on arrive sur un site. N’est-il pas judicieux, quand on se préoccupe des utilisateurs de JAWS, de faire aussi attention à tous les utilisateurs occasionnels (de plus en plus nombreux) qui préfèrent trouver les points de repères en haut de la page plutôt qu’en bas ?..

Le chêne et le roseau

Ces deux objections étant écartées, ce genre de structure me convient parfaitement. D’autant plus qu’en ajoutant une div id= »wrapper » sous le body avec une width en valeur relative comme em ou ex, on bénéficie d’une structure ni fixe ni fluide, mais élastique. La page web peut ainsi supporter un facteur d’agrandissement presque sans limite. A condition toutefois que toutes les valeurs width, height et font-size, etc. soient, elles aussi, en valeur relative.

/* layout global */
#wrapper {
     width: 80em;
     margin: 0 auto;
}
    #primary {
        float: left;
        width: 16em;
    }
    #secondary {
        float: right;
        width: 16em;
    }
    #content {
        margin-left: 16em;
        margin-right: 16em;
    }
    #footer {
        clear: both;
    }

On pourrait objecter que le webdesigner a souvent besoin d’un container de largeur fixe pour mettre des images en background. En tâtonnant un peu, il est très rapide de déterminer les valeurs em ou ex correspondant à une valeur précisée en pixel par un logiciel graphique. Une largeur peut être « déterminée » sans pour autant être « fixe ».

Ainsi, pour peu que l’habillage graphique soit conçu sur le principe de la répétition en x ou y, ou sur l’utilisation des portes coulissantes, votre page aura la souplesse du roseau plutôt que la rigidité du chêne. Au point qu’il suffira de modifier l’unité de la largeur du wrapper pour passer d’un design fixe (pixels) à une maquette fluide (pourcentage) ou une mise en pages élastique (em, ex).

Articles sur le même sujet

• Quelques notes — Programme de formation HTML & CSS
• Design CSS liquide (ou fluide) encadré d'images répétées… sans table
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Check your <body> avec le W3C
• Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire

… ou comment sortir « téléologique¹ » du même chapô que « mashup² »

Le design : centré, fixe, liquide…

C’est sur ces contraintes de structure mettant en jeu les balises XHTML que je voudrais m’attarder un peu en votre compagnie. Notre mise en pages doit-elle être de largeur fixe, ou variable ? Centrée, ou pas ? Il m’est difficile de choisir à votre place, mais en ce moment la tendance est de présenter des pages minimalistes de largeur fixe, centrées dans le navigateur.

Dans l’échantillon de code qui suit, on crée un container d’une largeur de 750 pixels, centré horizontalement grâce au raccourci margin: 0 auto. Ainsi, tout le contenu placé dans la balise identifiée par #container sera centré dans la page.

html, body {
     margin: 0;
     padding: 0;
     text-align: center;
}
#container {
     position: relative;
     width: 750px;
     margin: 0 auto;
     text-align: left;
}

C’est pourquoi, il est judicieux de mettre le padding et le margin des balises html et body à zéro. Par ailleurs, IE5 ayant du mal avec margin: 0 auto, on prendra soin de centrer l’ensemble du document avec text-align: center, et ensuite d’expliciter la valeur d’alignement du texte par défaut dans le container.

MAJ : Pour la remise à zéro des style par défaut des balises HTML, je vous invite à lire 5 Resets CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs pour en savoir plus.

Dans la plupart ces cas, le choix d’un design à largeur fixe permet de mieux contrôler le nombre de mots par ligne pour offrir une lecture confortable (qu’on trouve raremment dans les pages où le texte s’étire d’un bout à l’autre de la fenêtre du navigateur…). A condition toutefois de permettre l’agrandissement de la taille du texte, en utilisant des unités relatives em, ex ou %, à la place des px qu’IE ne sait pas agrandir…

Dans d’autres cas, ce choix est dicté par les difficultés liées à la conception d’un design liquide (ou fluide) comportant des visuels en haut, en bas, sur les côtés et dans les coins ! En effet, si la réalisation d’un design composé d’images qui se répètent verticalement est aisée, ce n’est pas toujours le cas lorsqu’on veut que la mise en pages s’adapte horizontalement et verticalement à la taille de la fenêtre (cf. mon billet «Design CSS : fixe, élastique ou liquide ?» pour plus d’information sur la question).

Une page web toute simple

La structure que l’on rencontre le plus souvent sur le web est composée d’un titre h1 suivi des différents niveaux de sous-titre h2, h3… le tout, agrémenté de texte p et d’image img. Notez que pour les images, on peut mettre la balise img dans la même balise p que le texte, ou dans sa propre balise p. On divisera ensuite (en fonction de la nature du contenu) le document en plusieurs parties avec les balises div dont c’est précisément la fonction.

Si l’on ajoute la gestion des colonnes, on obtient une structure qui ressemble à la plupart des pages que l’on trouve à portée de clic ; les différences étant souvent le fruit d’un travail sur l’identité visuelle et du soin apporté à la réalisation-intégration des divers éléments composant la page.

MAJ : Lire Conception dans le navigateur avec HTML5 & CSS3 sur le marquage structurel d’une page web avec HTML5.

Des colonnes avec float

Pour en revenir aux colonnes, la propriété float, associée aux valeurs right ou left, donnera rapidement forme à votre document, à condition de ne pas oublier le clear: right, left ou both pour ajouter un élément de type pied de page que nous voudrons voir, comme son nom l’indique, à la fin de notre page, et ce, quelque soit la hauteur des contenus respectifs de nos deux colonnes !

C’est vrai qu’Internet Explorer n’a pas toujours besoin que l’on explicite un clear après un float, contrairement aux navigateurs respectant les spécifications du W3C comme Firefox ou Opera. L’esprit humain non plus, puisqu’il faut souvent passer de bons longs moments avec les spécifications pour s’en convaincre. Quoiqu’il en soit, souvenez-vous que si votre div est placée correctement dans un navigateur et pas dans l’autre, c’est souvent la faute à float ;)

Manipulez, il en restera toujours quelque chose

Pour mieux observer ce phénonème, je vous propose quelques manipulations à faire chez vous sur un exemple de positionnement avec float. Tout est précisé dans le code source, mais pour les jedi, un résumé devrait suffire :

1. Dans #container, enlevez les commentaires autour de width: 900px;, réaffichez cette page dans IE6 et FF et observez le déplacement du footer dans FF.
2. Puis, dans #footer, enlevez délicatement les commentaires autour de clear: both, et réaffichez cette page dans IE6 et FF. Que s’est-il passé avec le footer ?
3. Pour terminer, remettez tout comme au début, et ajoutez du texte dans la sidebar. Que se passe-t-il ? Que faut-il faire ?

Tant que nous somme dans la float, et les colonnes, j’en profite pour vous proposer un autre exemple de mise en page sur une ou deux colonnes.

Pour la boite, vous prendrez quel modèle ?

Dès que l’on applique une largeur à un élément de type block, on prend le risque de tomber dans le maelström des différents modes de calcul concernant le modèle de boite : Internet Explorer a une façon bien à lui de mettre border, padding et zone de contenu dans le même sac, contrairement au modèle standard qui dissocie bien chaque élément dans le calcul final de la boite.

Grosso modo, un bloc de 250px de large avec un padding de 20px et un border de 5px donneront 250 + 20 + 20 + 5 + 5 = 300 pixels dans le modèle standard, tandis que cette valeur sera ramenée à 250 pixels sur IE, puisque la bordure et la marge intérieure seront assimilés à la zone de contenu :(

Ok, quelques mots sur le DocType switching… Ou comment forcer l’une ou l’autre interprétation des dimensions du modèle de boite. Pour résumer la fin de l’article d’Openweb cité plus haut, la plupart des navigateurs modernes (si si, même IE6) basculeront dans le modèle de boite standard si une DTD XHTML (strict, transitional ou frameset) est spécifiée dans l’en-tête de la page. Sauf pour IE6 (faut pas trop rêver non plus…) qui rebascule dans son modèle de boite propriétaire dès qu’il voit le méchant prologue XML…

Il existe de nombreux contournements (hacks) plus ou moins funky pour régler ce problème de compatibilité des modèles de boite. Pour ma part, je m’en tiens à une ligne de conduite simple : j’applique le padding aux éléments enfants du bloc qui possède une propriété width. Lorsque celà n’est pas possible, je spécifie une feuille de style pour IE en utilisant les commentaires conditionnels.

Si votre page contient des formulaires, je vous invite à lire ce billet sur la conception de formulaires sans tableau qui a gardé toute sa fraicheur ;) Souvenons-nous toutefois de ne pas troubler l’utilisateur avec des formulaires trop funkydéliques. L’utilisateur ne fait pas que remplir des champs de saisies, il donne un peu de lui-même : respectons-le !

Et comme vous voudrez certainement mettre de beaux visuels en fond de page, je vous propose ce billet sur l’utilisation, non pas d’un, mais de deux background pour enjoliver votre fond de page !

Il n’y a pas que les div dans la vie

Après la mise au point du squelette de notre page, nous allons nous occuper des autres éléments qui nous aideront à structurer le contenu. J’ai évoqué rapidement la balise h1 et ses petites soeurs h2…, h6 qui doivent être utilisées pour les titres et sous-titres de vos documents.

Par exemple, plutôt qu’un div id= »titre1″, on stylera la balise h1 pour le plus grand plaisir des moteurs de recherches et navigateurs alternatifs ! La balise p encadre les paragraphes ; blockquote sert lorsqu’on cite une portion conséquente de texte.

A noter que cette balise peut contenir d’autres éléments de type bloc, comme p ou table, mais la réciproque n’est pas vraie. Pour mieux connaître les mœurs subtiles des balises HTML, j’abuse de la bande passante de gotapi.com.

Lorsque la structure du contenu implique une idée de liste, le mieux, c’est encore, d’employer les listes ordonnées ol ou non ordonnées ul avec leur cohorte de li. Ces listes sont très pratiques et permettent de nombreuses fantaisies en matière de CSS.

Mais on oublie trop souvent les listes de définitions qui peuvent rendre de grands services, comme présenter la chronologie de ma loupanthère, par exemple… Le sujet des listes de définitions est inépuisable, ce qui n’est pas mon cas : je vous ai donc laissé quelques liens à suivre dans la linkographie.

Les éléments en ligne c’est pour aujourd’hui ou pour demain ?

Après sur survol des éléments de type block, il nous reste tout juste assez de temps pour jeter un oeil sur les éléments en ligne. J’utilise assez souvent les éléments suivants : samp pour spécifier les échantillons de code ; em pour l’emphase (en gros, ça met de l’italique) ; strong pour marquer un renforcement du texte (en gros, ça met du gras), q pour les citations courtes mais pas forcément vulgaires…, a pour les liens, etc.

Bon, c’est comme le café, je crois que ce n’est pas la peine d’en rajouter. Et puis vous êtes sûrement déjà parti faire un tour sur gotapi ou pire, sur bashfr où vous trouverez des vrais morceaux d’humour, pas comme ici :)

Et vous, quelles sont vos balises préférées ?

Linkographie :

Maxdesign

Sans doute l’un des meilleurs site au monde concernant les 1001 façons de styler les listes ;)

Selfhtml.org

Tout sur le formatage des listes.

Pompage

L’essentiel et un peu plus sur les listes de définitions.

Alsacreations

Utilisez les listes de définition pour structurer vos menus déroulants.

Giminik

Liste des attributs et événements associés à la balise dl

Articles sur le même sujet

• Trucs et astuces CSS
• Exercice de style CSS et HTML : table vs div
• Frameworks CSS + Reset CSS : design from scratch
• Design de formulaire HTML avec CSS
• Design CSS : fixe, élastique ou liquide ?

Nous utiliserons la propriété float : elle permet au contenu de se placer à gauche ou à droite de celui qui le précède dans le flux. Nous attribuerons ensuite des valeurs en pourcentages à la propriété width de chaque colonne pour obtenir une largeur globale fixe ou liquide.

La largeur passe facilement d’une valeur relative à une valeur fixe en modifiant la valeur width du container. Les valeurs pour chaque colonne étant en pourcentage, elles s’adapteront parfaitement à vos exigences. Notez que je vous laisse le soin de bidouiller pour afficher fièrement chez vous l’exemple ci-dessous ;)

Et puis non, finalement, puisque vous le valez bien, je vous mâche le travail.

Mais je parle, je parle… et j’en oublierai presque d’aller me coucher ;) Quant à vous, prenez encore dix minutes pour afficher le code source des exemples et amusez-vous, les CSS, s’est fait pour ça !

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

Articles sur le même sujet

• Frameworks CSS + Reset CSS : design from scratch
• Exercice de style CSS et HTML : table vs div
• Quelques notes sur XHTML et CSS, au fil de l'eau…
• Frameworks CSS — Blueprint vs 960 Grid System
• Design CSS liquide (ou fluide) encadré d'images répétées… sans table