CSS and layout

Bloke · 2010-07-23 13:11:10

This is probably old news to everyone else, but I stumbled upon Why CSS should not be used for layout today. I’m not a table-hater but I don’t much like tables for presentational markup if CSS can do it better. In some cases it can’t and there are times I get bogged down in doing it in what is perceived as the right way compared with the way that makes most sense (cf. last night’s forum request in this topic).

Yes I strive for separation of content and its presentation, but I think the author of the above article has some valid points to make when stating:

CSS is inextricably bound to the content

The arguments are quite compelling, even though that was early last year.

With HTML 5 around the corner (uuhhh, we hope) and TXP 5 as a kernel in the back of our minds I wonder if things have changed at all. Will the new crop of tags and CSS3 goodness make the separation better? Or are some of the tables we complain about in the TXP admin interface still actually the way that makes most sense after all? (images tab, menu system and a few other tables-in-tables places notwithstanding where they should definitely be stricken from the markup!)

Let the bunfight commence… :-)

Last edited by Bloke (2010-07-23 13:11:36)

jsoo · 2010-07-23 14:06:40

I’m not convinced. Background: I’ve long since found the “separate content from presentation” mantra to be overblown. It’s not that I think it’s good to include style declarations in content markup, rather that including layout hooks in markup is unavoidable. The notion of purely semantic markup doesn’t fly.

His argument is mainly that achieving layout goals can lead to abusing the order in which content elements are arranged. But tables simply substitute a different kind of abuse. He picks a layout for which tables work well, and then shows why that particular layout is hard to do without tables. But not every layout is suitable for tables. For example, a two-column layout with a pull-quote box floating between, overlapping part of each column.

colak · 2010-07-23 14:42:01

I guess that css3 and html5 will sort out some of these arguments. For example new css like

div {
column-count: 3;
column-gap: 20px;
column-width: 150px;
column-rule-color: #cccccc;
column-rule-style: solid;
column-rule-width: 1px;
height: auto; /* --- I wonder if this will work if one wishes to divide the text in 3 equal columns:) --- */
}

will help in further separating content from presentation. Working with tables for presentation could be as much as a nightmare as figuring out what’s wrong with your site in ie.

hakjoon · 2010-07-23 14:51:29

if browsers would start supporting the various table display properties pretty much most of the nonsense goes away. display:table-cell allows you to use div’s with the display properties of a TD (equal heights, flexible width) without needing the rest of the unnecessary table markup (no need for table, tbody, tr).

Anyone who longs for laying out things in tables has not been doing this long enough to remember how painful it was to lay out things with tables.

Last edited by hakjoon (2010-07-23 14:52:26)

jsoo · 2010-07-23 15:19:35

hakjoon wrote:

if browsers would start supporting the various table display properties pretty much most of the nonsense goes away. display:table-cell allows you to use div’s with the display properties of a TD (equal heights, flexible width) without needing the rest of the unnecessary table markup (no need for table, tbody, tr).

Is there any way to do colspan and rowspan in CSS table display? Without them, layout options are very limited.

Anyone who longs for laying out things in tables has not been doing this long enough to remember how painful it was to lay out things with tables.

:)

Bloke · 2010-07-23 15:31:17

Yep, agree with all that. I was playing devil’s advocaat (the drunken form of devil’s advocate) with my opening post, as I’m not promoting the use of tables. I’d rather the ones that are used for purely (oft lazy) layout purposes limp off into a corner, as I remember the pain they caused way back when I’d started tinkering with Netscape in ’94 and then wanted to alter something on my site. Argh!

I dont know enough about HTML5 (yet) to say whether it’s going to be a case of substituting one problem for another or if it truly will help to keep the separations as distinct as practically possible. If HTML 5/CSS 3 can solve the main problem cited in that article then we’re onto a winner and I’ll be there with the cane hooking non-tabular-data tables off stage by the neck.

This kind of came about because I want to have a variable number of list items in a container and have the last item in the list fill up all remaining available space in its container. Can CSS do that? Not really. At least not without 1kB of hacks for different browsers :-) I was searching for a way to do it and came across the article which made me think that maybe — in this case — a table would be the best solution because the final cell will do just that: stretch to fit. I suppose jQuery could do it on DOM ready too — I’ve used that trick before.

Then I wondered about the current 3-column layout of the admin side and what might happen if the sidebars were divs and they contained the variable quantity of (collapsible) content and what that might do to the surrounding content as things were switched on and off. Not that a 3-column layout is necessarily going to be the norm in TXP 5, I was just wond’rin’ is all.

Last edited by Bloke (2010-07-23 15:33:34)

thebombsite · 2010-07-23 19:45:34

Bloke wrote:

Not that a 3-column layout is necessarily going to be the norm in TXP 5, I was just wond’rin’ is all.

As the “Style” tab has already been reduced to 2 columns I find this a most intriguing statement Stef. You really must stop teasing like this. Now where’s a TXP 5 alpha when you need one? I’m surprised you haven’t asked me to “test” particularly as you know I don’t do things the way others do them. ;)

renobird · 2010-07-23 19:50:00

(rubs eyes + slaps forehead) Say Whaaaa???

hakjoon wrote

Anyone who longs for laying out things in tables has not been doing this long enough to remember how painful it was to lay out things with tables.

True. I had to help “fix” an old website for a friend yesterday – all tables. I nearly bashed my skull into a zillion pieces.

Last edited by renobird (2010-07-23 19:50:33)

Gocom · 2010-07-23 23:00:18

table:not(#list) {
	display: none;
}
table:after {
	content: 'Only for data that actually requires tables - tables';
}

Textpattern CMS

Textpattern CMS support forum

#1 2010-07-23 13:11:10

CSS and layout

#2 2010-07-23 14:06:40

Re: CSS and layout

#3 2010-07-23 14:42:01

Re: CSS and layout

#4 2010-07-23 14:51:29

Re: CSS and layout

#5 2010-07-23 15:19:35

Re: CSS and layout

#6 2010-07-23 15:31:17

Re: CSS and layout

#7 2010-07-23 19:45:34

Re: CSS and layout

#8 2010-07-23 19:50:00

Re: CSS and layout

#9 2010-07-23 23:00:18

Re: CSS and layout

Board footer