SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    May 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Coding "transparent" image/content area

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

    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:

    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-->
    Code:
    #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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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

  3. #3
    SitePoint Member
    Join Date
    May 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry if my post was unclear

    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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think I'd need to see the "bigger picture" in both senses of the phrase

    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

  5. #5
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It sounds like you basically want a semi-transparent box with round corners that has a white border around all edges.
    Correct

    Quote Originally Posted by Paul O'B View Post
    What are the dynamics of the round content box. Is its a fixed height and width or is it expanding with content?
    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. #6
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot for your help, Paul O'B, I finally got this sorted with the help of the link you supplied


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •