Coding "transparent" image/content area

HTML & CSS
1

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

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!

2

Hi,

Can you clarify exactly what you need as I’m not quite sure what the problem is?

I can see this image which has a background of a leaf shape and on top of that is a rounded button with the word “more inside it”.

I would just make the rounded button as a single image in the background of an anchor and center the text inside it. The button is big enough not to look too bad if text is resized.

The leaf would simply be a background image on a parent div. The button could then be moved into position with margins as appropriate.

I feel I may be missing something important here or have not addressed the question you were asking :slight_smile:

3

Sorry if my post was unclear :slight_smile:

The image I posted represents a slice of a “semi-transparent” content box (with white border), which covers the leaf image.

My problem lies in coding the box with the border, as the box has rounded edges, and then in positioning the leaf image “beneath”.

Hope this clarifies things a bit… :\

4

Hi,

I think I’d need to see the “bigger picture” in both senses of the phrase :slight_smile:

I can’t see a round content box so I assume that you didn’t show it in your slice and that the round corners are off screen somewhere in that pic.

What are the dynamics of the round content box. Is its a fixed height and width or is it expanding with content?

It sounds like you basically want a semi-transparent box with round corners that has a white border around all edges. If so then you would need to create it in many pieces and you could probably follow the example here and in place of the images use your own transparent images instead. You cannot create unlimited height and width objects with that approach but it will be fine for most uses unless your content box is going to be massive.

If I’m off target again then I may need to see the whole picture of your design to help.

Sounds a little fiddly either way but not impossible :slight_smile:

5

Correct :slight_smile:

It’s a fixed size box, so am crossing my fingers that your suggested method will help.

Thanks a lot, will be back if I can’t get it to work!

6

Thanks a lot for your help, Paul O’B, I finally got this sorted with the help of the link you supplied :slight_smile: