Fond de DIV en "repeat y" pour un contenu dynamique

Bonjour,


J'ai un ptit problème avec ma mise en page :

J' ai un cadre avec un fond, dans ce cadre je dois mettre 2 images allignées et un texte.
Vu que ce fond est spécial, je l'ai découpé en 3 partie (haut avec hauteur fixe, milieu de 1 pixel de haut qui se répète en y et bas avec hauteur fixe)

Le but est donc d'adapter la hauteur du milieu suivant la quantité de texte.

Petit problème ca ne marche po!
J' un div qui contient mon img qui doit se repeter en y et dedans 2 autres div pour placer mon contenu (img et txt)
Peut être ca vient du fait qu'il des Div dans un div?
Si quelqu'un pourrait m'éclaircir

Voici mon code :

<div style="background-image:url(../img/background_visites1.jpg); height:12px; background-repeat:no-repeat; clear:both;"></div>
  

<div style="background-image:url(../img/background_visites2.jpg); background-repeat: repeat-y;">

<div style="float:left;">
  <img title="plan lumiere" alt="plan lumiere" src="../img/plan_lumiere.jpg" style="padding-left:8px;" />
   </div>
   
  <img  style="float:left;"src="../img/fleche_pave.gif" />
   
	<div style="float:left; text-align:left; width:210px; clear:none; ">
     <h1 style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#961207; font-weight:bolder; background-image:none; padding:0px; width:100px; left; display:inline; line-height:23px;">Plan lumière </h1>
     <p>Pellentesque a magna a mauris venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris . Praesent non odio. Pellentesque a magna a mauris . Praesent non odio. Pellentesque a magna a mauris</p>
	  </div>
</div>
	
<div style="background-image:url(../img/background_visites3.jpg); height:16px; background-repeat:no-repeat; clear:both;"></div>

Hello !

Je suis pas une pro mais voici mes conseils.

Tout d'abord tu devrais gérer tes styles dans un fichier CSS à part afin de séparer le contenu et le design.

En effet, tu utilises beaucoup de div (je faisais la même chose lorsque j'ai débuté). Simplifies ton code et gères tes images via les css : 2 div suffisent.

L'idée est de créer un div global (pour tout contenir). A l'intérieur, l'image du haut, un div central (qui va contenir ton image principale et ton texte) puis l'image du bas.

Il faut que tu donnes une largeur à ton div global (elle sera identique à celle de tes images haut et bas) : pour l'exemple la largeur est à 400px.

Voici les Css :

<style type="text/css">
<!--
#global {
	background-image: url((../img/background_visites2.jpg);
	background-repeat: repeat-y;
	width: 400px;
}
#img01 {
	width: 400px;
	height: 12px;
}
#img02 {
	width: 100px;
	float: left;
	margin-left: 8px;
}
#img03 {
	width: 10px;
	float: left;
}
#img04 {
	clear: both;
	height: 12px;
	width: 400px;
	height: 16px;
}
#div2 {
	text-align: left;
	float: left;
	padding: 0px 10px;
}
#div2 h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #961207;
	font-weight: bold;
}
-->
</style>

et le code HTML :

<div id="global">
	<img id="img01" src="background_visites1.jpg" alt="" />  
	<img id="img02" src="../img/plan_lumiere.jpg" alt="plan lumiere" title="plan lumiere"/>
	<div id="div2">
		<img id="img03" src="../img/fleche_pave.gif" alt=""/>
		<h1>Plan lumière</h1>
		<p>Pellentesque a magna a mauris venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris . Praesent non odio. Pellentesque a magna a mauris . Praesent non odio. Pellentesque a magna a mauris</p>
	</div>
	<img id="img04" src="(../img/background_visites3.jpg" alt="" /></div>
</div>

On pourrait sûrement faire encore plus simple, mais je pense que ça devrait ressembler à ce que tu recherches à faire.