SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict Bravogolf's Avatar
    Join Date
    Aug 2004
    Location
    All over really :)
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help achieving rounder corners

    Hi guys, am trying to get rounded corners in a div box using the sliding doors effect mentioned in a list apart. I can't get them to work on the div boxes on my mock up page shown here. I've got the images here.

    Help!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I can only see that you've linked to one corner image in your page so I'm nor really sure what you are up to. Even that one image you have placed incorrectly and it should be at the right position and not repeated.

    Code:
    #promobox.green h3 {line-height:normal; text-indent:20px;text-transform:uppercase; background:url('http://www.oneclearvision.org/website/website/images/corner_green_top_right_182x28.gif') no-repeat right top;}
    


    You can't used the format id.classname because ie6 and under don't understand it. You will just have to use .classname instead although you will have to qualify it with more weight if you need to over-ride any id applied styles.

    If you can explain on one section how you expected to place the corners then I will take another look but I'm not sure what you are doing exactly especially with all those missing images in the html.

    Round corners are pretty simple and you basically have to find a hook to hang your corners on and you will need a hook for each corner.

  3. #3
    SitePoint Addict Bravogolf's Avatar
    Join Date
    Aug 2004
    Location
    All over really :)
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, thanks for your detailed response. I've made a separate DIV here to try and get it working, I can get the images there but can't ge the darn thing to fit together For this demo, I've left the background a white colour so that you can see the images though when it's working the background colour will match the images. Any idea where I'm going wrong?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It looks as though you only have the bottom right corner misplaced. This is due to the bottom margin on the p tag pushing the rest away.

    e.g.
    Code:
    div.ArticleFooter p {
      background: 
        url(http://www.oneclearvision.org/website/website/images/corner_green_bottom_right_182x28.gif) 
      bottom right no-repeat;
      margin-bottom:0;
        }
    Is that what you meant or did you have other problems.

  5. #5
    SitePoint Addict Bravogolf's Avatar
    Join Date
    Aug 2004
    Location
    All over really :)
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you! How do I get the bottom right image to match up?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Just add some top and bottom padding to the p so that it fits.

    e.g.
    Code:
    div.ArticleFooter p {padding:3px 0;}

  7. #7
    SitePoint Addict Bravogolf's Avatar
    Join Date
    Aug 2004
    Location
    All over really :)
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right, sorry, almost there, I've tweaked it so that only the corner images are showing. Why is the left hand corner a little screwed?

    Really appreciate your help btw

  8. #8
    SitePoint Addict Bravogolf's Avatar
    Join Date
    Aug 2004
    Location
    All over really :)
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, ignore me, I got it


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
  •