Slashdot Mirror

Yup!

I like to use csszengarden as a counter example (it kinda pisses off the css fanboys too, so added bonus!).

Go to the site, pick 5 random designs. Then try resizing your browser window and seem how many of them are still usable (hint: not many). Breakage ranges from information not displayed with no scrollbar to outright failure where all the elements are pushed off the page.

I randomly picked one: http://csszengarden.com/219/

I'll admit, this is impressive visually (although major form over function, as a way of conveying actual information it's pretty bad). They've even done some resize handling, such that it adjusts itself and provides scroll bars if you make the browser narrow horizontally or small but still mostly rectangular. This is better than most! But then we try keeping the browser wide and making it narrow vertically (I actually do this quite often if I'm monitoring something in the background while reading something), and we have content cut off with no scrollbars!

Three things can be taken from this:
1) In CSS, scaling is not at all automatic as it would be with tables, it's something you specifically have to design for
2) Even when you do design with scaling in mind, it's still easy to miss something
3) You didn't get this shit with tables.

Now I'll grant you that complex designs like 219 probably wouldn't be feasible with tables, but I still hold that CSS introduced a lot more problems then it solved, and they still plague us.

I say keep the formatting parts of CSS, ditch the layout and replace it with something sane, preferably detached from the content (actually detached, not just "kinda").

But I am puzzled why, in this age of CSS, Slashdot needs to replace the classic look with a new design. Why not different style sheets? Show classic, new, and even other layouts, with the click of a link, whatever people prefer. Produce a half-dozen user-selectable layouts and make everyone happy.

A bazillion times this.

Content management systems from about a decade ago allow to change the full layout of the site by chaning the template is rendered from. In a very customized site, with complex content, that may be not possible, but just chaning a bit the way the final content is rendered should be enough for the largest piece of the user base. We've all know the CSS zen garden. With just allowing serving different CSS file for the exact same HTML, the site looks completely different.

In my case, just a simple change to make the comments more readable would shut me up, and I think that is for the majority of the users.

PS: as anonymous coward because after I logged in several times and browsing just fine, I'm back again unauthorized on this post only. :-(

display it all on the client as a pre-formatted page, with absolute coordinates

Funnily enough, that reminds me of some CSS Zen Garden entries. This one, for example, which requires the user stylesheet not to set any font sizes.

No not really. CSS was a bit of a hack as a language. I've seen worse. Have you ever seen IBM's Job Control Language (JCL)? Compared to JCL, CSS is positively sublime. Now to be fair, JCL positively is a train wreck. As hacks go, its an absolute hack. In most languages, you have parts that when created, work with other parts of the language. Not so JCL. A single piece works as an add on to one other piece. If you want to do something similar somewhere else, you need something else over there (or there is nothing else over there). Go ahead and check wikipedia for JCL. The examples they give are *very* user friendly (try not to gag). If you cant to get better with CSS, check out the CSS Zen Garden.

CSS is about separating content from design. That's the point. Go to CSS Zen Garden ( http://csszengarden.com/ ) to see what that means. Every example on that web site uses the exact same content. Only the CSS is changed.

It is not a "developer" vs. "designer" situation. It just makes practical sense for development and maintenance of a site. If you use tables for layout, your site has become extremely difficult to update if you want to make major changes to the layout, especially with large, multi-page sites. With CSS, you change your stylesheet and it's done, site wide (see the CSS Zen Garden examples). The developer can concentrate on content and function, and leave the layout to the designers.

I'm not sure if you're being facetious or not, but CSS is far, far more powerful than you seem to think. Check out this site to see what can be done without changing a single line of HTML:

http://www.csszengarden.com/

Also, if you're still writing php spaghetti code, I would highly suggest you check out some modern templating engines. They will make your life so much easier. I don't use PHP that often anymore, but I understand Smarty is still popular.

I also recommend the poster look at an example of how just changing the CSS can dramatically change the appearance of the size: CSS Zen Garden. Their HTML has maybe a few too many divs and spans (they did this to make it easier for designers to apply new styles) but it's a great demonstration of what CSS can do for you.

http://csszengarden.com/

Look at these templates. Not one of these uses Javascript and they are amazing. They are functional.

They don't have the same level of backend code pushing that you see with JS topheavy sites, but they also don't have a lot of the annoying "features".

Google for example has a semi-new feature that when you press scroll down the JS captures your keypress and pushes your focus to the next search result. This is horrible and I don't see a way to disable it. When I press downarrow I want to scroll down a little bit. So here is a UI decision Google made for me.

Why the hell would we let a website decide how our UI experience is going to work? Shouldn't we be making those decisions ourselves and relying on our own methods for this kind of interaction so that we get what we want?

The best browser money can buy will have the following features (it doesn't exist yet):

- Keeps the web simple
- Converts video media like flash and html5 on the fly to its own standard without any lag or adverse effects
- Reinterprets every website as content, ads, forms, UI, and organizes these into preset methods developed by the user
- Conforms to standards set by the user, and fully controlled by the user

That does not mean content and presentation are separated.

If it renders properly in Basic Page Style or in Lynx they certainly have done something right.

Those pages will still contain a ton of divs that are there only to support the presentation.

A few more <div>'s aren't really that big of a deal, when you not use them in the CSS, they are simply invisible. Also in pre-HTML5 there is just no proper way to markup some structures, HTML5 fixes that a bit with its <nav>, <article>, <aside>, etc. tags. But most lists these days I encounter really are proper <ul>s, not just some <div>s with decoration. The webpages that are just build out of <div>s are really shrinking quite rapidly.

The basic problem however is simply a different one, just look at http://www.csszengarden.com/, its clean HTML, allows complete restyling in CSS and completly fails when you browse with 200% text size. As a normal user you gain almost nothing from clean markup, as it doesn't result in a flexible page layout, in fact it makes things worse, old table style layouts where far more robust then CSS. But as CSS doesn't offer a way construct logical relationships between elements (this div is below that div, this one is left from that one), people have to resort to things like absolute positioning and such that just can't deal with changes in font size.

"As long as Flash and its cousins Flex and Shockwave remain the simplest tools for producing drop-dead gorgeous Websites, they'll keep their place on the Internet."

Okay, now you're just trolling.

Yeah

The poster needs to be sent to time out, where they are forced to browse The CSS Zen Garden for about 30 minutes. When they are done, they can come apologize for their comment.

...note that this a is a design patent . It is more like a trademark than a utility patent and covers only the "non-functional" elements of the design.

So? Their patent is sooooo vague and generic anyone who wants a simple website will run afoul and may be sued. And this may put a freeze on a trend in simpler web designs - which I am all for, I'm sick of the clutter and business that's become the defacto standard these days. *Ahem* Slashdot.

to learn. A LOT more difficult.

For you perhaps but not for everyone. Look at slashdot's code, there are no tables. A List Apart has some good tutorials on how to use CSS for layouts. As does Zen Garden. Eric Meyer has some good books on it.

Falcon

Every single graphical trick done to either speed up or sexify your web site is done with tables inside tables inside tables--it's tables all the way down!

Apparently, you've never visited the Zen Garden.

But as someone who's thrown together more than a few web applications in my time, I'd like to talk to you about what I'm really excited about--the datagrid element. Now, I know a lot of people are going to argue with me, but the most important tag in HTML is <table>. Every single graphical trick done to either speed up or sexify your web site is done with tables inside tables inside tables--it's tables all the way down! When's the last time you laid out a site without a table element on every page? Hell, it's almost always the next thing to follow <body> on my pages. And you know the code I write to interact dynamically with that table is a bitch. An unmaintainable mess. Yeah, there's probably some library out there I could use to simplify that pain but it always comes down to me messing around with advanced Javascript code trying to squeeze some more functionality into the user's interaction with that table. "Oh, I want this box to highlight red when this happens!" a user might say. Everyone wants a "simple table" with Google Spreadsheets functionality.

Well, although I am not one of the people who thinks people who use tables for layout should all go to hell, I do prefer to NOT use them. I can say that I've written a few web apps myself (and still do) and use tables only for data representation. And I am comfortable to say I am not alone... take a look at, for instance, /.'s source. Another beautiful example of tableless layout can be found at Zen Garden

Also, I would like to announce the 10,000th reference to CSS Zen Garden which by law has to be mentioned in every /. story about web design.

Even risking to repeat some of the stuff allready said, here's my list of my recommendations of which some were earned very hard on my part:

1) If you want to get going easyly, you need a main client. You otherwise will allways end up with a net loss, unless you are extremely disciplined at only billing for actuall work done. Which is nearly impossible in the first year or so for someone in this field without prior experience.

2) A lesson hard learned by me: End-customers know much, much less about IT and the web than you can possibly imagine. Chances are they won't understand a word you're saying on your first meetings. Take that into account from day one! They *will* compare you to the son of a friend who can do the same thing in MS Frontpage for a tenth of the cost. If that happens: WALK AWAY!! Somebody like that is *NOT* your customer! Trust me on that one.

2b) Likewise, people know squat about modern webdesign and, to be honest, chances are that you don't either. This is the top league, and if you're not playing in it and don't plan joining it (i.e.: scoring a regular official entry in csszengarden and building an accoring personal site - which basically means putting 1500 hours into webdesign, alistapart and such and getting really good at it) STAY THE F*CK AWAY from web-design. The field is fubared enough as it is. If you insist on building your own CSS and HTML, learn a CSS framework. I strongly recommend YAML (as in CSS, not config-language) as the foundation to all your custom design work. But double-check your artistic abilities with proven pros befor doing so. I happen to be gifted with both programming and artistic skills and there are some others like that too, but that is more rare than most geeks like to admit. ... And earning money with programming is much easyer anyway - you know, the son doing Frontpage and all that ...

3) Learn one (1!!!!, ONE!) FOSS web-app-kit. As in: *NOT* two or more. But ONE. And focus on it. Find out which of the big ones suits you best. For instance, Typo3 owns the German market (yeah, whatever, cue bloatware jokes below), so it's a safe bet if you live there and want some freelance gigs to roll in fast. Others are Zope/Plone, Django, TurboGears, CakePHP, Symfony, ZendFW, Prado, Joomla, Drupal and EZ Publish. Some are CMSes, others are Appkits, some try to be both at the same time and usually manage quite well. Which one you choose nearly matters squat, they all have their ups and downs. However, it *is* important that you pick exactly one, and one only, and become a pro at it. It takes about 3000 hours and a few years of work with one community to achieve that. Do it. Help them out with bugtracking from the get-go and make room for developement-branch of the project in your pipeline. And try to join the core crew or at least the bugsquad or something. I'm in the Joomla bugsquad, which is sort of my sorry excuse to say I'm helping out. It does give me a little bragging advantage with the one or other customer though.

Bottom line on this one: Concentrate! I can't emphasise this one enough - you have to restrict your geek-experimentation drive when running a business. Do it from day one on!

4) Have a working one-stop zero-fuss pipeline custom built to fit the FW you use *before* you start. In fact, make that your first task to do before even considering going freelance! Automation, Versioning, Bugtracking, Project-Management, DB-sync and project-deployment, local and remote LAMP stack and all. Set it up and use it! If you don't know versioning and issue-tracking, you have no f*cking business doing freelance web-work. That's a fact! We have to many n00bs joining the fray as it is! Join me on a gig some time in the future and not know versioning and I'll have your ass for dinner, even if you live on the other side of the planet! I can't tell you ho

If this was a question in disguise:
For the german speaking croud, I think SelfHTML with it's part about CSS is a very usable reference, apart from the above mentioned W3C specifications.

Other useful material consists of diverse articles on A List Apart and meyerweb; and many bits and pieces can be found on Listamatic, BlueRobot and Zen Garden, just to mention a few of my favourites.
Oh, and don't forget to search the web for those cheat sheets needed for IE 6 and other old browsers.

No wonder nobody buys your stuff. Your online presence gives me the creeps. Quite literally actually. I feel sick watching that presentation and listening to that irritating music. I wouldn't download your tool for free, let alone buy a product from a software company that presents itself like that. No f*ckin' way. And I'm a guy that actually does buy software.

How about wasting 5 minutes on a concept for an online presence and an online marketing strategy? And, please, *do* get a *professional* webdesigner to rebuild the site. You'll find plenty of them here.

To be honest, somebody who needs to get a job done nearly cares squat wether a tool is free or costs 300$. It's only because the 300$ tools are just as crappy as the free ones (sic!) that they settle for the free ones. And damn the few bucks I have to shell out for it.

Best example: Zend Studio and PHP Eclipse or PDT Eclipse. If I have to go through the same fuss configging local remote debuggin in either, I see no point in spending 300$ for Zend Studio. That way I'll even learn to configure an open source tool - a skill not wasted - rather than learning to deal with some quirks of some prorprietary tool.

Counterexample: Mint is a web presence statistics tool with PHP backend logic. There are like a quarter bazillion of these in Free, FOSS and public domain scatterd all over the web. However, looking at this guys site (he happens to be a good designer *and* a good programmer) I haven't the slightest doubt that his statistics tool will deliver without hassle. Thus whenever I need a statistics tool, he'll be the first and last where I look for it.

When designing web sites I always write my HTML to be so flexible with styles you would think it was written for the CSS Zen Garden. Why? Because I know that when I redesign the site's layout, as I inevitably will for one reason or another, I don't have to go mucking around in all my HTML to make the page look different. It certainly doesn't hurt the site's accessibility.

Hire someone that knows what they are doing.

That's the easiest, but likely most costly, way out. But the original question was "how do I teach myself graphical design, particularly in the context of websites?"

To answer that, I would suggest there's a lot of a) reading and b) practice involved. You don't have to go to school to learn web graphic design, but you do have work hard at learning it. But, taking a course will just make it a lot easier. "Art" stuff is harder to just pickup and do, unlike "tech" stuff. This coming from a guy who was going to go to art school but opted for a Computer Science degree while studying CGI and ending up as a web developer.

Here are some books:

Transcending CSS: The Fine Art of Web Design

An excellent book that expands on CSS techniques as well as gets into how to visualize site design to best markup your website (without tables per say). Later on it will teach you how to look for inspiration in print media (magazines, newspapers, etc) and how to keep a "diary" of design ideas by cutting and pasting different images into a scrap book. It'll also cover different design aspects such as fixed vs liquid layouts, pixel vs em sizing, and get into CSS3 stuff that's coming down the pike (still) with the Advanced Layout Method. This is a must read, but requires some good CSS knowledge.

Bullet Proof Web Design

This book is less about design and more about how HTML/CSS markup to make your design easier to do without getting into table layouts. It'll make your job easier and might give you some design ideas. And since you cannot have one without the other...

Web Standards Solutions

Another excellent web development book. Like "bulletproof" above, it's a very fast read but worth it's weight in gold. Can you find this stuff on the Intranet? Sure, particularly from A List Apart, who's authers regularly post their articles too, but it's worth having a nice colored book for fast reference.

The Zen of CSS Design: Visual Enlightenment for the Web (Voices That Matter)

There's a website for this book, The CSS Zen Garden, that you can use and probably pass over this book (I did, but I'm still interested in adding this one to my collection). This will teach you about how HTML and CSS differ and what can be accomplished by good CSS and semantic HTML. It'll probably also get your inspired as there are a ton of gorgeous examples in the book.

Don't Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition

You cannot talk about web site design without taking into consideration Usability and Steve Krug's book is probably the best thing you can read for you and your visitors. He's a nice guy (I've contacted him via email after reading his book and he kindly responded), his book is funny, short, and chalk full of full color graphical examples. You can also read from Nielson's website Useit.com to get more education on usability but there's a good deal of people who feel Nielson's "requirements" can be taken with a grain of salt.

I use this often.
http://www.oswd.org/
http://www.mezzoblue.com/zengarden/alldesigns/
or
http://www.csszengarden.com/

I'm one of the fortunate rare few that is good at both, programming *and* design. And I can asure you that either - when done professionally - is extremely hard work until you get a routine.
Since you are the Geek type that even *admits* he's bad at designing and you've got a full time job already doing all the stuff you mentioned, let me give you one advice for this particular situation you've just described: Stear clear of any design work what-so-ever. Don't even try to do it - you most certainly *will* fail miserably. You've basically got two options: Get a professional (!!!) designer to pimp your site (Any one of these will do just fine: http://www.csszengarden.com/ ) or get yourself a template *or* a web-professional who's got a template subscription with a good template foundry.

Don't get me wrong: Learning good webdesign is possible for anyone. But you will have to learn two things: Design *and* Webdesign. The former being what programmers often neglect as simply "drawing cute little colorfull mockups and layouts in Photoshop" (way harder that many imagine) and the latter transferring said mockups into compliant CSS based web document frames and scaffolds while maintaing the overall look and feel on various OSes and browsers. I'd say both together take about 800 hrs. to learn for somebody who is proficient in operating computers and has a ood suply of O'reilly's at hand, but hasn't done any of those thouroughly. You can start now, but I wouldn't expect to get up to speed before a year has passed and you've had you designs scrutinized a few times by the people at cssbeauty or cssvault. So once again: Hand the design stuff over to someone else or buy a template. Then integrating that into a functional website and optimised pageflow is work enough for one guy.

I've muddled through over the years, mostly by looking at what actual graphic designers have done and trying to learn their techniques. A few things to remember:

* a boring design is better than an ugly one. Don't try too hard.
* learn about negative space, colour theory, and usability. There's generally math behind them that you can learn and use.
* go find some attractive sites, try to figure out 2 or 3 elements that you like, and try to copy them.
* don't be afraid to rip off other sites; generally by the time you're done tweaking, your design won't look anything like the original. (Just don't steal their actual images or code)
* HTML naturally leads to boxy layouts; that's okay! Don't mangle your HTML trying to avoid it; you can de-boxify with CSS and images.
* find an artist friend and get them to critique your design; a few offhand comments from them can save you days!
* most of the neat effects on the web these days are clever images (3-column layouts, reflection effects, rounded corners), and most of the rest are clever CSS.
* you *can* get the same level of quality as a professional designer, it will just take you 100x as long.
* http://www.alistapart.com/
* http://www.csszengarden.com/

That said, you probably don't want to be learning this stuff on the job while your servers catch on fire. It will be better for all involved if your boss hires someone who is already a talented designer; even an amateur designer will probably be faster than you. Design is definitely a time-money tradeoff; professional designers charge a lot because they do good work quickly. If you really want to learn this stuff, you probably don't want to do it under a deadline.

I'm wondering why one would need a theme at all. Just edit the style sheets. If you look at what the people from CSS Zen Garden do with just CSS changes, you'll wonder why you would ever need to change the HTML to create a new theme.

This identifies a major source of the problems surrounding growing the web: we've got self-identified graphic designers who think that they know how to build the protocols. It is a situation similar to painter telling chemists how they should formulate the pigments.

Certainly input from graphics designers is appropriate, but beyond a certain point, it is just adding unnecessarily to the noise level.

CSS and HTML, when done by hand can be a wonderful thing: css Zen Garden shows what was possible several years ago, and it has only gotten better since then. Granted that WYSIWYG web page editors like DreamWeaver and FrontPage churn out crappy tag soups, but that is a problem with those software packages, not with the underlying protocols.

Agreed, it is a cracking book that sets you on the right path. After that you can learn extras from sites like A List Apart, CSS Beauty, css Zen Garden, etc.

If you haven't seen it, check out the css Zen Garden. More than enough practical examples of how to do exactly what you say you want to do.
  http://www.csszengarden.com/

• http://good-tutorials.com/
• http://tutorialdash.com/
• http://pixel2life.com/

• http://youfuckwedont.com/
• http://veerle.duoh.com/
• http://bartelme.at/
• http://resource.reh3.com/

• http://webcreme.com/
• http://stylecrunch.com/
• http://cssmania.com/
• http://www.flickr.com/photos/splat/sets/981332/ is a good flickr pool
• http://nn.veracon.net/
• http://cssremix.com/
• And of course the Zen Garden: http://www.csszengarden.com/

The only real way to get a 'feel' or an ability for web graphics is to both take some basic photoshop tutorials at sites like http://good-tutorials.com/ http://tutorialdash.com/ http://pixel2life.com/ Then read design blog religiously, blogs like http://youfuckwedont.com/ http://veerle.duoh.com/ http://bartelme.at/ http://resource.reh3.com/ Then visit some design galleries regularly like http://webcreme.com/ http://stylecrunch.com/ http://cssmania.com/ http://www.flickr.com/photos/splat/sets/981332/ is a good flickr pool http://nn.veracon.net/ http://cssremix.com/ And of course the Zen Garden: http://www.csszengarden.com/ And you're all set.

Those are some pretty fucking ugly profiles, actually. The olycat one is scattered & barely legible, and the melikamp profile, while perfectly legible, is tasteless & unrefined. Both are uninspired.

Even if they are better than the numerous, mouse-rage-inducing profiles with 20 embedded youtube videos, etc. etc., I wouldn't exactly use those profiles as examples of decent design.

See, e.g., css Zen Garden, and then tell me the 3 links you gave don't suck.

Perhaps it's not as obvious as it should be, but the point of the CSS Zen Garden isn't the default stylesheet (the grey-on-white colour scheme you mention).

It's actually a gallery of very different styles, including quill pens on parchment, urban tagging, and even one that looks like an old-time movie theatre with scrolling credits.

Perhaps it's not as obvious as it should be, but the point of the CSS Zen Garden isn't the default stylesheet (the grey-on-white colour scheme you mention).

It's actually a gallery of very different styles, including quill pens on parchment, urban tagging, and even one that looks like an old-time movie theatre with scrolling credits.

Perhaps it's not as obvious as it should be, but the point of the CSS Zen Garden isn't the default stylesheet (the grey-on-white colour scheme you mention).

It's actually a gallery of very different styles, including quill pens on parchment, urban tagging, and even one that looks like an old-time movie theatre with scrolling credits.

In case you didn't, here are a few examples.

The point of the site is to illustrate how the exact same HTML file can be displayed in an infinite number of ways by simply changing the CSS. The site is essentially an argument for a semantic Web.

Schwab

In case you didn't, here are a few examples.

The point of the site is to illustrate how the exact same HTML file can be displayed in an infinite number of ways by simply changing the CSS. The site is essentially an argument for a semantic Web.

Schwab

In case you didn't, here are a few examples.

The point of the site is to illustrate how the exact same HTML file can be displayed in an infinite number of ways by simply changing the CSS. The site is essentially an argument for a semantic Web.

Schwab

In case you didn't, here are a few examples.

The point of the site is to illustrate how the exact same HTML file can be displayed in an infinite number of ways by simply changing the CSS. The site is essentially an argument for a semantic Web.

Schwab

That's funny though, I never noticed until that guy mentioned it that most of the sample styles do have really poor readability because of the choice of font and background colors. This is the most readable version: http://www.csszengarden.com/?cssfile=/.

Is CSS good technology? I guess, yeah separating data from presentation is good. But it sure seems like CSS is overly complicated if it takes this many committees, standards revs, and browser versions to make it usable.

Maybe if our industry cared as much about separating code (javascript) from data (html), Web Tew Oh wouldn't be so insecure.

Parent apparently didn't load any of the style sheets.

Dude, there are TONS of high-contrast basically-eye-gouging styles in which you can view http://www.csszengarden.com/ as well as styles with even lower contrast than the front page default style.

If you haven't loaded any of the style sheets, you're missing the point of CSS Zen Garden entirely...

You shouldn't have posted anon (your post might go under the radar).

I agree with everything you said. I'd just like to add that many people want to look for excuses not to learn CSS. If you are doing a quick one up site, sure do it the quickest way possible (nvu or dreamweaver using tables), but if it is something that is to last the stays of time CSS is soo much more flexible. If you didn't check out the csszengarden link then do so now. All the designs have the exact same html. The only thing changed between designs is the style sheet and images. You can change the entire look of a site w/o changing any of the html or you can have multiple different representations for different presentation media or for different viewers (think of people that have poor vision or are blind for example, cell phone users etc). It's worth learning before you discount its use on a project.

The problem is that like BASIC, HTML is easy to learn by tinkering, without getting a good grounding in the theory. It's possible to write good, elegant BASIC or good, elegant HTML, but there are a lot of total crap tutorials for both that get people started with bad habits early.

Unfortunately, there are a lot of people with bad habits writing HTML tutorials too.

One of the big problems is software developers who have a basic grounding in "bad" HTML and use it to lay out programatically generated sites. Developers in general don't want to bother to learn CSS - they seem to think it's the sugar on top - "just" a graphic design thing. So you see a lot of crap HTML work out there - and a lot of table layout.

For a sublime, pure-CSS experience (make sure and load some of the stylesheets on the right-hand side), check out http://www.csszengarden.com/

I wanted to use a modern, CSS-based liquid layout. So I bought a book, and dove in.

There's your first problem. No book is going to give you all of the latest techniques for doing "cool" things with CSS. For that you need to poke around online at places like CSS Zen Garden, A List Apart, Liquid Designs, etc. If you must buy a book, a pocket reference is the best way to go (and even that really isn't necessary, since you can find good references online).

It seems like CSS does OK for fixed layouts but if you want to have a 200 pixel left sidebar and leave the rest of the page for content, I just can't figure out how to do it and have it look as nice as a simple table-driven layout.

Odd, I've done exactly that using a non-table layout, and I certainly didn't invent the technique. It's not purely semantic, as you end up with a couple extra divs to get your layout right, but it's a damn sight closer than table layouts. In fact, your example is actually quite trivial, compared to something like a three-column layout with bounding fixed-size sidebars around a liquid middle (there's a reason that's called the Holy Grail of CSS-based design).

Worse, after playing around with it I could not see where the advantages were over tables. Tables work, they don't take long to code up, and I feel I understand them completely with minimal effort. It seems like with a CSS layout, you waste a lot of time fighting bizarre browser compatibilty issues, while if you use tables, they "just work", far as I can tell -- and I've tested in IE, Safari, FireFox and a few others.

Oddly enough, movietally's table-based layout for its rounded-corner "Discover" box is broken on IE7 (the corners don't line up correctly). So much for "tables work". I'll grant you that CSS-based layouts can run into some funky cross-browser issues, but 9 times out of 10 the problem is not with the layout but with the designer who demands pixel-perfect magazine-like layouts in a medium that was never meant to do that (if you want that, build a PDF). If you get over your obsession for having everything lining up just so and instead focus on making the page accessible and understandable while still looking good, you'll find that CSS is often a lot easier and nicer to work with than table layouts. Besides, it makes it quite a bit easier to give your page a makeover to keep it fresh without having to recode everything (CSS Zen Garden is the prime example, but look at what Slashdot did with the recent site skinning contest -- that was limited to only CSS manipulation, which would've been impossible had Slashdot stuck with its outdated table-based design).

Nobody's saying that tables aren't useful. We're just saying that they should be used semantically. If you have some tabular data you want to display (say, a calendar), knock yourself out with tabley goodness.

• A List Apart
• Position is Everything
• CSS Beauty
• css Zen Garden

Manuals are fine, but most can be replaced by the various excellent websites around - w3schools is mentioned below and I'd agree with that.

However for some inspiration about what CSS can do for you a trip to the CSS Zen Garden at http://www.csszengarden.com/ is worth a thousand pages of dry css scripts. The recently published book 'the Zen of CSS design' is also excellent - http://www.amazon.com/Zen-CSS-Design-Enlightenment -Voices/dp/0321303474/ref=sr_11_1/102-7311422-8694 536?ie=UTF8 and adds a lot to what's available on the site.

The Zen of CSS Design

That's not "how tables are meant to be used". They're meant to be used for tabular data. Hence the name. Personally, I put text documents in a word processor, not in a spreadsheet, because the word processor has all the functionality I need to properly format and style my documents. Same exact concept.

I've never had problems getting pure-CSS documents to align properly in IE and FireFox, which make up the vast majority of internet users. I use tables for displaying rows and columns of tabular data. I use divs for marking up blocks of content, and spans for marking up spans of content, and CSS for layout and styling. Go figure - using markup for markup, and stylesheets for styling. What a concept.

See http://www.csszengarden.com/ for a little re-education on CSS.

Disclaimer: I'm still learning CSS, so be gentle if I am mistaken... :)

CSS can help, but there's a reason why people use tables rather than CSS to lay out web pages: it works. There are a lot of caveats with CSS. As other posters have noted, IE doesn't follow the W3C standards, and therefore tends to display a lot of content defined with stylesheets in unexpected and not altogether wonderful ways. On the other hand, if you rewrite your CSS to work in IE, other browsers don't always work well. However, I have yet to see a browser that choked on a straight HTML table layout (granted lynx/links butcher the layout, but the content is still there).

Furthermore, consider a simple web page with a rather standard layout: a title/logo section at the top, a navigation column to the side of the main content (doesn't matter which side for this discussion), a main content section and a copyright section at the bottom. This type of layout is very simple with a table: use the <tr> tags to separate the title bar, the navigation/content and the copyright, and use the <td> tags to place the navigation menu and the main content next to each other within the middle <tr> tag. With CSS, however, you place the various divisions where you want them. Unfortunately, if your content is dynamically generated, you won't know beforehand how far down the page your copyright notice should be. While you can use the overflow property to scroll the main content while keeping the rest of the page fixed in place, this is rather ugly, and wastes even more of your page with scroll bars. For an example of what I mean <shameless plug> you can take a look at one of my web pages. I tried to use CSS exclusively for layout on this site. I've since reverted to using tables on most of my web pages, since, IMHO, it just works better for 99% of what I do.

While there probably is a way around this problem, I haven't figured it out yet, which leads to the third problem with CSS. While it's really powerful, and can do some seriously cool stuff (click here for examples), it's not nearly as easy or intuitive as straight HTML. For professional web developers, that's okay, but for a lot of people, it's more hassle than it's worth.

http://csszengarden.com/ highlights some of the wonderful artistry you can do with CSS. Once people get a grasp of using CSS, going back the traditional table based layouts, and mixing content and style, is no longer an option; but CSS is far from easy to pick up. In fact initially using CSS is incredibly frustrating.

"Requiring two languages just to display the document is a ridiculous and cumbersome dirty hack."

No, it's a natural evolution of the model. The dirty hack was to try to embed the display code in the markup.

You use XML (in the form of XHTML) to store the data. You use the CSS to control the display. Since the two are actually different languages, you can't mix them. This allows you to swap out the CSS for different CSS and get a completely different look. Check out http://csszengarden.com/ for some examples of the power of this model.

The other thing that you can do is swap out the raw data and use the same CSS file. I don't have an example site for that, but it is a potential use. If you add javascript into the mix (a third language), you can get wondrous things. Properly used, it makes designers more productive. Instead of building ten million font tags, they can just make all elements the same class (with the same font).

If you want to have a single language, you can. Just call it image map. Use only two HTML tags: map (plus area of course) and img. Make the entire page an image and make various regions clickable with the image map.

When you thought of CSS, did you have in mind something like the Zen Garden? What's your opinion of it, does it explore all of the possibilities of CSS?