- 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