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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Oct 2002
    Location
    California
    Posts
    98
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS for layout? (Ronald?)

    I've been seeing a lot on these forums about using CSS for layout instead of tables...I've been writing HTML for many years, and must admit I've never heard of using CSS for this...any good tutorials/instructions how to efficiently implement this?

    TIA!!

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    frankfurt, german banana republic
    Posts
    1,848
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #3
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    403
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Best CSS positioning tutorial I know of:

    http://www.brainjar.com/css/positioning/
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #4
    Regular Coder
    Join Date
    Jan 2003
    Posts
    680
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Not a tutorial but... Chris Casciano made this a year ago to demonstrate the power of CSS. He promised to make a new layout each day for a month. He didn't manage keep his promise but almost.

    Use the dropdown list and note that the HTML doesn't change. Just the CSS file that's linked to it.

    http://www.neuralust.com/~cac6982/index.php?sheet=07
    (o<
    //\ &nbsp; &nbsp; &nbsp; =^..^=
    &nbsp; &nbsp; $!

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,646
    Thanks
    1
    Thanked 0 Times in 0 Posts
    As you can see, CSS has it's very own set of display problems to contend with. What's kinda foo nee is that CSS fanatics claim that tables will soon be dropped when they just added them in version 4 browsers.


    (I set a mousetrap with a picture of cheese because I ran out. Unfortunately, I caught a picture of a mouse. )
    Last edited by zoobie; 01-17-2003 at 07:14 AM.
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    Ames, IA, USA
    Posts
    373
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Any CSS fanatic who says tables will be dropped is more of a nutcase.

    On the other hand, a CSS fanatic who says tables will be used for tabular information rather than page design is on the mark.


    Need more emoticons?
    Visit Catman's Private Stock

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think the bottom line is that CSS can't create the holy grail - a 3-colum layout where all the columns are flexible, relatively positioned, and don't overlap each other.

    It can't be done in CSS. Shame, but I admit I'm not really losing any sleep over it; I have little truck with the semantic arguments - if you keep your data in XML and transform on the server, the semantic purity of the output document becomes much less important; it depends on what you're doing - if you do a lot of DHTML to modify the document structure after loading, then it matters a lot more; if not, it scarcely matters at all.

    I think the only *real* problem with tables is that putting the whole page in one table makes it not display until the whole thing has finished loading, but you can easily get round that by splitting content into multiple tables - like this forum does.
    Last edited by brothercake; 01-17-2003 at 05:55 PM.

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    frankfurt, german banana republic
    Posts
    1,848
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hm, I can envision situations in which a CSS based column layout might be more flexible than the ordinary table markup. Suppose you want to have column A rearranged from left to right of column B. With tables, you're going to change each row and each cell. With CSS, it's a matter of adjusting some numbers for repositioning (ideally).

    Of course, as you said, if you rely on some kind of template layer between mere data and it's representation, it's not that much an issue as well.

  • #9
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    403
    Thanks
    2
    Thanked 32 Times in 32 Posts
    The problem with the debate of tables versus CSS is that everyone in it has a mind set that says everything is suppsoed to be blocked and laid out like a printed page.

    In the old universe of frames and tables a web page was two dimensional, and most layouts tended to be static. In the CSS/XML universe a web page is three dimensional and dynamic.

    Tables are no more suited to layout control than any other element. They go used because they were convenient, and there ws nothing else really suited to layout control without a lot of work.

    If the content is suited to tabular display then tables are fine and the content can be nicely presented by appling CSS, but most content can be give much richer presentation in three dimensions that allow you to drill down and see the insides of the contens and examine the sides. Only CSS gives the capability of presenting multiple facets dynamically, without much code.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #10
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Originally posted by brothercake
    I think the bottom line is that CSS can't create the holy grail - a 3-colum layout where all the columns are flexible, relatively positioned, and don't overlap each other.
    Sure it can. Assign widths all in percentages, then either float everything, or position: relative; them correctly.

    I've regularly done 3 columns for several templates...

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by jkd
    Sure it can. Assign widths all in percentages, then either float everything, or position: relative; them correctly.
    A layout like you describe lets the columns overlap each other in very small windows.

    Unless I'm much mistaken .... I'd like to see an exampe of what you're saying.

  • #12
    Regular Coder
    Join Date
    Jun 2002
    Location
    Ames, IA, USA
    Posts
    373
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This works in Netscape 6.2, 7.0, and IE 6.0 (the only browsers I have on my home machine):
    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Column Demo</title>
    <style type="text/css">
    div {
      border : thin solid #000000;
      float : left;
      margin : 1px;
      width : 30%;
      }
    </style>
    </head>
    <body>
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
    </body>
    </html>
    No overlapping and nicely sized.
    Need more emoticons?
    Visit Catman's Private Stock

  • #13
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I take it all back ...

  • #14
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,646
    Thanks
    1
    Thanked 0 Times in 0 Posts
    or here.
    Last edited by zoobie; 01-20-2003 at 02:29 AM.
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">

  • #15
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    My two cents...

    Since my name showed up in the original post (thanks Nick, it's a nice feeling being noticed! ), i'll give my two cents:

    CSS positioning isn't perfect, and it's use is restricted to newer browsers, and using tables may be easier to achieve certain layouts, but tables aren't meant for layout, there meant for tabular data. Also, excessive use of tables bloats a page's code, where CSS is more compact, when placed in an external style sheet doesn't add to a page's size, and can easily be used on many or all pages in a site.
    Furthermore, using tables for layout conflicts with the idea of separating content from presentation, placing what really should strictly be presentation in amongst the content of every page. Consequently, a change in layout means not a single change in a style sheet, but many changes on every single page.
    Using tables for a layout designed specifically for a certain device, say a browser on a PC, makes that layout less suitable or even useless for another type of device with different properties, whereas CSS offers a mechanism to use a specific style sheet for a specific device, making the content in a certain page available to a range of devices without having to change a single thing to it.

    If you are worried about older browsers, or have designed a layout that is in no way feasible in strict CSS, or don't give a hoot about other devices than browsers on PCs, tables for layout may seem an attractive solution, but be aware of the limitations.
    Maybe it's about time we got rid of old, non-standards-compliant browsers.
    Regards,
    Ronald.
    ronaldvanderwijden.com


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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