The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Converting a site from tables to layout CSS.

Hi Everyone,

I'm after some advice has how to convert a webpage that uses table's into a HTML page that has a style sheet for layout. If anyone knows of any programs which will help me achieve this task, I'm willing to give them a try.

Currently I'm converting the page by creating DIV boxes that are a fixed size. I know that this approach has its limitations, especially when looking at it in different screen resolutions. Therefore I'm open to suggestions as to how much of the page should be converted. Do I leave the layout table and give them "id's" which would enable more control over there content.

I'm reasonable new to the use of CSS for layout having being using CSS for some time to do the styling. I'm currently reading "Eric Meyer on CSS" by Eric Meyers and "Designing with web standards" by Jeffrey Zeldman. Both books are a must have and I recommend them to anyone who hasn't already purchased them.

I'm after some advice has how to convert a webpage that uses table's into a HTML page that has a style sheet for layout. If anyone knows of any programs which will help me achieve this task, I'm willing to give them a try.

Currently I'm converting the page by creating DIV boxes that are a fixed size. I know that this approach has its limitations, especially when looking at it in different screen resolutions. Therefore I'm open to suggestions as to how much of the page should be converted. Do I leave the layout table and give them "id's" which would enable more control over there content.

I'm reasonable new to the use of CSS for layout having being using CSS for some time to do the styling. I'm currently reading "Eric Meyer on CSS" by Eric Meyers and "Designing with web standards" by Jeffrey Zeldman. Both books are a must have and I recommend them to anyone who hasn't already purchased them.

Any help would be most appreciated.

Merry Christmas,

Steven Audis.

Might sound like a shameless plug, but the Sitepoint book about table-less CSS is really quite good. I had been working with CSS for about a year before I got the book, and I've learned a lot, plus it's always great to have a refresher.

We'd need to know a bit more about the page before we could give specific advice that would be of any use. Have you got a link to the page in question or some code so that the type of layout can be seen?

First you will also have to make a decision whether you want to keep the layout the same or let css do what it's designed for. There are some table layouts that are hard (if not impossible) to achieve with css
and vice versa.

It all depends on the type of layout you have as to which method you choose. There is no specific way of designing a CSS layout. The usual way is to let as much of the page flow as possible and only absolutely place those elements that need to be placed. If you absolutely place everything then you will have a rigid layout that is hard to make fluid. This of course may be what you want.

I don't know of any programmes to automate the task and even if there were I would be inclined to do it by hand anyway. This is the best way to learn and produces the most reliable code (when done properly) and also makes it easier to fix bugs and make changes.

If you post a link to the page in question or provide some code then I could probably tell you the best way to go about the conversion.

The page has to be accessible across a large number of browsers and must take into account different screen resolutions. I know you can't guarantee that a page with HTML+CSS will work across a number of browsers, so it would be fair to say IE & Netscape 4+.

Did you mean you want to support ie4 and netscape 4? If so then you should only use the basic styles for these browsers and import (using import) a more advanced stylesheet for other browsers.

However it always amazes me that people still want to support these browsers which must have a usage of about 2% each but are quite happy to stick javascript code in their page which 10-15% of users have switched off or can't use. It seems like a case of priorities in the wrong place.

However I know some institutions (such as universities) which should be leading the field are the worst offenders and have old browsers installed. So you do need to know your audience.

I haven't had time to look at you page properly yet but it looks quite straightforward to me. I would just work from the top down trying to make as much flow as possible. Then place absolutely only those elements that really need to be. This will help to make the page more readable in older browesrs (although nothing is guaranteed and you will need to check in these browsers each step of the way.)

You also need to consider whether you want to copy the fixed layout or make it a bit more friendly and fluid while you're at it.

Hope that's a start (if I get a chance later I'll have another look at your page and give some specific info).

To improve the page further you could convert the left hand navigation into a list (without the bullet) and then you could get rid of all those unsightly break tags at the end of the line. The spacing between could be controlled in the css.

Also in your original css (which i didn't touch ) you have used definitions over and over agian when there was no need. Remember that some styles will cascade through the stylesheet. e.g. If you declare the font-family in the body style then there is no need to keep declaring it in the <div>, <p>, <ul> etc.

You have used this same declaration about 10 times:"font-family: Arial, Geneva, Helvetica, sans-serif; font-size: 10pt;". Once in the body would suffice. If you need to change the size for a different element then you only need to change the size and not declare everything else again.

Also pt are best used for printing. Use px or better still use ems or % for a more fluid layout although they are not as cross browser compatible as pixels yet.

Thanks

Thank you Paul, Much appreciated,

I'm working toward making the website a lot more modern looking and I personally feel that the use of CSS for more than just styling is the way to go. Currently it's a bit of a trial but if they like the idea maybe itís something that I can rollout on a bigger scale across campus. The biggest concern of the University is trying to make sure we are not restricting the audience which the site is viewable to. I think this is a concern of every web developer, at some point though there has to be a cut-off to which technologies we strive to make the site work on.

Thank you for your help, No doubt I'll be speaking to you more as time progresses and I work towards implementing the ideas further.