Faire un encadrement de texte avec des images, rien qu'avec des divs et des css. Et ce cadre, bien sûr, doit pouvoir s'adapter au contenu, et donc être étirable dans les 2 sens.
On trouve ce genre de présentation assez courament
sur les sites, car il n'est pas possible avec l'attribut border CSS de faire des encadrements avec arrondis
par exemple, et puis on n'a pas trop le choix dans les styles de bordure.
La technique utilisée généralement, est celle de mettre en place un tableau, avec au moins 9 cellules : 3 x 3. Les cellules sur les cotés contiennnent les images du cadre, et celle du centre le contenu. Voici un exemple de cadre basé sur un tableau.
On va voir qu'il est possible de faire exactement le même cadre rien qu'avec des divs et CSS2.
Quel est l'interêt me direz-vous ?
L'inconvénient, c'est que ça ne s'affiche pas bien avec Netscape Communicateur (v4). Mais ce n'est pas grave, c'est un vieux navigateur qu'il faut oublier ;-). Un autre inconvénient : c'est un peu compliqué pour les débutant en css.
J'utilise 2 divs, #principal et #principal2, l'une dans l'autre, qui contiendront tout le reste.
<div id="principal">
<div id="principal2">
...
</div>
</div>
Pourquoi 2 ? En fait, l'une aura comme image de fond le coté gauche :
background-image: url('images/area_left.gif');
background-repeat: repeat-y;
et l'autre le coté droit (l'image de fond alignée à droite).
background-image: url('images/area_right.gif');
background-repeat: repeat-y;
background-position: right;
Dans ces 2 divs, il y a 3 autres div : #haut, #contenu, #bas.
<div id="principal">
<div id="principal2">
<div id="haut">
</div>
<div id="contenu">
</div>
<div id="bas">
</div>
</div>
</div>
La div #haut aura comme image de fond le coté haut,
ainsi que 2 autres divs alignées à droite et à gauche (attribut css float) qui auront les coins du cadres
en fond. Idem pour la div #bas. .
<div id="haut">
<div id="coingh"></div><div id="coindh"></div>
</div>
Pour les divs des coins, il ne faut pas oublier de spécifier une hauteur et largeur, correspondante à la taille des images des coins, et pour les div #haut et #bas une hauteur (celle de l'image des cotés).
Enfin, pour la div #contenu, qui contient ... le contenu, il faut simplement spécifier des marges interieures (padding),
à gauche et à droite, au moins égales à la largeur des images des cotés droit et gauche du cadre.
Nous avons dorénavant un encadrement etirable, modifiable facilement et conforme aux standards.
Vous pouvez comparer la version avec table et la nouvelle version en CSS avec sa feuille de style. Cette dernière version est mieux non ? ;-)