The pure ideal of XHTML+CSS design?

[dalangalma]

I've been a complete follower of the "Write clean XHTML and then stretch a CSS style over it" camp. I truly believe that's the way things should be done. However, when I try to make more complex designs (beyond the stereotypical "css look" boxes with dotted borders) I run in to serious trouble. There's no way for me to add the sorts of effects I want without cluttering up my HTML with extra, meaningless DIVs, I have to resort to CSS tricks like negative margins and stretching out DIVs to put non-tiling background images in them... it makes things all tangled again, defeating the very nice ideal of semantic HTML and clean CSS. What can I do? Is it possible to design sites with complex styles and keep my XHTML+CSS ideals? Or has this wonderful philosophy just plain failed in the real world? When designing a replacement for table-based layout, why didn't they at least make something that could handle the grid-based layout that tables provided? *sigh*

[S7even]

Some layouts can be achieved with CCS without the need to mess up your XHTML code. E.g. if you start with the XHTML code first and then style it.

But if you have a particular layout you want to achive and its a complex one, and you want to support a lot of browsers (i am not even talking about NN4) then probably you will have to add a lot of hacks, and several of those divs/spans.

[S7even]

Also, if you go with absolute positioning everything then browser support is quite good and you might not need a lot of hacks etc. But if your design is a liquid one, with floated elements etc, then its much harder.

[vgarcia]

Originally Posted by S7even

Also, if you go with absolute positioning everything then browser support is quite good and you might not need a lot of hacks etc. But if your design is a liquid one, with floated elements etc, then its much harder.

I disagree; I find floating easier to work with than absolute positioning. Both of them pale in comparison to my favorite, fixed positioning though .

[S7even]

Originally Posted by vgarcia

I disagree; I find floating easier to work with than absolute positioning. Both of them pale in comparison to my favorite, fixed positioning though .

I desagree Absolute positioning is better supported accross browsers than floating.

[Indicator]

Why don't you borrow some code from:

http://www.csszengarden.com - surely there are designs there that rival the best "old school" tabular designs on the web...

[Paul O'B]

Why don't you borrow some code from:

http://www.csszengarden.com

And don't forget sitepoints own contest :

http://contest.prestontalk.com/index/default/0/1/1/

I'm sure they'll be some ideas coming forward there.

[dalangalma]

I don't need to borrow code - it's not that I don't know HOW to do things, it's that I don't like how ugly the solutions are.

[pissant]

well first off, with css3 there is a lot more you could do
without upsetting your structure...
however until that is supported, we have to make do with messy structure!
Already with the css2 support in gecko and opera it is possible to doa huge amount of styling with very little presentational mark-up...
but there is that IE bugbear once more.
Basically we are in a middle period, we can't yet chuck off the shackles of presentational markup but we are becoming more able to than a couple of years ago...

[rmacca]

Originally Posted by dalangalma

I don't need to borrow code - it's not that I don't know HOW to do things, it's that I don't like how ugly the solutions are.

The designs at the CSS Zengarden don't use ugly solutions. One of the conditions of entering designs is that they can't modify the XHTML and I'm reasonably sure (correct me if I'm wrong though) that the css used are fairly minimal.

I'm only new to css designs but I've manage a couple of reasonable fluid css layouts without too much css trickery, although I'm not sure how they render outside of mozilla, ie5.5 and ie 6.

But I agree that CSS just isnt cabable of reproducing complex grid based layouts in the same way as tables.

[Paul O'B]

Hi,

Yes I agree it's a shame that all browsers don't represent the markup according to the standard but I still think CSS is much better than resorting to tables. (After all tables have their own quirks and are often interpreted differently in browsers.)

I try to think not how can I copy this table but how can I do it with css and how can I keep it simple yet innovative.

I hate the hacks we have to use (because I keep forgetting what they are) but I hate nested tables even worse. I think we just have to work with what we've got and hopefully everything will start to improve in the future (with any luck).

Paul

[DougBTX]

Originally Posted by dalangalma

When designing a replacement for table-based layout, why didn't they at least make something that could handle the grid-based layout that tables provided? *sigh*

They did But that's another thread

Anyway, I noticed when I started thinking about my own site's redesign that when I started using CSS/XHTML I had started to think much more about the page as HTML rather than as I wanted my visitors to see.

The trick to making any design is thinking about what you want it to look like, and that means forgetting about how you want to make it - atleast until you do start making it. (Granted that is unless you are going for the "dotted border look")

My philosophy then:

As long as I can read the page in notepad without having to skip past lage blocks of code*, then use as many divs and spans as you like to get enough to get a handle on for the CSS.

* so this is bad: <p style="font-family: Arial, verdana, etc, etc; font-size: 90%; color: #999"> etc but I feel happy doing this if I want a box with rounded corners: <span id="top"><span></span></span>


Later,
Douglas

[Winged Spider]

I almost stopped being a designer nowadays and instead have focused more on usability and standards. I like my designs simple now and barely spend any time in Fireworks anymore creating markup. You could almost say that for me "design is dead". Once I get my new sig up you'll see that all I pretty much use one CSS layout format and change it to my wishes. It works for me and it works for my visitors.

Client sites are a different story though. They always like to be pretty. http://www.nathansfamous.com/

I figure by keeping my developers and myself extremely fluent with one design I save tons of man hours each week making changes.

[DougBTX]

Originally Posted by Winged Spider

I [...] have focused more on usability and standards.

I would say that you have only just started to design then

Douglas

[vgarcia]

Originally Posted by DougBTX

I would say that you have only just started to design then

Douglas

IMO there's much more flexibility in CSS layouts than table layouts. You just have to break your ways of thinking if you've been doing table layouts for a long time.