Background extensible en hauteur en fonction du contenu

Bonjour,

je monte un petit site associatif et je rencontre des problèmes de positionnement, de fond de page plus précisément.

j'ai un fond dont je connais la largeur, fixe, que je veux centrer horizontalement sur ma page. jusque là, ça va.
Mais je voudrais que mon fond s'étire sur la hauteur en fonction du contenu.

Le gros avantage est que mon jpg possède une partie blanche sur toute la largeur au milieu, j'ai donc penser le découper en 3 :

- fond_haut qui comprend des éléments graphiques que je souhaite fixes.
- fond_bas qui comprend des éléments graphiques que je souhaite fixes mais correspondant en hauteur avec le bas de mon contenu, variable lui.
- fond_milieu, que je pense donc étendre sur la hauteur, à base de repeat: repeat-y...

oui mais voila, je pense, je pense, c'est bien joli, mais je sais pas faire

pour vous donner une idée de ce que je veux, un schéma pourra aider : http://www.karoli.org/test/

quelqu'un pour m'aider ?
merci d'avance
Modifié par karoli (22 Jun 2008 - 15:46)

Salut,

Chez moi c'est extensible si j'agrandis la taille du texte, le bloc le contenant s'agrandit, et l'image de pied de page descend, poussée par le contenu qui la précède.

Je n'ai pas trop bien compris ton problème en réalité, pourrais tu apporter plus de précisions ?

bonsoir et merci de te pencher sur mon problème

le calque mid s'agrandit bien effectivement, mais comme tu l'as remarqué, il entraîne dans sa descente le calque bottom
en fait je voudrais que le calque mid s'agrandisse, en chevauchant le calque bottom, jusqu'à atteindre le bas de celui-ci, et alors seulement le faire descendre avec lui...

c'est pas tres clair et encore moins facile a expliquer
et en fait, je ne pars peut-être pas du bon coté...

j'ai modifié un peu mon code : http://www.karoli.org/test/index_test.php

Hello karoli ,

karoli a écrit :
en fait je voudrais que le calque mid s'agrandisse, en chevauchant le calque bottom, jusqu'à atteindre le bas de celui-ci, et alors seulement le faire descendre avec lui...

c'est pas tres clair et encore moins facile a expliquer
et en fait, je ne pars peut-être pas du bon coté...

Hmm... pas sûr d'avoir bien compris mais est-ce que tout simplement tu ne voudrais pas dire que la partie fond_bas doit être en background en bas du conteneur qui contiendra le texte ?

Ce qui est sûr en revanche c'est que le terme de calque est incorrect. Lire Quelle est la différence entre un DIV et un "calque" ?

A+

Heyoan a écrit :

Hmm... pas sûr d'avoir bien compris mais est-ce que tout simplement tu ne voudrais pas dire que la partie fond_bas doit être en background en bas du conteneur qui contiendra le texte ?

oui je crois que c'est ca en gros

Heyoan a écrit :

Ce qui est sûr en revanche c'est que le terme de calque est incorrect. Lire Quelle est la différence entre un DIV et un "calque" ?

A+

Au temps pour moi, je vais aller étudier ça, merci

Bonsoir tous le monde,

Pourquoi ne pas mettre <img src="images/fond_top.jpg" alt=""/> en en image de fond de ton entête (ici "top") via la propriété css background
Pourquoi ne pas mettre <img src="images/fond_bottom.jpg" alt=""/> en image de fond de ta page (body) via la même propriété css (position en bas et centrée par exemple)
Puis positionner ton bloc conteneur (ici "mid") et lui assigner le contexte de formatage ("mise en forme") que tu sembles vouloir lui assigner avec la propriété overflow ?

J'espère ne pas être "trop obscure", ni être passé à coté de ton soucis, si tel est le cas je te présente mes excuses
N'hésites pas à demander des éclaircissements, à (re)voir les bases du positionnement (cf Tutoriels et la FAQ par exemple)

Cdt,
Sylvain

Hum...Il semble que je n'ai regardé que ton premier lien...

Je reprends...

karoli(sur son site) a écrit :

il y a un moyen de lui donner une hauteur mini sans pour autant l'empecher de grandir au besoin ???
parce que comme il est la, avec une hauteur contrainte, il ne s'agrandit plus...
est-ce parce que mon texte est lui-meme dans un div qui deborde de son conteneur parent ?

Oui avec la propriété min-width, et pour les versions inférieures à IE7

Ceci étant dit, je reste sur ma position concernant ton image de bas de page, et je ne mettrai pas ton conteneur "content" dans le pied de page (#bottom)

Mais ce n'est que mon avis

Cdt,
Sylvain

bonsoir,

6l20 a écrit :

Oui avec la propriété min-width, et pour les versions inférieures à IE7

intéressant...

6l20 a écrit :

Ceci étant dit, je reste sur ma position concernant ton image de bas de page, et je ne mettrai pas ton conteneur "content" dans le pied de page (#bottom)

je vais regarder ça...et certainement revenir te demander des précisions

6l20 a écrit :

Mais ce n'est que mon avis

oui mais vu mon niveau, il serait malvenu de ma part de ne pas en tenir compte...


merci à toi

bon, j'ai repris certaines de tes indications (il faut encore que je me penche sur l'overflow, mais j'en ai mal à la tête d'avance )
edit : sous firefox 3, il semblerait que le background du body positionné en bottom ne soit pas respecté...à moins que ce soit moi le fautif et pas mozilla

à l'occasion vous pourrez me donner votre avis sur mon css, et notamment me dire vers quelles déconvenues je me dirige ?

merci d'avance, je stoppe pour ce soir

Bonne soirée à tous
Modifié par karoli (22 Jun 2008 - 22:46)