New home page

[Stephan Soller]

On 05.10.2010 04:28, Nick Sabalausky wrote:
> "Walter Bright"<newshound2 at digitalmars.com>  wrote in message
> news:i8d77c$1bf1$1 at digitalmars.com...
>> Stewart Gordon wrote:
>>> The layout breaks in anything but the default text zoom.
>>
>> The annoying thing about this is everyone says "don't use tables for
>> layout, use CSS." Except that using CSS for layout DOESN'T WORK RELIABLY.
>> With tables, I can get 3 columns that are actually 3 columns, not 3
>> columns that are a side effect of bugs in CSS.
>
> YES!! This is a pet peeve of mine (but then, what isn't? ;) ). I've even
> been meaning to write up a little article about it. For styling, CSS is,
> umm, acceptable. But it's crap for layout. And every argument I've seen
> against using tables for layout has been either extremely minor,
> questionable/uncited, or just plain bullcrap.
>
> Speaking of, if anyone has links to well-regarded "why you shouldn't use
> tables for layout" information, please post them. Whenever I get around to
> doing that little write-up I'd like to try to refute as much as I can. Or be
> proven wrong before making a bigger ass of myself. Either way :)
>

The point in not using the table _element_ for layout is that HTML 
should be used to define the _content_ of your page not its appearance. 
It's all about what kind of data you have at hand: a heading, a list, 
tabular data, a figure with an image, etc. It says nothing about how the 
page is supposed to look, it's just the pure content.

After defining the content the appearance is setup with CSS. And there 
table layouts are used pretty often (if not always). If you don't care 
about older IE versions you can use "display: table" and companions. 
Basically these display properties just make elements behave like the 
corresponding HTML elements (e.g. "table-cell" maps to the td element).

Prior to that CSS only had mechanisms for defining float layouts (the 
"float" property) but these can be used for table layout, too. It's not
that difficult but it's less flexible. All you need is a container with 
"overflow: hidden". To create columns inside it just set some child 
elements to "fload: left". This will look like this:

     -- overflow: hidden ----------------------
     |                                        |
     |  -- float: left --  -- float: left --  |
     |  |               |  |               |  |
     |  |               |  |               |  |
     |  |               |  |               |  |
     |  |               |  -----------------  |
     |  |               |                     |
     |  -----------------                     |
     |                                        |
     ------------------------------------------

This method works quite well, only IE 6 makes some trouble because the 
floats trigger some bugs (but if you add a few pixels of reserve space 
it will be all right for IE 6). The main drawback of this method is that 
the floated boxes are independent of each other, each gets its own 
height and with. If you want them to have a consistent layout you have 
to assign fixed widths and highs. There are some workarounds for this 
(e.g. using a repeating background image on the container) but I suppose 
I already talked to much about CSS.

Basically it's all about separation of content and presentation. It's 
not always easy (nor always necessary) but if done right you don't have 
to touch the HTML code for your next redesign (and the search engines 
are very happy about proper HTML code, too).

ps.: I'm usually only reading this newsgroup because I'm somewhat new to 
D. But I couldn't resist answering about CSS. ;)


Happy programming

Stephan Soller