[résolu] En-tête puis motif dissociés du contenu

Bonjour,

Je me permets de commencer ma participation dans ce forum par un problème

Je suis en train de construire un style pour mon site personnel.
Ce site est verticalement composé successivement d'un espace-bannière, d'un menu horizontal, d'un titre puis d'un contenu.
Les éléments d'en-tête font environ 400px de haut. Le contenu devrait donc commencer vers 400px depuis le haut de page.

Mon problème est le suivant :
Je souhaite donner pour fond à ma page un en-tête suivi d'un motif répété verticalement jusqu'en bas de page.
Or mon en-tête fait 800px de haut ! Il empiète donc sur l'endroit où commence le contenu.
Ma division de contenu est la plus basse de la page. Si je veux faire démarrer mon motif, il faut donc que je le fasse dans cette division. Or si j'attribue à cette division un background en repeat-y sans autre spécification, celui-ci commence dès 400px, empiètant donc sur mon en-tête ...

J'avais auparavant tenté de "découper" mon en-tête en plusieurs images complémentaires et de les attribuer successivement à l'espace-bannière, au menu, au titre, afin de recréer l'image d'origine. Mais le problème reste le même, sa hauteur étant fixe, le contenu ne pouvait commencer qu'après 800px...

J'ai tenté de donner à ma division de contenu les propriétés suivantes :

background-image: url(motif.jpg);
background-position: 0px 400px;
background-repeat: repeat-y;

Mais il s'avère que la propriété repeat-y ne fonctionne pas en spécifiant la position de commencement du motif...

J'aimerais corriger ce problème sans pour autant passer en coordonnées absolues (pas de z-index ni de overflow donc)...

Je n'ai plus trop d'idée

Merci pour votre aide !
Modifié par Mari0 (17 Sep 2007 - 22:02)

Bonjour,

Ça serait un poil plus simple en ayant le design souhaité sous les yeux, mais à priori il te faut:
- un conteneur avec motif répété en y;
- un div doublant ce conteneur, avec pour background l'image d'en-tête (non répétée, et sans couleur de fond).

Ce qui nous donne:

<div id="conteneur"><div id="conteneur-bis">
	<div id="entete"></div>
	<div id="contenu"></div>
</div><!-- #conteneur-bis --></div><!-- #conteneur -->

À la rigueur, il est peut-être possible de se passer d'un conteneur double en appliquant l'image de motif directement à body, mais faire coïncider cette image avec l'image de fond de l'en-tête pourrait s'avérer difficile.

Bonjour,

Si je comprends bien, pour l'instant mes div sont imbriquées dans le mauvais sens, le motif doit être attaché à une div conteneur ? ^^'

Je teste ça et vous tiens au courant de mon éventuel succès.

En tout cas merci Florent
Modifié par Mari0 (17 Sep 2007 - 22:04)

Hop-là un petit double post (désolée) pour vous dire que mon problème est résolu.

Je n'avais effectivement pas raisonné dans le bon sens pour la superposition de div... La solution de Florent était la bonne.

Merci !