Alors voila mon problème.
Mon objectif :
Mon rendu actuel (avec le coin de l'image qui dépasse, en haut à gauche):
L'image utilisée en haut de block :
J'ai le code HTML suivant (dans la mesure du possible, j'aimerai ne pas le modifier) :
<div class="repeat">
<div class="top">
<div class="bottom">
<img src="Resources.File.jpeg" alt="illustration de test"/>
<div class="content">
<p>Coucou</p>
<p>C'est moi</p>
</div>
</div>
</div>
</div> |
Et enfin, mes css :
body {background-color: #EAE6D1;}
img {
width: 366px; height: 58px;
padding: 1px 0 0 2px;
position: relative; z-index: 1;
}
div {width: 556px;}
div.top {
background-color: white;
background:transparent url(top.gif) no-repeat scroll 0% 0%;
position: relative; z-index: 2;
}
div.repeat {
background:transparent url(repeat.gif) repeat-y scroll 0% 0%;
margin:0pt 0pt 10px;
width:556px;
}
div.bottom {
background:transparent url(bottom.gif) no-repeat scroll center bottom;
height:auto !important;
min-height:100px;
}
div.content {padding: 5px;} |
Quelqu'un saurait pourquoi je n'arrive pas à changer cet ordre de superposition ?