CSS : manipulation du Height
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:
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:
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 :mouarf:
Merci à tous.
