CSS : faire un bloc auto-ajustable en hauteur

CSS : faire un bloc auto-ajustable en hauteur

Certains d'entre vous se sont peut-être déjà confronté à un problème lors de la création d'une page web. Comment faire un bloc dont la hauteur va s'ajuster en fonction de son contenu ?

Il existe plusieurs méthodes pour coder cela mais j'en utilse une qui marche très bien. Je voulais donc en profiter pour vous en faire partager le code html/css.

Je commence ce "mini-tutoriel" pour débutants en css :

1. Le premier point est de créer votre bloc à l'aide d'un logiciel de création type Photoshop, Gimp, etc...

2. L Une fois créé, il vous faudra procéder au découpage de votre image en 3 partie distincte : le haut, le milieu, et le bas du bloc. Attention, pensez que pour gérer la transparence, il vaut mieux enregistrer votre image en gif (IE gèrant mal la transparence sur les formats png) Pour l'exemple je vais prendre un bloc à bords arrondis :

3. Le but sera donc d'intégrer ce bloc dans votre page html. Voici comment faire pour arriver au résultat : Tout d'abord la structure html. On va créer un div auquel on va attribuer une class "container". Cela va correspondre à notre bloc entier. Ensuite, à l'intérieur de ce div, on va en imbriquer 3 autres, correspondant aux 3 parties de notre image. On va donc donner des class "top", "middle" et "bottom".

4. Pour finir voici la partie de code css qui nous interresse : La largeur de mon bloc est de 200 px. Les parties top et bottom font 10 px de hauteur. Quant à la partie du milieu, l'astuce est de ne surtout pas lui donner de hauteur mais de la faire se répéter verticalement grâce à la propriété "repeat-y". Ainsi, la partie centrale de notre image va donc s'adapter au contenu du bloc !

Et voilou ! Je vous rappelle le résultat :

J'espère que ce petit tutoriel pourra aider tout ceux qui se galèrent avec ce pb...