[Résolu] Imbrication <div> et <p>

Bonjour,

Je suis en train de construire l'interface de mon site. Mais j'ai beau cherché de partout, je n'arrive pas à placer correctement l'endoir du texte.

J'ai partagé l'image d'arrière-plan en 3 parties :
- header, qui fait 216px de haut, elle s'arrête sous la maison de gauche (image pour mieux comprendre),
- milieu qui fait 1 px de haut, avec background-repeat:repeat-y; pour s'adapter à la longueur du texte selon la page,
- footer, la partie du bas. Classique.

Cependant j'aimerais faire démarrer mon texte en haut du cadre blanc, mais je n'y arrive pas : en plaçant le texte dans le div milieu, forcément le texte démarre plus en dessous, il y a un espace blanc qui fait très moche. Je ne sais pas si j'explique bien , j'ai donc rajouté un fond bleu à la balise <p> pour mieux voir. Elle est à margin-top: 0px, donc démarre le plus possible en haut du div milieu.

Existe-i-il un moyen pour démarrer le texte dans le div header ? J'ai essayé le margin-top négatif, cela ne fonctionne pas. Je voudrais éviter autant que possible de découper l'interface en plus de morceaux, de toute façon cela décalerait le problème en bas au lieu d'en haut de l'interface... faire une partie à partir du blanc règlerait ce problème mais je ne pourrait plus utiliser le background-repeat:repeat-y; ensuite si la maison fait partie...

Voilà je sèche donc, si quelqu'un a une petite idée... Je vous remercie par avance de votre aide
Modifié par Jarodd (19 Apr 2005 - 16:29)

je sais pas si ca peut t'aider mais bon...

Est ce que tu as essayé d'utiliser les margin négatives (comme lorsque l'on centre une div au milieu de la page)?

Je sais plus exactement comment ca fonctionne mais il me semble qu'il y a un tutoriel pour le centrage sur ce site, regarde et inspire toi du système.

bon courage et si ça marche, fais moi signe, ca peut etre intérressant.

J'ai essayé de mettre des marges négatives. IE ne veut rien savoir, et Firefox remonte le texte, mais il superpose le div milieu sur le bas du div header (en gros, il cache le bas de la maison). Donc ça n'a pas l'air de fonctionner...

Edit : je fouille sur le site, je viens de m'apercevoir que je suis atteint de cellulite aigue !!! A L'AIIIIIIIIIIIIDE !!!
Modifié par Jarodd (19 Apr 2005 - 14:34)

j'ai reussi a obtenir quelque chose de pas trop mal sous FF et IE:

Pour cela, tu mets ton <p> en dehors de ta balise .milieu, tu le positionne en absolute et tu lui mets des top et left pour le caler correctement.

voila les aperçus:

Firefox:

IE:

dis moi ce que tu en pense...

Sur tes impressions d'écran, c'est ça, mais je n'arrive pas à abtenir pareil c'est pire que ce que j'avais...

D'après toi, mon code doit être :

[ ]
<p>
<div class="milieu">
Version HTML - En construction
</div>
</p>

[ ]
p {
background-color: rgb(210, 230, 250);
left: 115px;
top: 50px;
width: 570px;
height: 250px;
position: absolute;
}

C'est bien ça ?

non, il faut mettre plutot

<div class="milieu">    </div>
<p> Version HTML - En construction</p>

Pour le css c'est bon, par contre moi j'atais plus sur un top de 160px. Mais bon, ca c'est toi qui vois.
Modifié par robined (19 Apr 2005 - 16:17)

Bon j'ai réussi à placer le bloc bleu à peu près là où je le voulais, en utilisant les top et left comme tu m'as conseillé. Reste le problème de différence de "pixelage" entre FF et IE (lien), mais là je ne peux rien y faire...

Merci bcp pour ton aide, Robined

Oups j'ai loupé ta précédente réponse.

Oui cette solution marche bien, mais vu que je met le <p> en dehors du <div>, la répétition de l'image milieu ne se répète plus en fonction de la longueur du texte...

J'ai trouvé une parade (temporaire j'espère), en plaçant le height de .milieu dans le fichier html, ça n'alourdit pas la page et ça me permettra d'ajuster la hauteur de l'interface pour chaque page, en fonction du texte.

Je te remercie encore une fois, tu m'as été d'un grand secours

content de t'avoir aidé, a plus

PS: pense a mettre dans le titre de ton message, beaucoup oublient...