Les colonnes factices

Par Dan Cederholm

Une des questions que l'on me pose le plus fréquemment à propos du design de mon site personnel est la suivante :

Comment faites-vous pour que la couleur d'arrière-plan de la colonne de droite s'étende jusqu'en bas de la page ?

En fait, l'idée est vraiment simple, c'est un concept que beaucoup parmi vous connaissent peut-être déjà. Pour les autres, la technique qui suit peut s'avérer une petite astuce bien pratique.

L'étirement vertical

Une des propriétés un peu frustrantes des CSS est le fait que, verticalement, les éléments s'étirent seulement aussi loin qu'ils en ont besoin. C'est à dire que si une image haute de 200 pixels est contenue dans un <div>, ce <div> s'étendra vers le bas de seulement 200 pixels.

Cela devient un dilemme intéressant quand vous utilisez l'élément <div> pour diviser votre balisage, puis appliquez la feuille de style pour créer une mise en page en colonnes. Une colonne peut être plus longue que l'autre (voir image 1). En fonction de la quantité de contenu imbriqué, il devient difficile de créer une mise en page avec deux grandes colonnes de tailles égales quand on veut une couleur d'arrière-plan unique pour chacune d'elles.

Image 1
Image 1

Il y a plusieurs techniques pour que ces colonnes apparaissent de longueurs égales, indépendamment de leur contenu. Voici ma solution personnelle pour un cas précis (à utiliser avec une mise en page positionnée de façon absolue), qui est, en fait... hyper simple. Ce même petit truc est aussi utilisé ailleurs, entre autres par le site A List Apart (site de la publication originale, NdT).

La triche

Le secret, embarrassant de simplicité, est d'utiliser une image d'arrière-plan qui se répète verticalement pour créer l'illusion de colonnes en couleurs. Pour SimpleBits, mon image de fond ressemble à quelque chose comme l'image 2 (les proportions sont modifiées pour la démonstration), avec une bande décorative sur la gauche, une large section blanche pour la colonne du contenu, une bordure de 1 pixel, et une section en brun léger pour l'arrière-plan de la colonne de droite suivie par l'inverse de la bordure décorative du côté gauche.

Image 2 : image d'arrière-plan à étirer verticalement
Image 2

L'image entière n'est haute que de quelques pixels, mais quand elle est répétée verticalement cela crée les colonnes en couleur qui s'écouleront jusqu'au bas de la page, sans se soucier de la longueur du contenu des colonnes.

La feuille de style

Cette règle CSS élémentaire est ajoutée à l'élément body :

background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;

Avant tout, on déclare la couleur d'arrière-plan de la page entière comme gris et on répète l'image seulement sur la verticale (repeat-y). La partie 50% 0 renvoie au positionnement de l'image dans notre cas, à 50% du bord gauche de la fenêtre du navigateur (ce qui donne une image centrée) et à 0 pixels du bord supérieur.

Les colonnes positionnées.

Une fois l'image d'arrière-plan en place, ma mise en page se positionne au-dessus, avec un remplissage (padding) et des marges spécifiées pour les colonnes gauche et droite, ce qui permet de les placer au bon endroit à l'intérieur des fausses colonnes créées par l'image d'arrière-plan (voir Image 3).

Image 3
Image 3

Il est important de noter que si on souhaite des bordures, des remplissages, et des marges sur l'une ou l'autre des colonnes, on devra faire du rafistolage pour IE/Windows à l'aide du modèle de boîte de Tantek Çelik. Voir le Box Model Hack ou le Mid Pass Filter.

D'un autre côté, si les attributs de bordures ou de remplissage peuvent être complètement évités en utilisant seulement des marges à la place, alors le hack du modèle de boîte ne sera pas nécessaire. Et si le contenu de la colonne se trouve (de façon transparente) au-dessus de l'arrière-plan répété, il doit être facile d'éviter le hack.

Le même en float

Bien que que j'utilise un positionnement absolu pour créer la mise en page sur deux colonnes de mon propre site, un résultat équivalent peut être obtenu avec la propriété float (comme vu sur ALA).

La même idée s'applique : répéter l'image d'arrière-plan, et poser une colonne flottante au-dessus des fausses colonnes ainsi créées.

Note finale

Le concept est simple, mais il peut alléger les frustrations que rencontrent fréquemment les designers en construisant des maquettes basées sur CSS.

Remerciements à Jeffrey Zeldman pour son aide à peaufiner cet article.

Cet article est sous le copyright du site A List Apart et de son auteur.


Translated with the permission of A List Apart and the author[s].

Fiche technique

À propos de l'auteur

Designer, programmeur et bon vivant, Dan Cederholm a effectué aux standards web les re-designs de Fast Company et Inc.com. Il publie nouvelles et astuces sur le design depuis son site personnel, SimpleBits.

Article du même auteur

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Tous niveaux

CSS

© 2001-2016 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site