Problème d'extensibilité [Pas évident]

Bonjour,
Je suis un habitué de AslaCréation et j'ai besoin d'aide.
C'est mon premier message, car j'ai l'habitude de ne pas demander d'aide aux autres.
Tous mes problèmes (en ce qui concerne l'informatique) je l'ai résous seul !
Mais là, je suis sur largué !


Le problème

Je voudrai que mon template soit extensible.
La forme du template est fini. Je cherche à placer du texte dans un espace où le background se constitue de 2 images différente.
Lorsque je dis différent c'est:
-La première est static
-La second est extensible

Biensure, il ne faut pas oublier que le texte doit est au dessus des 2 images.
Le but est que, lorsque le texte dépasse une certaine taille (longueur) la seconde image apparait et "s'adapt" en fonction de la longueur du texte.

Si vous n'avez pas compris je vous l'explique en image.
http://img23.imageshack.us/img23/3155/explicationm.jpg

		<div id="content">
		
			<div id="contenu_fixe"></div>
			<div id="contenu_ext"></div>
			<div id="content_end"></div>
			
		</div>

Le code CSS, me permet uniquement de placer les objet dans l'ordre, mais cela ne m'avance pas dans mon problème.
C'est au niveau du html que je suis largué. Comment mettre en place mon idée?

Voilà si vous avez des réponses je suis preneur, merci d'avance

Ztaix,

Bonjour,

Pas sûre de comprendre le problème, mais si le but est de faire répéter le fond d'écran, il suffit de lui préciser "repeat-y".

Si ton problème est que le div reste à une hauteur figée, il suffit simplement d'enlever l'attribut height (qui, donne une hauteur fixe) et de le remplacer par min-height.

ps. : Alsacréation ^^;
Modifié par Laurie-Anne (17 Feb 2010 - 12:06)

Merci pour ta réponse, mais j'ai trouvé une solution !
C'est pas vraiment comme je le voulais mais cela s'en rapproche.

Explication:
http://img534.imageshack.us/img534/1994/explication.gif
http://img32.imageshack.us/img32/2629/explicationq.jpg

#contenu_fixe {
	position: relative;
	margin-left: -5px;
	margin-top: 198px;
	background: url('images/content.png') no-repeat 0px 0px;
	width: 550px;
	height: 414px;
	}
#contenu_ext{
	position: relative;
	margin-left: 368px;
	margin-bottom: -16px;
	background: url('images/content_extend.png') repeat-y 0px 0px;
	width: 522px;
	min-height: 414px; /* <- ça c'est important, au passage merci pour l'info */
	}
#contenu_texte {
	position: relative;
	width: 460px;
	height: 100%;
	color: white;
	margin-top: -370px;
	margin-left: 30px;
}
#content_end  {
	position: relative;
	margin-left: 368px;
	background: url('images/content_footer.png') no-repeat 0px 0px;
	width: 524px;
	height: 38px;
}	

Voila ma version. Je ne sais pas si est conforme mais elle fonctionne sur firefox et IE7

++
Modifié par ztaix (18 Feb 2010 - 04:27)