Podział elementu. Opcje

[pietrov8]

Witam.

Mam takowy problemik.

Mam box z zaokrągleniami oraz z cieniami u góry i dołu. Teraz chcę by ten box był maxymalnie rociągalny w osi Y.
I zrobiłem to tak:

[HTML] pobierz, plaintext 
<div class="box">
   <div class="top"></div>
   <div class="center"></div>
   <div class="bottom"></div>
</div>
 
 
.box{
width:900px;
margin: auto;}
 
.box .top{
width:100%;
float:left;
background:url("top.png") no-repeat;
height:23px;}
 
.box .center{
width:100%;
float:left;
background:url("center.png") repeat-y;
height:1px;}
 
.box .bottom{
width:100%;
float:left;
background:url("bottom.png") no-repeat;
height:60px;}
[HTML] pobierz, plaintext 

I wszytsko jest ok. tylko bardzo chciałbym by tekst nie zatrzymywał się na 60px od dołu tylko wchodził na te tło z clasy <i>bottom</i>. Próbowałem użyć atrybutu marin-top:-40px; lecz wtedy tło zasłania tekst.

Jakieś pomysły na rozwiązanie tego problemu?? Lub może inne sposoby na poradzenie sobie z takimi boxami??

Z góry dzięki.

[Crozin]

Tak. CSS i border-radius + box-shadow.

PS. Robiąc takie coś z obrazów powinieneś mieć mniej-więcej taką strukturę:

[HTML] pobierz, plaintext 
div.top
  div.bottom
    div.content
      ...
    /div
  /div
/div
[HTML] pobierz, plaintext