Going from Table to CSS

I need som help/tutorial/guide where to start. I'm n00b designer, have allways use Photoshop/export-to-html and then fixup in dreamweaver. And I know its a stupid way of designing....more work in the end.

Here is an old site I design, www.capeaccom.co.za/tyger/index.html

How would I go about to convert this to css.

Q - How do I put complicated headers/layout into css ?

Any help is welcome.

If your interested in paying i do hourly lessons on CSS But in the meantime il get you some tutorials. http://www.csslicingguide.com/ and http://www.partdigital.com/tutorials/convert-web/

First work out the main divs you'll need

The first large div would be from the logo down to and including the accommodation text, with a large background image to use all the images shown in that area.
The second would be from amenities down to just before the footer area, with the second group of images as the background.

The third main div is the footer area with the light and dark bar and the curved light mark in the left corner.

The whole lot would be encased in a wrapper div, whose background colour would be the main background colour we see (leaving the body with a white background for the outer areas).

You may need some other divs inside these to position some (that's some, not all) of the text content.

Once you have a suitable framework, the rest is child's play. Especially if you don't worry about pixel perfect positioning of the text, so if it is a little bit lower/to the right or left, don't beat your head against a wall.

But first, go learn css and html. Start at www.htmldog.com and www.cssbasics.com. You'll also have to learn about doctypes, as missing them out (as in the above site) or using the wrong one can throw IE into quirks mode and wreck havoc with your design. Use html 4.01 strict.
Learn to design for Firefox, test in IE7 and IE6. Try to avoid giving margins and paddings to floated divs, it's safer to give those to the div contents.

Practice on something simpler first.

There are some advanced things you could try, but for your first attempt, it's best to keep it simple.

Oops, nearly forgot.
Use external css files, not internal, and put all your styling in the css, don't put any styles inline.

Originally Posted by Dr John There are some advanced things you could try, but for your first attempt, it's best to keep it simple. Oops, nearly forgot. Use external css files, not internal, and put all your styling in the css, don't put any styles inline.

That's some of the best advice you'll ever have on this subject.

Also, learn to keep things relatively similar with your styles and HTML structure. When you're working with CSS + XHTML, you're going to need to be very intimately attached to your code for when you have to troubleshoot. Most of the time, you're going to have to augment things more than once, maybe more than five times to get it right. It takes a lot of experimentation, and a good knowledge of what parts of your code need to be changed.

This is the site I used to learn TABLES > CSS
http://inobscuro.com/tutorials/read/25/

Don't try to convert photoshop/dreamweaver tables into divs, just start from scratch, will be a lot easier. I'd say read some tutorials about positioning div's, that's the hardest part to learn., but once you can do it it becomes the easiest part of coding.
The rest (styling) isn't hard, but takes a lot of time. Check out pixel2life for tutorials on that

Good luck!

Dr.John can I ask why you don't approve of using inline styles?

As from going from Tables to CSS, the transition will not only be easy once you read a few tutorials, but you are going to smack yourself for using tables as long as you did. Once you understand the positioning of elements and how fluid layouts work, you'll be ready to redesign in no time. Good luck to you.

Because the whole point of css is to put your styles in one place, then refere to the external css file whenever youcreate a new page.

If you use inline styles, you will be repeating styles time after time, even on the same page, bulking up your code, giving a slower doanload. When you make a new page, you will have to apply all the inline styling all over again at every point where it is needed. And when after creating say ten pages you decide to change the font, say, or the background image, you have to go through every page and edit every one at every point to make all the changes. With css, you alter the single line or two lines, and when you save it, all pages are re-styled instantly.

I'm very lazy, and doing things the right way is less effort.

Part of the ethos of css is to separate content and presentation. Inloine styles mixes them together again.

Now I admit that when I want a couple of words inbold, I just add the bold tags, cos that's eaiser than adding a span and a style. But that's the limit of the amount of inline styling I use.

Oh yes, I agree with you to that extent. But by having the option of more specific styling to compliment your global stylesheet is just one of the many extra perks about CSS. By limiting yourself to only external styles, you're not harnassing that extra power available to you via inline and internal styles. On a bigger picture, I do concur with external stylesheets as opposed to more internal though I use all three.

No you must suffer with your tables!!

Jokes, this is exactly what you need to read:

http://www.netmag.co.uk/zine/develop...om-mess-to-css