#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Location
    Los Angeles
    Posts
    131
    Rep Power
    12

    css design principles related to rounded corners


    I have a basic layout that I'm working on right now (a gif is attached), but I can't figure out the best way to code it.

    I know the corners have to be gif images. That's easy enough. What I'm wondering, is whether the top and side sections can be div's with corresponding borders or if I'm going to have to use images all around the center div. I'd really like to use as little bitmap imagery as possible just to get used to working conservatively instead of just laying everything out with images.

    I'm still new to CSS layouts, and I've seen some good tutorials, but not much related to escaping the blocky look traditionally associated with them. I know a list apart has a good article on rounded corners, but it didn't seem to apply here.

    Thanks for your time
    Attached Images
  2. #2
  3. 4:04 Time Not Found
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2004
    Location
    Northern Virginia
    Posts
    2,273
    Rep Power
    338
    Well, since there are only two curved things on the page, you could cut them into squares and float them in the positions you need using ABSOLUTE positioning with layers. You could also make one tall rectangle, which contains both the rounded top & bottom, assuming that the light blue area isn't supposed to expand. You can't easily draw the curved lines in CSS, so you will have to convert that stuff to GIF files.

    just my 2 cents.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Location
    Los Angeles
    Posts
    131
    Rep Power
    12
    Hmm, I didn't think about absolute positioning, lol. I'm still used to the limitations of tables .

    On that note, are there any problems associated with absolute positioning? Browser slowdown or anything like that?

    Thanks a bunch
  6. #4
  7. 4:04 Time Not Found
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2004
    Location
    Northern Virginia
    Posts
    2,273
    Rep Power
    338
    the best way to think about tables is:
    Tables are for tabular data.
    Tables are not for layout.
  8. #5
  9. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Here are a couple of sites that may be helpful.

    http://www.vertexwerks.com/tests/sidebox/

    http://www.albin.net/CSS/roundedCorners/

    hth,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Location
    Los Angeles
    Posts
    131
    Rep Power
    12
    I understand what tables are suited for, I was just speaking of the fact that they're seldom absolutely positioned, so I hadn't thought of it.

    Thanks for the links, I'll be sure to check them out soon

IMN logo majestic logo threadwatch logo seochat tools logo