[mx]

After reading all the pro-total css / anti-tables ranting on this site for ages now, I've decided to finally take the css plunge and am going to attempt my first totally css-driven site! I've previously used css extensively for formatting and styling but have always used tables for the basic layout!

Any words of wisdom before I take the plunge?
Any standard fuck-ups to avoid?
Am intending to use the topstyle embedded in dreamweaver mx 2004, Is this wise?
Any good css reference book recommendations?

Sorry if this has all been asked before, but I couldn't find a suitable thread!

[oli]

Best thing is to take a look at some sample layouts and figure out how they're put together http://www.bluerobot.com/web/layouts/ etc.

You could also try and do a layout for csszengarden.com , thats how I learnt.
If you have topstyle, Id just use that for your code and css.

[emil]

http://css.maxdesign.com.au

[cam]

Originally Posted by max h

Any standard fuck-ups to avoid?

Don't try and recreate your table-layouts with css using divs and/or absolute positioning.

[pgo]

Definitely what Oli (EDIT: and emilpaun and cam) said.

Also...

http://www.kevinleitch.co.uk/projectnew/index.php
http://css.maxdesign.com.au/ (I use this all the time)
http://www.alistapart.com

CSS Layout:
http://glish.com/css/ - more CSS layouts.

Link Collections:
http://www.dezwozhere.com/links.html
http://www.alvit.de/web-dev/
http://www.alvit.de/handbook/

Web Standards Solutions - by Dan Cederholm of www.simplebits.com is an absolute god-send. This is the book that really moved me from tables to CSS. Everyone should own it. Best CSS book I've read, by far. Cheap, too, at $23 (USD). It has everything in it - lists, navigation, layouts, text styles, table styling and so on and so forth.

What he stresses as far as (X)HTML is concerned - is semantics. While it's not so important to stress over the minutia of semantics, it is important to recognize their value and use them as best you can within the framework of (X)HTML. For more on that, I recommend his SimpleQuiz, which is basically a discussion of how best to mark up some content in a given situation. Quite eye-opening.

I credit him with my move to web standards.

Hope this helps!

[mx]

Thanks 4 all that guys. loads of reference points there. have ordered Web Standards Solutions, nowt like a bit of paper reference!

Originally Posted by cam

Don't try and recreate your table-layouts with css using divs and/or absolute positioning.

not sure actually what you mean by that cam, I've taken to understanding that css layout wise is like defining the cells without the table! how far wrong am i?

[pgo]

Originally Posted by max h

Thanks 4 all that guys. loads of reference points there. have ordered Web Standards Solutions, nowt like a bit of paper reference!

Well done, it shall serve you nicely.

CSS-based layouts aren't like tables. You create individual boxes of content, basically (a div for the header, a div for navigation, a div for content, a div for a sidebar, and so on) - where tables are rigid, CSS is not. Of course, it's easier to mindlessly control layouts with tables, but their in-flexibility, bulky code, and inaccessibility are major problems.

From there, CSS is used to position the boxes, size them, add margins, padding, etc. It's really simple once you get the hang of it. However, be ready for mayhem in IE when you start floating things.

Another tip: Always develop your sites and test in Firefox. Once it works there, then check IE, where it will be broken (probably). Then hack to fix for IE. It's a pain, I know.

[mx]

Originally Posted by pgo

Another tip: Always develop your sites and test in Firefox. Once it works there, then check IE, where it will be broken (probably). Then hack to fix for IE. It's a pain, I know.

Already been doing that for the past year or so! one those 'never go back' things.
IE's ability to knacker code is plain demoralizing!

I've seen numerous posts about 'floating' issues so if pos will try and steer well clear!

[emil]

check also for troubleshooting
www.positioniseverything.net

[Stickman]

Originally Posted by pgo

You create individual boxes of content, basically (a div for the header, a div for navigation, a div for content, a div for a sidebar, and so on)

Being picky, but ideally, you want to be careful when you approach it like that. Could quickly get divtastic.

For example, your navigation can often just be a list <ul> and for simple layouts, content can be just positioned paragraphs and images.

You can position and style all elements, not just divs.

[pgo]

You're absolutely correct. However, especially for people new to CSS-based design, it's often easier to use divs to lay out the general areas of a page - it's more like tables in that you have pre-defined content areas (header, nav, content, sidebar, footer, and so on).

I still do it out of habit sometimes - there are many times I could have used <ul id="nav"> perfectly well, but <div id="nav"><ul> was just easier. Of course, most pages I create have a grand total of 4-6 <div>s, so I do avoid divitis generally.

[cam]

Originally Posted by Stickman

Being picky, but ideally, you want to be careful when you approach it like that. Could quickly get divtastic.

For example, your navigation can often just be a list <ul> and for simple layouts, content can be just positioned paragraphs and images.

You can position and style all elements, not just divs.

It's not being picky Stick, it's the way it should be done, and was what I was meaning.

Basically, make sure your markup is semantic - if something is a list of items, mark it up as a list, if you've pairs of items, mark them up as definitions lists, nest your headers correctly, etc.

The div element should be reserved for dividing up the page, encapsulating numerous other related semantic elements - e.g. a group of headers and paragraphs could be wrapped with a div to allow the whole area to be styled collectively.

[cam]

Originally Posted by pgo

You're absolutely correct. However, especially for people new to CSS-based design, it's often easier to use divs to lay out the general areas of a page

It's best if he learns right from the start i'd say

[Mr Fred]

Originally Posted by max h

After reading all the pro-total css / anti-tables ranting on this site for ages now, I've decided to finally take the css plunge and am going to attempt my first totally css-driven site! I've previously used css extensively for formatting and styling but have always used tables for the basic layout!

Any words of wisdom before I take the plunge?
Any standard fuck-ups to avoid?
Am intending to use the topstyle embedded in dreamweaver mx 2004, Is this wise?
Any good css reference book recommendations?

Sorry if this has all been asked before, but I couldn't find a suitable thread!

just get someone else to do it.

[mx]

Originally Posted by Mr Mik

just get someone else to do it.

Good plan! when are you free?

[Brown]

i'd like to see that.

[emil]

Originally Posted by Brown

i'd like to see that.

voyeur...

[stealthcow]

Web Standards Solutions - by Dan Cederholm of www.simplebits.com is an absolute god-send. This is the book that really moved me from tables to CSS. Everyone should own it. Best CSS book I've read, by far. Cheap, too, at $23 (USD). It has everything in it - lists, navigation, layouts, text styles, table styling and so on and so forth.

bought!

go amazon!

[emil]

haven't read any book on css yet. don't even plan to. classic litterature is much nicer.

[emil]

http://www.webcredible.co.uk/user-fr...s-tricks.shtml