09 décembre 2009

Des colonnes de même hauteur (2)

Une technique simple permet d'obtenir des colonnes de même hauteur. Elle est toutefois soumise à condition.

On donne une couleur de fond à l'élément "container" et une autre à l'élément qui aura la hauteur la plus longue. Ainsi, l'élément auquel on n'aura pas attribué de couleur de fond se retrouvera avec celle du "container".

1- Si le "content" est toujours plus long que les colonnes de menu, on écrit par exemple :

#container { background: #FFFF99;}
#content { background: #56BBD0;}
#leftbar { background: transparent;}*
#rightbar { background: transparent;}

colonne3

 

couleur du "content" : #56BBD0;
couleur des colonnes : #FFFF99; (celle du container)
Seulement deux couleurs possibles.

2- Si les colonnes de menu sont toujours plus longues que le "content", on écrit par exemple :

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

colonne4

couleur du "content" : #56BBD0; (celle du container)
couleur des colonnes : #FFFF99; et #FF6666;
Trois couleurs possibles.

Nota : *On peut aussi ne pas indiquer la propriété "background", "transparent" étant la valeur par défaut.

Posté par Michal53 à 09:00 - - Permalien [#]
Tags : , , , , , , , , , , ,