Zone étirable en backgound

Salut à tous !

voilà je vais surement attaquer l'intégration d'une de mes maquettes bientôt et celle ci est un peu particulière, un dessin sera préférable à un grand discours :

http://makrea.free.fr/temp/css.jpg

la maquette assez graphique propose un arrière plan façon bureau de travail. j'ai donc des images qui entourent ma zone de texte de tous les cotés.
habituellement je fais un header avec un fond, une zone étirable qui contient mon texte au centre avec une couleur ou texture de fond qui se répète et mon footer.
Ce coup ci les images et le fond ne peuvent se répéter avant une certaine taille en pixels et pourtant dans cette zone il me faut déjà une zone texte.

Aucun problème tant que je n'insère pas un div contenant du texte, tout s'étire comme il faut. Mais quand je dois insérer la zone de texte elle est forcément inclue dans une zone ou une autre et s'arrete donc à un endroit ou commence à un autre trop bas.

La solution consiste t elle uniquement à utiliser les z-index pour faire ce que je veux ou y a t il une ruse avec les position absolute ou autres ?

Merci d'avance pour ce casse tête

Bonjour,

Je pense qu'il va effectivement falloir utiliser des z-index et du positionnement absolu.

Dans les grande lignes, je gèrerais le "fond" avec les deux div de contenu en premier (deux div, l'une sous l'autre ayant chacune leurs fonds (les gris les plus foncés) et leurs bordures ; ces div auront un padding à droite assez énorme pour laisser de la place au div du dessus) contenu dans un parent (pour le centrage) en position:relative;

Ensuite, dans le même parent, je placerais la div "partie texte" en positionnement absolu (avec le z-index qui va bien) par rapport au parent (donc en laissant la place pour le contenu des div en dessous).

À tester, ça devrait fonctionner

Salut,

ca dépend un peu de du fond de ton header..
S'il peut être mis en repeat-x alors tu peux faire :

<div class="zoneetirable">
  <div class="zoneheader">
    <div class="contenutext">Text ici</div>
  </div>
</div>

et en css : .zoneheader{background:transparent url('...') repeat-x;}.

Sinon je crois que ca va être beaucoup moins facile que ca.

En fait il faudrait plus de précisions sur ta charte graphique car il y aurait plusieurs solutions mais comme le disent les posts qui me précèdent tout dépend de ce que contiennent tes zones.

Salut, et merci pour vos réponses !

en fait mon dessin est vraiment assez explicite du futur contenu.
la partie du haut est fixe, elle n'est pas étirable ou alors il faudrait un bout de code qui dise que l'image s'affiche d'abord entièrement dans la div puis qu'il répète les 20 derniers pixels de l'image à l'infini mais ça ne doit pas encore être prévu même dans CSS3
c'est pourquoi je pense partir sur la solution de Laurie-Anne

je ne peux pas encore montrer la charte maintenant, elle ne sera validée qu'en fin de semaine, mais quand je lance la machine je vous colle un lien pour voir directement le truc si vous voulez

ha c'est bon !
en voulant expliquer le truc j'ai pensé à quelque chose qui devrait coller.
je fais mon découpage plus haut et le fond de page de la partie centrale étirable contiendra déjà ma texture de fond répétée un grand nombre de fois. l'image sera lourde mais la solution est aussi simple et imparable je pense :

http://makrea.free.fr/temp/css2.jpg

à tester.

Merci en tout cas pour vos conseils
Modifié par zepokpok (30 Aug 2010 - 16:26)

a écrit :
ou alors il faudrait un bout de code qui dise que l'image s'affiche d'abord entièrement dans la div puis qu'il répète les 20 derniers pixels de l'image à l'infini

Ca me semble possible, ... si tu fais
<div class="etirable"><div class="header">...</div></div>,
que dans ton .etirable tu mettes effectivement cette image de 20px qui se répèterait à l'infini, et par dessu ton .header avec l'image en background en no-repeat ou repeat-x ?
Ensuite tu calles le background de .etirable avec un background-position.

Non ?

oui mais dans ce cas ça veut dire que je mets l'image en dur (pas en fond) et que je ne peux pas mettre mon texte à cet emplacement à moins de jouer avec les z-index ?

à fouiller j'ai p'tete pas capté toutes les subtilités de ta proposition

je vous reposte ça dès que possible !

ma solution est sans image en dure :
html:

<div class="etirable"><div class="header">...</div></div>

css:

.etirablr{background: url('image1') repeat ...;}
.header {background: transparent url('image2') repeat-x left top;}

L'image1 se répèterait partout, et l'image2 uniquement sur la partie haute.
Tu saisies la nuance repeat, repeat-x, repeat-y, no-repeat ?