Comment coder simplement ce bloc ?

Bonjour à tous,

J'aimerais coder ce bloc en css :
http://img372.imageshack.us/img372/3607/75645545da4.png
(ce n'est qu'un schéma )

De cette manière :
http://img140.imageshack.us/img140/5515/18032728wb4.png
(Que le corps central puisse s'agrandir en fonction du texte !)

Très bien, vous allez me dire de faire ceci :
http://img400.imageshack.us/img400/9899/52691352kv3.png

Un div contenant la partie du haut, la partie central avec un background-y et la partie du bas...

Seulement, voilà c'est pas aussi facile

En effet si on remarque bien, le texte commence déjà dans la première div ! Il est à cheval sur celle-ci ! (Suis-je clair ?) Et c'est pareil pour le bas... le texte deborde sur la div du bas.

J'aurais aimé coder ca de manière optimiser ! Que la partie contenant le texte soit un simple background-y qui se repete verticalement ! De mannière à ne pas avoir d'énormes images ! Vous me suivez ? J'écris mon texte est c'est "le corps central qui peut se repeter sans soucis, qui s'étire" ! Je veux un effet d'ettirement en CSS... J'ai bien _peut être_ trouvé une solution, mais je souhaite obtenir votre aide en premier


Merci d'avance.
Modifié par Snoopy17 (25 Jun 2007 - 16:41)

Hello,

C'est le principe que l'on retrouve ici :
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html

Dans la pratique, on pourra faire ça avec deux blocs imbriqués (pour deux images de fond), à la rigueur trois (pour trois images de fond).

J'y ai pensé à cette méthode, mais charger une immense image pour un arrière plan, ca sera assez lent...
Modifié par Snoopy17 (25 Jun 2007 - 15:58)

Salut,

Pour un résultat identique, il est plus rapide de charger une image que plusieurs. (c'est moins lourd)
Dans ton cas, deux images (haut et bas) suffisent.

Peut être mais si je charge 3 images de 4Ko chacune, c'est moins lourd que 1 image de 4Ko et l'autre de 500Ko...

J'avais eu l'idée de 3 divs imbriquées perso.

Tu n'as aucune raison d'avoir une image de 500ko... Je t'ai bien précisé pour un rendu identique.
Si tu peux, pour un élément ne mettre qu'un fond plutôt que deux, alors c'est la solution à privilégier.

C'est la méthode employée sur certains arrières-plans de csszengarden pour alléger la page.

Mon image d'arrière plan, faut qu'elle face une certaine hauteur !
Mon bloc risque de faire parfois de très, très grandes hauteurs
Faut bien que je fasse un background de cette dimension non ?

De plus, quoi de plus légé que d'avoir une image de 1px de hauteur qui se répète dans un bloc ?
Modifié par Snoopy17 (25 Jun 2007 - 16:33)

Snoopy17 a écrit :
Mon image d'arrière plan, faut qu'elle face une certaine hauteur !
Mon bloc risque de faire parfois de très, très grandes hauteurs
Faut bien que je fasse un background de cette dimension non ?

[quote=Snoopy17]De plus, quoi de plus légé que d'avoir une image de 1px de hauteur qui se répète dans un bloc ?

La même image de 20px de hauteur qui se répète dans un bloc. On passera de 400 octets à 540 octets, peut-être, mais on évitera des lenteurs des navigateurs qui n'auront pas à répéter 3000 fois une même image (juste 150 fois).

Sinon, des images très grandes en hauteur peuvent avoir un poids très raisonnable, avec du GIF ou du PNG bien utilisé (surtout du PNG d'ailleurs, pour les grandes images).

Mais sinon, utiliser trois images n'est pas bien compliqué. Il suffit de passer de 2 blocs imbriqués à trois blocs imbriqués. Ça rend le code HTML un peu moins clair, mais bon c'est la faute aux limitations des CSS.