SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 40
  1. #1
    SitePoint Enthusiast Gamblingharry's Avatar
    Join Date
    Apr 2003
    Location
    UK
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rounded Corners with CSS

    Im trying to convert my site to CSS, and have done virtually all of it but the rounded corners titles have me stuck.

    If you look my site, im talking of the titles in rounded blue boxes. The best version i could find at:www.albin.net, needs a div with the clear:both; tag. The problem with this is it drops the whole lot down below my right column which is float:right.

    Any other CSS roundedness i have missed? Those remaining <td> tags are getting to me!

    Thanks

    PS I dont even need rounded 'corners' as such, i just need to float the left image to the left, the right to the right, because my titles willl only be one line high (hopefully ). My current tables version just has one row - with the left and right images at each end cell and the text in the middle cell.

  2. #2
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Check out these links:
    http://www.xdevdesign.com/link_dir/s...t=all&type=all

    I like "Doug's easyCorners" myself.

    And try a search, tons of examples:
    http://www.google.com/search?hl=en&l...+%22corners%22

    -xDev

  3. #3
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Funnily enough I was just playing around with a way of doing it.

    Try this

    Keeps the XHTML pretty clean. No extra non-semantic DIVS floating around in there for formatting. No inline images. Scales nicely. Works in IE5+, Firebird, Opera etc.

    Uses a H5 at the bottom but that could just as easily be a P with an class.

    Saw that Albin method but the images are actually in the HTML which I don't think is a good result. For example, if you wanted to have a print style sheet, those corner graphic will still be floating around in the content, even though you may have turned all the colors and borders off to make it print clearly.
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable

  4. #4
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexW
    Funnily enough I was just playing around with a way of doing it.

    Try this
    I like Nice Work!

    You would want a header at the top anyway so it works great and is semantically relevant. I also like the "h5 a" trick with the bottom bg.



    If you get it up online you should give the url so I can put it in my dev links.

    -xDev

  5. #5
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xDev
    I like Nice Work!

    You would want a header at the top anyway so it works great and is semantically relevant. I also like the "h5 a" trick with the bottom bg.



    If you get it up online you should give the url so I can put it in my dev links.

    -xDev
    Thanks xDev. Will do.

    Got a bordered version in mind too. Just got to find somewhere to use it.
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable

  6. #6
    SitePoint Enthusiast Gamblingharry's Avatar
    Join Date
    Apr 2003
    Location
    UK
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool, thanks guys. Ill have to have a good look after work.

    AlexW, the bottom right rounded corner is about 12px or so away from the edge of the div, so the border carries on down the right hand side of it. This is in IE6/Win. Will have to look at that later too...

  7. #7
    SitePoint Enthusiast Gamblingharry's Avatar
    Join Date
    Apr 2003
    Location
    UK
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sweet, jus found this one from Kalsey, which looks good, might give this one a go.

  8. #8
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Gamblingharry
    Cool, thanks guys. Ill have to have a good look after work.

    AlexW, the bottom right rounded corner is about 12px or so away from the edge of the div, so the border carries on down the right hand side of it. This is in IE6/Win. Will have to look at that later too...
    On my version? Stange. Isn't doing it on any of the PC's here. :/

    The Kalsey version renders nicely (that's where my I got my graphics from as you can see), but again, you end up with an HTML document with two little decorative corner graphics floating in amongst the content, and two in the CSS file.

    I tend to look at it this way - the reason you're using CSS is to get the 'decoration' into a separate 'fluff' file. The corners don't tell you anything more about the content. They decorate it in the style your happy with at this time. Next year the content will be the same but you may be formatting it reds and oranges with bubbly edges. If those corners are still inline in the HTML, you are going to be forced to rengineer your HTML as well as your CSS. That's not the end of the world, but if there's a way to keep those HTML files clean from the start....
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable

  9. #9
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    OK, got another one.

    Try this one.

    Similar to the last one but can do 3d, graphicy edges. Relies on a specific 'content structure' (h4, p, h5), of course, but if you're spitting content out of a database you're locked into specific structures anyway.

    It's still a bit raw. Can't vouch for IE5 or Mac, but IE6, Mozilla and Opera 7 are good.
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable

  10. #10
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Actually, just tested it on IE 5 and IE5.5 and it's fine, and remarkably it's 90% ok on IE4.
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable

  11. #11
    SitePoint Zealot toograffic's Avatar
    Join Date
    Mar 2002
    Location
    Sarasota, Florida
    Posts
    192
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ooops!

    Quote Originally Posted by AlexW
    Actually, just tested it on IE 5 and IE5.5 and it's fine, and remarkably it's 90% ok on IE4.
    Cool 3D edges, but bottom right radius is out of place when I view it in IE6. Anybody else get that on their setup?
    The two most common elements in the universe are hydrogen
    and stupidity. - Harlan Ellison
    Retirement Communities and Senior Housing Options
    Freecycle.org

  12. #12
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hmmm,.... ..GamblingHarry said the same thing on the earlier version. It won't do it on any of our systems here, so it's hard for me to fix.

    Anyone go any ideas?
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable

  13. #13
    SitePoint Zealot toograffic's Avatar
    Join Date
    Mar 2002
    Location
    Sarasota, Florida
    Posts
    192
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just tried something that may give a clue. I use a two monitor setup - right monitor at 800X600, left at 1024X768. On right monitor, 800x600, I get the out-of-place image, but when I open the page on the 1024X768 it looks fine. So size does matter!
    The two most common elements in the universe are hydrogen
    and stupidity. - Harlan Ellison
    Retirement Communities and Senior Housing Options
    Freecycle.org

  14. #14
    SitePoint Member
    Join Date
    Nov 2003
    Location
    Sacrament, CA
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's true that two of the images are present in the HTML of my version, but they do have a class associated with them so print stylesheets can hide them.

    I like the concept of the bordered box. I spent half a day trying to get something like that to work for the BlogSnob site before giving up and going to border-radius and -moz-border-radius. CSS3-capable browsers and Moziila-based browsers will see the rounded corners and everyone else can live without.

    The problem with your implementation of the bordered box is that it doesn't scale well. The design breaks when font sizes get too large or the content increases. To keep up, you'd have to create ridiculously large background images.

    A problem I see with both of Alex's versions is that the technique only works for very specific types of layouts within the box. If you have a single paragraph of text, it won't work. Sure you can have empty paragraphs at the top and bottom, but then you might as well nest several divs inside.

  15. #15
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hey Adam, welcome,

    It's great to have another CSS tinkerer around.

    (Enjoyed your stuff on that comment spammer too )

    Granted on both points. I suppose you would have to look at the specific implementation, case by case to decide if any particular method was well suited to the job. In my case, I've tended to think in terms of the sort of side bar sections, and feature boxes we use on SitePoint, rather than full screen content boxes.

    On the 'scalability without ridulously large images' issue, I think I can solve that one still. Gotta think a bit more.

    On the structural constraints, while they're a bother, I don't see them as a killer. Worst case scenario: you use an extra div or span. Semantically clunky, yes, but it becomes invisible by deafult to anything that can't read CSS (in particular screen readers, PDAs, browsers with styles turned off, phones, etc). A screen reader is still going to want to explain to it's listener what this 'TR.gif' if it's inline in the HTML.

    Either way I don't think anyone has quite hit the definitive solution for CSS rounded corners yet (if such a thing exists in CSS-2).
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable

  16. #16
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by AlexW
    Either way I don't think anyone has quite hit the definitive solution for CSS rounded corners yet (if such a thing exists in CSS-2).
    As of CSS2, not really, though Eric Meyer has some cool tutorials on the topic. As Adam mentioned earlier, CSS3 has border-radius, but who knows when that's going to be supported .

  17. #17
    SitePoint Enthusiast Gamblingharry's Avatar
    Join Date
    Apr 2003
    Location
    UK
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That new one looks cool AlexW, thats on Mozilla here at work. Havent seen it in IE6 at home yet... One thing i did notice in IE6 is that the h5 at the bottom wasnt right aligned, whereas it was in Mozilla...

    Anyway, I think ive got a solution for the problem I have. Im just floating the left and right images, err, left and right :-), but they are in the CSS as a background and the divs just have a &nbsp; in them. Then i put my title in the middle. Ill have to get something up so you can see when i get home from work. Not a solution to the general problem with expandable height I know, but i did have an idea while here at work, ill have to try it later i ges...

  18. #18
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Vinnie, got any ideas on what the IE6 problem is for some users? Apparently the bottom curve is mis-aligned, but it won't do it for me so I'm shooting in the dark trying to fix it?
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable

  19. #19
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Nothing misaligned here on a brand spanking new IE6/Windows XP Home install that I'm about to trash , sorry Alex. Looks fine from where I'm sitting too

  20. #20
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,267
    Mentioned
    116 Post(s)
    Tagged
    1 Thread(s)
    It goes whacky in 800x600, and then again once I went back to 1024x768. The bottom right hand image gets thrown off-kilter. I'm using IE6 SP2, XP Pro SP1. I've attached an image to show it.

    And you know what it was? No doctype defined for the page so it was processing in quirks mode. Tsk, Tsk, Tsk. Forgetting the doctype......

    I attached another to show it fixed (throws the layout all off, but that matches the firebird layout so it must be OK now)

    -- Attachments Pending --
    Attached Images Attached Images
    Last edited by DaveMaxwell; Nov 13, 2003 at 17:59.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  21. #21
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Ah, well spotted Dave.

    Excellent
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable

  22. #22
    SitePoint Zealot
    Join Date
    Sep 2003
    Location
    UK
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi -
    I enjoyed all that, and reproduced your lovely 3d box Alex. I was wondering if anyone is still working on this stuff - specifically whether anyone has any ideas for a single line rounded box.

    For example, having a php generated date inside a nice thin lozenge. Or is that pushing it a bit?

  23. #23
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by steve_e
    Hi -
    I enjoyed all that, and reproduced your lovely 3d box Alex.
    Excellent, steve_e. I'd love to see it. I haven't actually found a job to use it in yet.

    Quote Originally Posted by steve_e
    I was wondering if anyone is still working on this stuff - specifically whether anyone has any ideas for a single line rounded box.

    For example, having a php generated date inside a nice thin lozenge. Or is that pushing it a bit?
    Can you maybe do a graphic of what it might look like?
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable

  24. #24
    SitePoint Zealot
    Join Date
    Sep 2003
    Location
    UK
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexW
    Excellent, steve_e. I'd love to see it. I haven't actually found a job to use it in yet.


    Can you maybe do a graphic of what it might look like?
    Yes, here's one of the graphics I did to try and visualize my front page. The thing I'm wondering is whether there is any way for the date box, the user id box and the search box to be created using css. The text for the date and the login name would be generated by php.

    http://www.foundation-stage.info/ima...ogged%20in.htm

    I'm not much good at CSS but I guess it would require something different as you couldn't use your h4 & h5 elements to attach the gif files to could you?

    It's midnight over here in the UK, so if you don't hear from me it's because I'm snoring!

  25. #25
    SitePoint Zealot
    Join Date
    Sep 2003
    Location
    UK
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, and here's the box I reproduced, for what it's worth. Don't look at the rest of the page, it's still taking shape - but your box looks nice doesn't it? It has taken that size from the content which was pulled in via a php include line from another file.

    http://www.foundation-stage.info/new...mplate.dwt.php

    I will probably make some more 3d corners to fit in better with the colour scheme you can see taking shape, and expect to have several more rounded corner boxes of one sort of another. But I'm still learning all this stuff, so it might take some time...

    Regards, Steve.


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
  •