SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 36 of 36
  1. #26
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DougBTX
    Using ul elements for the design do not make sense here; the same reasons not to use tables for layout apply to using unordered lists for table layouts.
    I somewhat agree. But from an accessibility standpoint, I think it would be better accomplished using lists, perhaps a list of a list. Isn't any tabular data really just a series of lists (a list of lists)? Each column in a table is just a list member of a certain type.

    The main reason I pursued it for awhile today is that I can't believe any message board looks good on a handheld... you'll have to scroll right to see the whole table or else the text will be squished in the columns. So, I wasn't trying to abolish tables just for the fun of it.

    Message board design is kind of an interesting paradigm... the designs were born from the fixed width display of the BBS of old but matured in the age of html tables... and remember the first message boards on the internet? Yep... lists. A lot of mail/message archives still work that way.

    -Rich

  2. #27
    SitePoint Member
    Join Date
    Jun 2003
    Location
    Los Angeles
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, again for posterity, here was my latest stab at it:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--<meta http-equiv="refresh" content="15" />-->
    <title> </title>
    <style type="text/css">
    body {font-family: Arial, Helvetica, Sans-serif; font-size: 10px; background: #fff; color: #000; }
    img {border: 0; }
    
    .forumtype {background: #003366; color: #fff; font-size: 16px; font-weight: bold; 
                    padding: 2px; margin: 0; vertical-align: middle; }
    .forumsponsor {text-align: right; }
    
    .rowCategoryOdd {background-color: #DBE2ED; border-bottom: 1px solid #fff; vertical-align: middle;}
    .rowCategoryEven {background-color: #EBEFF4; border-bottom: 1px solid #fff; vertical-align: middle;}
    .columnForum {width: 50%; float: left; padding: 5px 0px;}
    .columnPosts {width: 5%; float: left; padding: 5px 0px;}
    .columnThreads {width: 5%; float: left; padding: 5px 0px;}
    .columnLastPost {width: 35%; float: left; padding: 5px 0px;}
    .columnArrow {width: 5%; float: left; padding: 5px 0px;}
    
    .spacer {clear: both;}
    
    </style>
    
    </head>
    <body>
    
    <div class="rowCategoryEven">
    	<div class="spacer"><!-- Spacer Hack --></div>
    	<div class="columnForum">Topic</div>
    	<div class="columnPosts">Posts</div>
    	<div class="columnThreads">Threads</div>
    	<div class="columnLastPost">Last Post</div>
    	<div class="columnArrow"><!-- empty --></div>
    	<div class="spacer"><!-- Spacer Hack --></div>
    </div>
    
    <div class="forumtype">
            Design Your Site
            <span class="forumsponsor">
                    Proudly Supported By <img src="onsmartsmall.gif" width="100" height="28" alt="onsmartsmall.gif">
            </span>
    </div>
    
    <div class="rowCategoryOdd">
    	<div class="spacer"><!-- Spacer Hack --></div>
    	<div class="columnForum">Just Starting Your Design (4 Viewing)</div>
    	<div class="columnPosts">30,514</div>
    	<div class="columnThreads">4,300</div>
    	<div class="columnLastPost">PDF versus word Today 08:21 (Mongoloid)</div>
    	<div class="columnArrow"><img src="arrow.gif"></div>
    	<div class="spacer"><!-- Spacer Hack --></div>
    </div>
    
    <div class="rowCategoryEven">
    	<div class="spacer"><!-- Spacer Hack --></div>
    	<div class="columnForum">Testing blah (0 Viewing)</div>
    	<div class="columnPosts">3,514</div>
    	<div class="columnThreads">30</div>
    	<div class="columnLastPost">PDF versus wordasdfas Today 08:21 (Mongoloid)</div>
    	<div class="columnArrow"><img src="arrow.gif"></div>
    	<div class="spacer"><!-- Spacer Hack --></div>
    </div>
    
    <div class="rowCategoryOdd">
    	<div class="spacer"><!-- Spacer Hack --></div>
    	<div class="columnForum">Just Starting Your Design (4 Viewing)</div>
    	<div class="columnPosts">30,514</div>
    	<div class="columnThreads">4,300</div>
    	<div class="columnLastPost">PDF versus word Today 08:21 (Mongoloid)</div>
    	<div class="columnArrow"><img src="arrow.gif"></div>
    	<div class="spacer"><!-- Spacer Hack --></div>
    </div>
    
    <div class="rowCategoryEven">
    	<div class="spacer"><!-- Spacer Hack --></div>
    	<div class="columnForum">Testing blah (0 Viewing)</div>
    	<div class="columnPosts">3,514</div>
    	<div class="columnThreads">30</div>
    	<div class="columnLastPost">sdsddfas Today 08:21 (Mongoloid)</div>
    	<div class="columnArrow"><img src="arrow.gif"></div>
    	<div class="spacer"><!-- Spacer Hack --></div>
    </div>
    
    </body>
    </html>
    It has its obvious drawbacks... but it's a little bit closer.

  3. #28
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by boringguy
    (a list of lists)
    But it isn't. Table columns and rows can have headers. There is a summary="" attribute for tables to tell screen readers what the table is all about. You can't do that with lists.

    Not to mention the fact that rowspan and colspan are so easy to use.

    I can't believe any message board looks good on a handheld...
    The thing is... they look fine. I can browser forums on my handheld without any problems. By default it uses a proxy server to strip table tags out of web pages, so everything fits inside the width of the display anyway.

    And if that doesn't work, you can always get Opera which has Small Screen Rendering: it will make any website work without horizontal scrolling. Just for the fun of it, I pressed Shift+F11 just now, and am typing in a box about 200 or so px wide. No problems at all. This forum is quite easy to read in that format. (Yes, go get it now and use it as you main browser. It is just too good. And I just found out that Ctrl+F11 turns off the menu bar. I'm sure that will please the maximum-screen-space people )

    Move to styling lists, and anything could happen.

    Using XHTML doen't really make much differnce back in the real world... atleast not today's real world.
    Hello World

  4. #29
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Quote Originally Posted by infect
    It has its obvious drawbacks... but it's a little bit closer
    Yes it jumps up and down like a yo-yo in ie lol

    You need to reduce a width by a percent or so due to ie's rounding bug which causes the page to bob up and down on each odd pixel as the screen is resized.

    As I previously mentioned this is about as close as you can get (without gettting too complicated).

    http://www.pmob.co.uk/temp/listtable3.htm

    Obviously take note of what doug is saying as he usually makes a lot of sense

    Paul

  5. #30
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    meh.

    This is the second time that you've posted a request and I've just gon and done it properly against the "rules"

    I'll try and amke a habit of it

    To make it "accessible" all the colums should have their own <th> saying what is in the column... and it could probably do with some <tbody> tags, but that would just be silly.

    Code:
    <!DOCTYPE html PUBtdC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Test tdst laid out as table</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body {font-family: Arial, Helvetica, Sans-serif; font-size: 12px; background: #fff; color: #000; }
    img {border: 0;}
    table { width: 100%; margin: 0; padding: 0; }
    th {background: #003366; padding: 5px; color: #fff; font-size: 16px; text-align: left; font-weight: bold; margin:2px 0; tdne-height:30px; }
    td {background: #EBEFF4; padding: 6px 5px; }
    .even td {background: #DBE2ED;  }
    </style>
    </head>
    <body>
    <table cellspacing="1">
    <tr>
        <th colspan="6">Design Your Site Proudly Supported by Someone</th>
    </tr>
    <tr class="even">
        <td><a href="">Just Starting Your Design</a> (4 Viewing)</td>
        <td>30,514</td>
        <td>4,366</td>
        <td><a href="">PDF versus word</a> Today 08:21 (Harry)</td>
        <td><a href="">last</a></td>
        <td><a href="#">......</a></td>
    </tr>
    <tr>
        <td><a href="">Just Starting Your Design</a> (4 Viewing)</td>
        <td>30,514</td>
        <td>4,366</td>
        <td><a href="">PDF versus word</a> Today 08:21 (fred)</td>
        <td><a href="">last</a></td>
        <td><a href="#">......</a></td>
    </tr>
    <tr class="even">
        <td><a href="">Just Starting Your Design</a> (4 Viewing)</td>
        <td>30,514</td>
        <td>4,366</td>
        <td><a href="">PDF versus word</a> Today 08:21 (Fred)</td>
        <td><a href="">last</a></td>
        <td><a href="#">......</a></td>
    </tr>
    <tr>
        <td><a href="">Just Starting Your Design</a> (4 Viewing)</td>
        <td>30,514</td>
        <td>4,366</td>
        <td><a href="">PDF versus word</a> Today 08:21 (harry)</td>
        <td><a href="">last</a></td>
        <td><a href="#">......</a></td>
    </tr>
    </table>
    </body>
    </html>
    Douglas
    Hello World

  6. #31
    SitePoint Member
    Join Date
    Jun 2003
    Location
    Los Angeles
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DougBTX
    meh.

    This is the second time that you've posted a request and I've just gon and done it properly against the "rules"

    I'll try and amke a habit of it

    To make it "accessible" all the colums should have their own <th> saying what is in the column... and it could probably do with some <tbody> tags, but that would just be silly.

    Douglas
    So are you saying this would be the "proper" way to do it using a hybrid of CSS and tables? I must admit, the code is clean.

  7. #32
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by infect
    So are you saying this would be the "proper" way to do it using a hybrid of CSS and tables
    For this type of information, Id have to agree with doug and say yes

  8. #33
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by infect
    So are you saying this would be the "proper" way to do it using a hybrid of CSS and tables?
    Yes.

    The only "presentation" thing in the HTML is the cellspacing="0" part, as there is not a real CSS replacement. In some browsers thare are ways, but generally speaking the HTML solution uses less code, is easier to read, and works in more browsers. It also validates as XHTML Strict.

    When I said that <tbody> was "silly", I only half meant that. If you use <thead>, <tbody> and <tfoot> on long tables, they print better because the browser can know to repeat the header on each new page. I'm not sure how good browser support is for this.

    If you really want to use a table for layout of non-tabular data (like three columns in a website) then just shove in a summary="" attibute, keep the table tags as clean as possible, and you should be fine.

    There are some solutions to getting tables to do the html-in-order-of-importance-for-accessibility things which CSS is so good at, though I won't go into them at the moment. Uses a couple of empty cells at the top of the table and a rowspan="2" in the main content area to get the thing working.

    PS: I'm about to go and get very drunk, see you in the morning

    Later,
    Douglas
    Hello World

  9. #34
    SitePoint Member
    Join Date
    Jun 2003
    Location
    Los Angeles
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I just wanted to say thanks to everyone who helped me out in this thread! Your time and expertise is much appreciated!

  10. #35
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by infect
    So are you saying this would be the "proper" way to do it using a hybrid of CSS and tables? I must admit, the code is clean.
    And if I may add the only 'legal' and 'semantically correct' way.

    If there ever was a 'table' it is these forums. The spec says 'use tables for tabular data'.

    End of story.

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  11. #36
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Off Topic:


    Not really offtopic but have a look at this weeks quiz for a bit of fun :
    http://www.sitepoint.com/forums/showthread.php?t=172472

    (which is why I didn't post the correct css solution above)



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
  •