SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb The Holy Grail? New 3-Column CSS Design

    Hiya!

    Today I completely restarted my website design from scratch, in order to explore an idea I had for implementing 3 columns. Before I continue, I apoligize if someone else has already created this method, but if they have I was unaware, and I came up with this on my own today.

    The method I stumbled upon has the following features:
    • fluid header
    • fluid footer
    • fixed columns in em's (could used percents probably, haven't tried)
    • fluid content pane between columns
    • NN4 support (as good as it gets)
    • source ordering goes left-center-right
    • uses hacks only for NN4 support (and one for IE that shouldn't need to be there)
    • columns expand down to the footer (their bgcolor)
    • any column can be the longest
    I'm attaching a zip file with the full source code (I don't have a permanant host at the time) and I'll also add a bunch of links to my home server, but I can't guarantee this will be up and running 24-7.

    Example site:Please let me know if this is useful, if it works in your browsers, if it's original (that is, if something like this method already exists, let me know), and so on and so forth.

    Edit:

    The files are attached in ZIP format and will need to be approved before added to this message, so be patient.


    Edit:

    Posted too soon! Well it appears that in Mozilla Firebird and Netscape 4, the middle column does have to be the longest. In Opera either column can be but it adds a small white space under the header. I'll have to look a little more thoroughly into this and tinker with it some more.
    Attached Files Attached Files
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  2. #2
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It appears I have to do some more testing and tinkering. It doesn't work in IE5, but a box model hack may fix that. As also mentioned, the middle column has to be the longest in Firebird and NN4, but not IE6, Opera6, or Opera 7. We'll see if I can't get this working a little better Otherwise it's back to the drawing board (or in this case, reverting to the design I've already made using a different method)
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  3. #3
    SitePoint Member Ryan8720's Avatar
    Join Date
    Sep 2003
    Location
    USA
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It been around for a long time.

    http://www.glish.com/css

  4. #4
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'll notice my method is significantly different from those presented at glish (I just used that name in my title, probably adds more confusion though.. oh well).

    This one offers colored columns extending the full width of the page, NN4 compatability, everything fluid, etc.

    Now if only I could get it to work
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  5. #5
    SitePoint Enthusiast mrvnsk9's Avatar
    Join Date
    Sep 2003
    Location
    Tulsa, OK USA
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could also check out the W3C's layout. It uses a floating three column layout with a header and footer.
    http://www.w3c.org

    --Mrvnsk9

  6. #6
    SitePoint Zealot mr_invisibile's Avatar
    Join Date
    Nov 2003
    Location
    Vancouver, Canada
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    glish.com

    http://www.glish.com/css/

    excellent resource... been around a while, props to the man...
    btard deleted nostatus
    Page Rank: Great for selling ads to media buyers, otherwise it is worthless.

  7. #7
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep I remember seeing that one.

    What I was more attempting was more along these lines, except where any column could be the longest.

    When I found the layout I just mentioned though, I ended up using that, modifying the source order a bit as well as some other things. And then I'll use javascript to determine the middle column is indeed the largest.
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  8. #8
    SitePoint Zealot mr_invisibile's Avatar
    Join Date
    Nov 2003
    Location
    Vancouver, Canada
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't you also reckon that when you concentrate on the CSS definition you lose out on the aesthetic design lots?

    I mean it always looks really angular... right angled.
    btard deleted nostatus
    Page Rank: Great for selling ads to media buyers, otherwise it is worthless.

  9. #9
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well in my case at the moment, that's the look I'm heading towards. But if you want to do curved borders or image navigation, then you still can with CSS. It does become a little more tricky, and more than likely you'll have to bend the standards a bit (or use code in a way it wasn't originally intended to be used), but it is possible. Chances are you'll have extra markup in the page that isn't truly relevant to the content, but that all depends.

    If you code for more standards compliant browsers you can do wonderful things with CSS that are anything but boxy. Using borders to make a star shape, for example, or creating rounded borders with :before and :after, etc.
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  10. #10
    SitePoint Zealot mr_invisibile's Avatar
    Join Date
    Nov 2003
    Location
    Vancouver, Canada
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ucahg
    If you code for more standards compliant browsers you can do wonderful things with CSS that are anything but boxy. Using borders to make a star shape, for example, or creating rounded borders with :before and :after, etc.
    Hey

    Do you have any examples of non-boxy CSS styled pages?
    btard deleted nostatus
    Page Rank: Great for selling ads to media buyers, otherwise it is worthless.

  11. #11
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    • CSS/Edge
      Check out the curvalicious and slantastic demos.
    • http://css-discuss.incutio.com/?page=RoundedCorners A bunch of examples
    • http://www.livejournal.com/users/blufive/
      Only works in Mozilla But it's going to be in CSS3.
    • http://www.gavncal.demon.co.uk/blufive/
      Same as above.
    • http://www.alistapart.com/d/slidingdoors2/v1/ex8a.html
      Some good solid rounded tabs.


    These are mostly elements of pages, but if you combine them, you can get a nice rounded page.

    However, browser support is sketchy at the time, but it's a glimpse of what the future has to bring.
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  12. #12
    SitePoint Zealot mr_invisibile's Avatar
    Join Date
    Nov 2003
    Location
    Vancouver, Canada
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow - its quite cool that!!

    I'll definitely have a look into it a lot more now :S
    btard deleted nostatus
    Page Rank: Great for selling ads to media buyers, otherwise it is worthless.

  13. #13
    SitePoint Addict
    Join Date
    Sep 2003
    Location
    Europe
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ucahg
    http://www.livejournal.com/users/blufive/
    Only works in Mozilla But it's going to be in CSS3.
    Which means the poor people that are using IE (the greater majority still...) won't see any of this for the next three years.

  14. #14
    chown linux:users\ /world Hartmann's Avatar
    Join Date
    Aug 2000
    Location
    Houston, TX, USA
    Posts
    6,455
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    ucahg,

    I can't get to the site you are trying to display...


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
  •