Discussion :

[loicmaxinfo]

Bonjour,

J'ai un problème concernant la hauteur d'une div.

Explication :

Pour créer mon design en xhtml, je dois créer une zone (avec un border 1px) ou se trouvera du texte, des images...
et sur la droite de ce div, je voudrai y mettre une ombre (pour faire l'ombre, j'utilise une image jpg de 1 x 7 pixel, que je répète verticalement (repeat-y).

Je voudrai que l'ombre s'étende sur la totalité de la hauteur du bloc div contenant le texte et les images.

Cela me parraissait simple, et finalement de galère dessus depuis quelque temps...
Mon problème c'est qu'il m'est impossible d'étendre l'ombre correctement. (L'ombre s'arrete à la hauteur d'un ou deux <br />, d'ailleur je ne sais pas pourquoi)
Sinon j'arrive à l'etendre avec ce code (height:100%) mais lorsque le texte devien trop long, ca déborde partout ...

Voila un bout de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="zone">
   <div id="bloc">Texte <br /><br /> texte <br /><br /> texte <br /><br /> texte ......</div>
   <div id="ombre"></div>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
html, body { margin:0px; padding:0px; height:100%; background-color:#8a8a8a; }
 
#zone { width:996px; height:100%; margin-left:auto; margin-right:auto; }
 
#bloc { float:left; width:989px; border:1px solid black; }
 
#ombre { float:right; background:url("/images/design/ombre.jpg") repeat-y; width:7px; height:100%; }

Pour couroner le tout, mon code devra fonctionner sur IE + Firefox (et pourquoi pas sur les autres nav, mais bon).

Quelqu'un aurait une idée ?
Le gagnant aura un bisou virtuel, et d'énorme remerciement

Merci à tous.

[c_s_s]

Bonjour,

Peut-être en mettant l'image de l'ombre directement en fond du bloc #zone.

Le CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
html, body { 
	margin:0; 
	padding:0; 
	height:100%; 
	background-color:#8a8a8a; 
} 
#zone { 
	width:989px; 
	height:100%; 
	margin-left:auto; 
	margin-right:auto; 
	padding-right:7px; 
	background:url("/images/design/ombre.jpg") repeat-y right top;
} 
#bloc { 
	border:1px solid black; 
	height:100%;
}

Le HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="zone">
   <div id="bloc">Texte <br /><br /> texte <br /><br /> texte <br /><br /> texte ......</div>  
</div>