Fog Creek Software
Discussion Board




Real use of CSS

Sorry for posting here but I didn't where else to put this one and no it's not a .NET question.

In the latest comment from Joel he talks about how CSS permits to separate content and presentation. As a client/server programmer who dabbles in web projects from time to time for fun, I was never really able to see that CSS really delivers this.

The way I understand it, CSS are great for color and text styling but I don't see much what is does for layout. So basically, all my text styling and page colors are handled by my stylesheet but text, title and image disposition is all done in the HTML page and if I want to change my table layout, I have to rewrite each html page that contains the table.

Now maybe I don't know how to fully use CSS files and if such is the case, please ho please could any of you recommend a good (strike that) great book about using CSS inside out.

Thanks.

Philippe Asselin
Friday, June 18, 2004

with CSS, you don't have to use table layouts at all, or very seldomly, I find.

google for "CSS absolute relative position" and you should find some tuts

muppet is now from madebymonkeys.net
Friday, June 18, 2004

also the O'Reilly fish book is pretty good.

muppet is now from madebymonkeys.net
Friday, June 18, 2004

_Designing with Web Standards_ is a well-known book by the CSS guru Zeldman:

http://www.zeldman.com/dwws/

I personally learned CSS positioning by looking at examples and reading sites such as zeldman.com , mezzoblue.com , alistapart.com , and so on.

A good way to see what pure CSS positioning can do is www.csszengarden.com .  CSS can be a hard learning curve, but it's much better than tables for positioning. 

EAW
Friday, June 18, 2004

guess i need "http":

http://www.csszengarden.com

Also http://www.cssvault.com

EAW
Friday, June 18, 2004

I am with the CSS brigade to a point.

Everyone hates tables, because tables were a clunky way to position content (together with our dear favourite shim.gif) and hold a page together.

Enter CSS and everyone can stop using tables for layout. Great - but there seems to be this unholy rush to use it to replace tables for the sake of it.

All these designers* are saying - "Look - I can do a whole page without using a table. Look, I can show the periodic table of elements without using a table. I can show a table of statistics without using a table."

Tables a useful for, ahem, tabular information. I cannot see why people are so obsessed about throwing it together in a whole pile of positioned divs. If I am displaying a price list, there is no need to be able to shuffle the pieces around.

Tables for tabular data. CSS for layout. Commonsense in between.

*e.g. http://nemesis1.f2o.org/templates

Patrick FitzGerald
Friday, June 18, 2004

Absolute positioning?

That really sucks - you can run into a lot of problems when you start to try and use explicit pixel locations to position your stuff.

Things tend to get clipped and don't work right when someone uses larger or smaller fonts than you.

Also, it becomes hard to maintain the page, you have to be fiddling with a bunch of numbers on where stuff is at.

You start to use the benefits of the layout flow mechanism that is fundamental to HTML when you do too much of that.

CSS is more strongly suited towards applying visual styles to content rather than controlling all the aspects of layout of a page.

If you really want to transform the layout of something dramatically, then CSS is not the best way to do it - you need to do something like have the content stored in XML and transform it into HTML more dynamically, like with XSLT. Then you can modify the XSLT style sheet to really change the structure and layout of what is generated.

Michael
Friday, June 18, 2004

"Absolute positioning? That really sucks - you can run into a lot of problems when you start to try and use explicit pixel locations to position your stuff."

What really sucks is when you don't know what you're talking about. :-p

.someStyle {
  position: absolute;
  top: 2em;
  left: 6em;
}

Yes, it works. Yes, it's VERY useful. There are other units besides "px" in the CSS universe.

Brad Wilson (dotnetguy.techieswithcats.com)
Friday, June 18, 2004


I've found it extremely difficult to have CSS layouts look good in all browsers (especially pixel-perfect stuff).

I see no harm in using a plain table for layouting, just keep it's styling in the CSS.

A Pterodactylus Ate My Baby
Friday, June 18, 2004

CSS is 90% of the way to making table-based layouts redundant, but that last 10% is sadly lacking and hence trying to make it do what you want cross-browser (well, IE in particular) can be a very frustrating experience. Trying to get a three-column layout to really work and behave as well as a table-based solution would... aagh.

Bring on CSS3 I say.

Matt
Friday, June 18, 2004

I just wish the Web standards people would stop trying so hard to make it unnecessarily difficult to lay things out, with the justification of "separating form from content".  I mean, how are they helping people by making a 3-column layout nearly impossible, or writing a spec for margins/borders/padding that is so ambiguous that IE and Mozilla arguably both follow it, yet show completely different and often wrong output?

But hey, we shouldn't want "pixel-perfect" layout, how DARE we try to use the Web like a paper publication?  Except that, to be honest, that's all anyone ever really wants to do.

It'd be nice if we had the mythical ultra-configurable browser that, when fed theoretically perfect HTML with perhaps some CSS, could make any page appear like the New York Times or like a TGP gallery - but that browser doesn't exist, and never will, because it joins videophones and flying cars in the vast realm of "technology we could build, but nobody wants".

Trollumination
Friday, June 18, 2004

>  top: 2em;
>  left: 6em;

Sure, this is a lot better than using pixel positioning.

Now let me see you with a big document with 50 different sets of positions in it, and then try to insert something new to the left of something else to modify the layout.

Oh yeah, you have to go through and change a whole bunch of measurements because you have hard-coded the absolute position of everything.

That sucks too, for maintenence purposes.

I'm glad that you know about em units so that I can at least view your page on my large font screen, though, many designers that use absolute positions don't know how to do that properly.

Michael
Friday, June 18, 2004

THe bugs, Jim, the bugs!

Give it time, but right now, nope.

Sassy
Friday, June 18, 2004

Oh yeah, and using em units doesn't even solve all the problems.

Using absolute positioning means that your content won't flow to fit within the size of the browser. That means that people who have a higher res screen like me, have to type stuff into a small box with a bunch of white space around it like I'm doing right now, or someone who has shrunk the browser window down will be forced to scroll both horizontally and vertically to see your stuff.

It is not so great to treat your content as a bunch of fixed size content.

Use the layout flow mechanism of HTML, let your content fill or word-wrap to use the available space properly.

You can't do that when you use absolute positioning everywhere.

Also things get really interesting when you try to translate things and have to put some huge german text string in a place that you had previously measured as "3em", because the english words happened to take up just that amount of space. Now you get to do a completely new set of absolute coordinates for the german page - have fun.

The em units are great for other things, though, like being able to specify "device independent" padding and spacing that will stay proportional at higher font sizes. But fixing everything's left and top in one spot is not so great.

Michael
Friday, June 18, 2004

Lets pretend for a second that I cared about my sites rank in a search engine.  If I did it won't help me if the frist content a search engine sees is table tr nav link logo bannner more nav rows left nav bar etc then I finally get to my content area 1-2 k into the document.  If the search engine instead sees div id="content" and then a bunch of content and all that other stuff at the bottom of the page and reletively positioned I just shot up in my search rank.

Second pretend you are a design challenged developer.  You can set classes on all of your similar elements and when the site is done, or in the middle of development or just as a update to look and feel chage the way everything looks from one place and have a professional designer help you do it.

Why do we developers have such an easy time understanding why it is good to keep business logic seperate for data access logic but have a hard time figuring out why it is a good thing to seperate content from presentation?

K
Friday, June 18, 2004

"good to keep business logic seperate for data access logic "

Google on the origin of the term "n tier" and see how clean *that* debate is.

Philo

Philo
Friday, June 18, 2004

Often separating content, layout and style can be a wicked case of premature of generalisation: http://c2.com/cgi/wiki?PrematureGeneralization

Ask you self if you have a case *right now* to modify all 3 independently, if not I would put the idea on the back burner until you do.

Matthew Lock
Friday, June 18, 2004

http://www.opera.com

View Source.

www.MarkTAW.com
Saturday, June 19, 2004

Speaking of Google, go to Google and do a view source. A tiny bit of CSS, with the layout done by tables.

www.MarkTAW.com
Saturday, June 19, 2004

Absolute isn't just about positioning the complete page.  Frequently its useful to place objects relative to another but in an absolute place.

To understand CSS you have to understand the Box model and how boxes squish, or not, when placed together.  That IE totally breaks size calculations is a complication but in essence the Box model stands.

I've a bunch of assorted hacks and tricks to get CSS to appear to be the same in different browsers.  Fixing IE's CSS bugs would be my number one target.  And these aren't bugs in reference to mozilla, or Opera, they're bugs period.

Simon Lucy
Saturday, June 19, 2004

A couple of things...

Google doesn't need to place in a search engine and is a simple site in terms of design.  I do find it odd that they regularly use the evil font tag, one would think that it would be a place where style would be very appropriate . 

Once I've typed (assuming I would use the evil font tag) font color="#000000" family="arial, sans-serif" size="1.2em" more then three times it is certainly not a case of premature generalization to extract a class that contains that information.

As to the topic of content / layout / and presentation being seperated.  I would suggest that is is always appropriate to seperate content and presentation.  Layout remains to be seen but if your search engine rank is important to you it  behooves you to get your content as close to the top of the page as possible.

Lastly reletively positioned div based layout is quick and easy and it can save you loads of bandwidth.  The alistapart redesign of slashdot http://www.alistapart.com/articles/slashdot/ would save slashdot about 10GB of bandwidth a day assuming that the majority of users have already cached the css.  If it wasn't cached taking unneeded fonts and tables away only saves around 3GB of bandwidth a day.  Of course if all of your users are local on your LAN bandwidth is free, but for those of us who have to pay for bandwith..... Saving a few k a page adds up.

K
Saturday, June 19, 2004

I can assure you that CSS is not necessarily better than tables. First of all, in many situations CSS will not solve your problem, tables will. CSS will force you to think in a different manner and thus you will fail to complete your task in a timely fashion. Those who claim to be expert on CSS will not be able to solve your problems either, because CSS has some fundemental problems in its design.

My experience with CSS and HTML, and I should add that I had a lot of experience with it, shows that tables will stay here. The zealots who tell you that they want you to be standard complaint are simply put misinforming you. Tables are also standard complaint.

Christian
Saturday, June 19, 2004

*  Recent Topics

*  Fog Creek Home