Could someone please help me fix this rather large pain in my backside?

 

This is what I'm trying to code: http://tinypic.com/r/e1fevl/5

 

This is where I'm at: http://tinypic.com/r/210ye7d/5

 

The second image shows the bottom of a "semi-transparent" box, which should have the leaf image behind it.

 

My issues: Forming the border on the box (which has a rounded edge, so the usual { border: ; } doesn't apply), and placing the leaf image "behind" the box. I have absolutely no idea where to start with either of these problems..

 

Code:

 

<div id="right" class="content">

<div class="br"><div class="bar"><div class="tl"><div class="tr2">

<h2 id="offer">i offer...</h2>

<div id="right-ul">

<ul id="treatments">

<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>

</ul>

<a id="moreLink" href="treatments.html">more...</a>

</div><!-- right-ul ends-->

</div></div></div></div>


</div><!-- right div ends-->

 

#right {
background-color: #f2f7f3;
color: #8ca191;
float: right;
width: 46%;
height: 300px;
margin-top: 20px;
font-size: 13px;
letter-spacing: 0.2em;
}

 

Thanks a lot in advance!

Thanks for the reply, rallport, will give that a shot

 

How would you suggest I add the border to the box, using your method?

For the main content area you would be able to do something like this...

 

#area {

background-image: url(images/transparent.png);

border-left: solid 1px #000000;

border-right: solid 1px #000000;

}

 

 

Then you will need to add to the top with the curve and bottom, it depends on two things how you would do this...

 

Either

 

a ) If you know the width of the area and it will never change, then you can create one image on the top with a curve and add the border directly to the image making it 2px wider than the content area below. (repeat for top and bottom)

 

or

 

b ) you will need to create corner images and a top image so the box can extend width wise.

 

[ left top ] [ stretchy top middle ] [ right top]

 

[ stretchy content area ]

 

[ left bottom ] [ stretchy bottom middle ] [ right bottom ]

 

Just imagining they are images then it would look something like that.

Finally managed to fix this!

 

Thanks a lot for your help, guys