Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder noneforit's Avatar
    Join Date
    Apr 2009
    Location
    England
    Posts
    268
    Thanks
    10
    Thanked 20 Times in 20 Posts

    Quick question about rounded corners

    Hello

    So i know there are two ways of getting rounded corner boxes.

    1. use small gif files and position with css
    2. Create a box in photoshop , apply it as background image using css and write the text over it

    Which is better?....the second one seems easier

    Cheers

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Setting a sigle image as a background is not a good idea, when we consider zooming the text from browser. Also, the image size may be larger in this case.

    Have you checked http://www.roundedcornr.com/ ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder noneforit's Avatar
    Join Date
    Apr 2009
    Location
    England
    Posts
    268
    Thanks
    10
    Thanked 20 Times in 20 Posts
    Thanks

    Have checked that but it streches the whole box accross the page and doesnt allow me to set the width for some reason?

  • #4
    New to the CF scene
    Join Date
    May 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Change the width=100% value in the css code.

  • #5
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    webkit and gecko browsers now work with rounded corners using css, btw. Can't recall if Opera does, too.

  • #6
    Regular Coder noneforit's Avatar
    Join Date
    Apr 2009
    Location
    England
    Posts
    268
    Thanks
    10
    Thanked 20 Times in 20 Posts
    Quote Originally Posted by churchman View Post
    Change the width=100% value in the css code.
    Tried that but it does not adjust the width of the whole image, it does something weird and makes the box looks like its got triangle sections cut out of the top and bottom centre.

    I guess this mite be work if I created a height and width specific div and placed the box divs inside this?

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello laurieballard,
    Here's a different take on a single image rounded corner box. It expands with the content you put in it. Demo at http://nopeople.com/CSS/slider/index.html
    Just view the source to see how it's done.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by laurieballard View Post
    Thanks

    Have checked that but it streches the whole box accross the page and doesnt allow me to set the width for some reason?
    You could set a width in CSS for the outer box. Can we have a link to your page or your code?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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