- From: Vadim Plessky <lucy-ples@mtu-net.ru>
- Date: Sat, 19 Jan 2002 15:50:00 +0000
- To: "Robert Koberg" <rob@koberg.com>, "Christian Wolfgang Hujer" <Christian.Hujer@itcqis.com>, <www-html@w3.org>
- Message-Id: <200201191245.g0JCjiH31410@post.cnt.ru>
On Saturday 12 January 2002 13:01, Robert Koberg wrote: | ----- Original Message ----- | From: "Christian Wolfgang Hujer" <Christian.Hujer@itcqis.com> | > But tables are quite useful, especially for tables, though even I often | > abuse them for layout purposes due to the lack of other possibilities. | > (I know that I could do everything I do with tables with CSS instead, | > but | > also know that most browsers cannot display it) | | this is not true :) | | there are serious problems using CSS only to layout a page. | - you have to do kludgy workarounds to get a 3 column layout[1] | --- you need to use absolute positioning This is not true that you need to use absolute positioning for 3-column layout Please consider example below: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <style type="text/css"> #left_column { float: left; left:5px; top:50px; width:190px; border:1px solid #cccccc; background-color:#EDEDED; } #center_column { margin-left: 204px; margin-right:204px; border:1px solid lime; voice-family: "\"}\""; voice-family: inherit; margin-left: 206px; margin-right:206px; } #right_column { float: right; right:10px; top:50px; width:180px; border:1px solid #cccccc; background-color:#EDEDED; } </style> <body> <div id="left_column"> Left column text </div> <!-- moved text for the right column before center block --> <div id="right_column"> Right column text </div> <div id="center_column"> Center column text </div> </body> </html> | --- why do you want 3 (or more) columns? becuase you want to get | information 'above the fold' (like a newspaper) | - you cannot do a decent layout with more than 3 columns (that is, where | the two outer columns are fixed and the inner columns vary on browser you can have any number of blocks (columns) on left side, using {float: left}, and any number of blocks (columns) using {float:right} If you want more flexibility: use display: inline-block from CSS3, it's supported by MS IE6/Windows and MacIE5. (you may want to convinience Mozilla hackers to support it too in Mozilla 1.0 release) | width). - if you do a 2 or 3 column layout you need to use font-sizes set | to px so the user cannot resize text, otherwise it will eventually overlap | the other columns if sized-up. | | The only way to create a page that is 'usable' by a wide audience is to | use tables! Tables allow larger text to wrap without overlapping and allow | however many columns you want. Sure it is lay out, but how would you do Tables decrease usability / accessibility of web sites, and should not be used for layouting! Tables are designed for *data represented in Table format*, that's it! | these types of layout with CSS and keep them usable? | | best, | -Rob | | [1] kludgy css for 3 column layout [ cutted example ] -- Vadim Plessky http://kde2.newmail.ru (English) 33 Window Decorations and 6 Widget Styles for KDE http://kde2.newmail.ru/kde_themes.html KDE mini-Themes http://kde2.newmail.ru/themes/
Attachments
- text/html attachment: needs some adjustment - move right block before center block
- text/html attachment: adjusted example
Received on Saturday, 19 January 2002 07:46:32 UTC