How to generate CSS markup for non-designers

Question

Ok,

I've been tasked to port/convert/upgrade a site at work from table based layout to CSS based layout. The site is very typical, it has a header, navigation bar (width of header), left column, main column, followed by a footer.

One problem is our corporate web standard is IE6. We are rumored to deploy IE7 soon, but currently, IE6 is my target. I use Firefox, but my users don't, so it won't help.

I did find SuperPreview online yesterday, and it will help immensely, but I'm quite frankly not very good at CSS and it tends to frustrate me. I have to write/generate markup that will work with IE6, and hopefully will also work with IE7 and IE8, but IE6 is my base line.

Are there tools out there which can help me, or get me part of the way there? I just need a tool that can generate me some layout, like the Calendar Wizard in Word.

I know it's a tall order, any suggestions?

p.s. To give you some perspective on the age of this site, it was written in ASP 3 or Classic ASP.

Edited.

Answer 1

You can try using Yui layouts.
Many flavours to choose.
Yahoo! UI Library: Grids CSS

Answer 2

Make sure you use a proper doctype that doesn't get the browser into quirks mode, and learn CSS. If you don't know CSS and don't have the time to learn it, leave the CSS to someone who knows it.

Answer 3

I'd go looking for sites with readymade layouts. A site like http://blog.html.it/layoutgala/ or such. There's also an question related to css layouts here. CSS layouts can be quite tricky to get right and hard for beginners to come up with. Even experts use readymade tested layouts as a base from which to build the site.

I'd also like to recommend a good editor for building the site. Dreamweaver seems to be popular, but I prefer the free Aptana, as I've always wanted to "get my hands dirty" with code, to get the feeling of being in control.

Furthermore, stop thinking ie6 is your target, it will lead you to develop for ie and that will lead you to problems. I strongly recommend on developing with firefox with firebug helping. And then catering for the bugs and problems that ie6 brings to the table.

That way you'll be better off in the future. Your site will work better when the change to ie7 comes or a change to even something better like safari, chrome, firefox, opera or basicly anything other than ie. :)

Answer 4

If you are feeling a little adventurous you could try learning one of the grid systems.

I personally like http://www.blueprintcss.org/ (the other main one is http://960.gs/)

Here is what it offers you

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing

You could also try sites like http://layouts.ironmyers.com/