SitePoint Sponsor

User Tag List

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

    Implimenting rounded corners and transparency

    ...
    Last edited by cjohnstone; Oct 9, 2006 at 07:36.

  2. #2
    SitePoint Enthusiast Northern Star's Avatar
    Join Date
    Aug 2006
    Location
    Cheshire, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi John,

    You can (like you righly stated) add additional HTML to the page so you can style it up... for example...

    Code:
    <stlye type="text/css">
    div#rounded {
         width: 500px;
         background: #CCCCCC;
    }
    div#rounded span.top {
         display: block;
         width: 500px;
         height: 15px; <-- the height of the image up until it stops rounding off ->>
         background: url(images/rounded-top.gif) no-repeat 0 0;
    }
    div#rounded span.bottom{
         display: block;
         width: 500px;
         height: 15px; <-- the height of the image up until it stops rounding off ->>
         background: url(images/rounded-bottom.gif) no-repeat 0 0;
    }
    div#rounded p {
         padding: 5px 10px;
    }
    </style>
    Code:
    <div id="rounded">
         
         <span class="top"></span>
    
         <p>Content in here</p>
    
         <span class="bottom"></span>
    </div>
    There are other ways of course, for example, if your div had a rounded top but a flat bottom then you might want to use...

    Code:
    <stlye type="text/css">
    div#rounded {
         width: 500px;
         background: #CCCCCC url(images/rounded-top.gif) no-repeat 0 0;
    }
    </style>
    Obviously, in these images I've reffered too the colors would make #CCCCCC where appropriate.

    Hope this helps.

    Andy


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
  •