Sliding Window?

[herghost]

Hi all, I have been using this css as a sliding door technique for buttons.

a.button {
    
background: transparent url('../images/bright.png') no-repeat scroll top right; 
display: block;
float: left;
height: 35px; 
margin-right: 6px;
padding-right: 20px; 
text-decoration: none;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
a.button span {
background: transparent url('../images/bleft.png') no-repeat; 
display: block;
line-height: 22px; 
padding: 7px 0 5px 18px;
} 
a.button:hover span{
text-decoration:underline;
color:#00F;
}

 

What I am trying to do is create a window style instead (buttons vertical)

 

My two images have dimensions as follows

 

top image : 200x580

buttom image 200x8

 

Basically I have between 3-4 lines of text to go in each 'window' as well as an tweet this button.

 

Any pointers? I have been playing around trying to configure the door code for hours!

 

[haku]

HTML:

<div id="outer">
  <div id="inner">
    <p>Line 1</p>
    <p>Line 2</p>
    <p>Line 3</p>
  </div>
</div>

CSS:

#outer
{
  background:url(big-image.png) repeat-y;
}
#inner
{
  background:url(bottom-image.png) no-repeat left bottom;
}

 

Try that.