cadre extensible avec image

Version imprimable

Bonjour

Mon probleme est que les coté gauche et droit ne veulent pas "s'allonger"
le "background-repeat:repeat-y" ne fait rien
Voici le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<div>
	<div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_01.png); background-repeat:no-repeat; width:13px; height:13px"></div>
	<div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_02.png);background-repeat:no-repeat; width:722px "></div>
    <div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_03.png); background-repeat:no-repeat; width:13px; height:13px"></div>
</div>
<div>
	<div style=" float:left;background-image:url(../Images/fond_blanc/fond-blancg.png); background-repeat:repeat-y"></div>
	<div style="width:722px"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
	<div style=" float:left;background-image:url(../Images/fond_blanc/fond-blancd.png); background-repeat:repeat-y"></div>
</div>
<div>
	<div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_07.png); background-repeat:no-repeat; width:13px; height:13px"></div>
	<div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_08.png);background-repeat:no-repeat; width:722px "></div>
	<div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_09.png); background-repeat:no-repeat; width:13px; height:13px"></div>
</div>

Merci de votre aide

10/06/2009, 10h11
Macmillenium

Bonjour,

Un élément flottant s'adapte à la taille de son contenu.
Étant donné que les tiens sont vides, ils se retrouvent à height:0; et width:0;.
Il faudrait donc renseigner les valeurs de ces deux propriétés.

voila le code avec les dimensions
mais le cadre est toujours bancale

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
    <div style="width:748px">
        <div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_01.png); background-repeat:no-repeat; width:13px; height:13px"></div>
        <div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_02.png);background-repeat:no-repeat; width:722px; height:13px "></div>
        <div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_03.png); background-repeat:no-repeat; width:13px; height:13px"></div>
    </div>
    <div style="width:748px">
        <div style=" float:left; min-height:200px;width:13px;background-image:url(../Images/fond_blanc/fond-blancg.png); background-repeat:repeat-y"></div>
        <div style=" float:left; min-height:200px; width:722px; background-color:#FFF"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
        <div style=" float:left; min-height:200px;width:13px;background-image:url(../Images/fond_blanc/fond-blancd.png); background-repeat:repeat-y"></div>
    </div>
    <div style="width:748px">
        <div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_07.png); background-repeat:no-repeat; width:13px; height:13px"></div>
        <div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_08.png);background-repeat:no-repeat; width:722px; height:13px"></div>
        <div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_09.png); background-repeat:no-repeat; width:13px; height:13px"></div>
    </div>

d'ou proviens l'erreur ?
merci de votre aide

Bonsoir,

Si l'erreur vient du fait que les bords gauche & droit ne s'entendent pas plus que 200px (alors que les <br /> donnent + que 200px), c'est le comportement normal.

Le mieu serait pour cette partie :
Code:

1 2 3 4 5 <div style="width:748px"> <div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_07.png); background-repeat:no-repeat; width:13px; height:13px"></div> <div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_08.png);background-repeat:no-repeat; width:722px; height:13px"></div> <div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_09.png); background-repeat:no-repeat; width:13px; height:13px"></div> </div>
De ne mettre qu'une image en repeat-y qui comprend les bords (donc 1 seul div). Le contenu étant dedans, la répétition (avec les bords) se fera alors normalement... ;)