05 novembre 2009

Des colonnes de même hauteur (1)

Les feuilles de style des thèmes proposés par Canalblog comportent trois éléments définissant les colonnes :
- la colonne principale contenant les articles, "content" ;
- les colonnes des menus latéraux, "leftbar" et "rightbar".
La boîte contenant ces trois colonnes étant "container".

En utilisant la propriété "background-color" on peut donner une couleur de fond à chacune de ces colonnes. Mais on obtient un résultat peu esthétique. En effet, les colonnes n'ont pas la même longueur, le bas d'une colonne s'arrête, faute de contenu.

exemple :

article01_3col_small

Dans cet exemple, la feuille de style comporte les éléments suivants :

#container { background: #FFFF99;}
#content { background: #56BBD0;}
#leftbar { background: #FFCC99;}
#rightbar { background: #FF6666;}

Le résultat est identique si l'on utilise la propriété "background-image" appliquée à chaque colonne.

Il est malgré tout possible d'obtenir l'affichage de colonnes de même longueur.

Il suffit d'utiliser la propriété "background-image" appliquée à la boîte qui contient toutes les colonnes ("container").

L'image qui servira de fond comportera autant de zones de couleurs différentes que de colonnes. Chaque zone figurera une colonne dont elle aura la largeur.

exemple :

article01_3co2l

La hauteur de cette image pourra être réduite à quelques pixels car elle sera répétée sur toute la hauteur de la boîte qui la contient. Pour cela on utilisera la valeur "repeat-y". Ce qui donne :

background: url(image*) repeat-y;**

La feuille de style comportera donc les éléments suivants :

#container { background: url(image) repeat-y; }
#content { }
#leftbar { }
#rightbar { }

Inutile de spécifier un fond aux trois colonnes.

* image : l'adresse de l'image est de la forme "http://abcd/efgh.jpg".
** ceci est l'écriture abrégée de :
"background-image: url(image);" et de "background-repeat: repeat-y;".