How I Converted My Table Website to All CSS
or 'It ain't pretty, but it validates!'
This saga really began about three or four years ago when I joined a SEO group, as I wanted to improve my standings in search engines.
Folks, I found out I didn't know didley about making a really good website! Oh yes, I knew a few things, like writing content and using includes to make less coding needed, (coding?), but I didn't know a font tag from a p tag, much less how to use or not use them! When the group owner told me I needed to do something with an h1 tag, I had no idea what she meant! Back to lurk mode for me!
The next thing I knew, there was another group attached to the first group that was teaching HTML and CSS! So being the 'wanting to learn more' soul that I am, I jumped right into the HTML learning and this stuff started to make sense. At this time I really wasn't in to CSS, I just wanted to know how to make my pages do what I wanted them to do
First I learned I had to have a 'doc type' in order to make my page
validate and then I learned how to use the Validator and the html was
starting to make sense so I could fix the hundreds of errors the Validator
kept finding. My, I thought I was so smart!
Right.
Everyone kept talking about CSS and how much easier it made updating a website. So I joined a really great CSS group, but I didn't understand the first (or last) thing they were talking about! So I left that group. Then one of the super intelligent members of my FrontPage groups was teaching a CSS class so I decided to take the class. A lot of it started to make some sense, but a lot more didn't and I was too ashamed to ask all of the 'dumb' questions I should have asked. Forget it, I am too old to learn this CSS stuff. Again, back to lurking!
After awhile I started thinking that if other people could learn this CSS I could too and I was not going to give in again! So after lurking and reading which books were the best for CSS, I hit Amazon's site and ordered some CSS books. One of these books, Eric Myer's book, 'More Eric Myer on CSS' has a full chapter telling how to convert an existing page to CSS. I also bought a copy of 'The CSS Anthology' by Rachel Andrew. This book has really good examples of how the CSS should read and the corresponding HTML for just about anything! I really like this book, I use it constantly.
When I read Eric Myer's chapter on converting a table site to all CSS, I started to get excited! I could do this! I did! The way I did it was not exactly the way he said to do it, but it worked for me. I followed his instructions at first, then devised my own method. Since I am sort of lazy, I figured out a way to make this conversion as easy as possible and used several notepad 'templates' to help me avoid constant repetitive typing and keep a level of consistency. First, I made a complete copy of my website to use as the working copy for conversion. I really didn't need to do this, but when I first started I didn't want to make some irreversible changes that I didn't want.
Then I used his plan and made a 'template' in notepad that I saved to the Desktop, so I wouldn't have to hunt for it. The template changed a few times until I had it working the way I wanted and using guidelines for CSS, I copied into my old renamed style sheet the things I would need for the tableless site to work. Divs, Div ids, classes, etc., all terms that meant nothing to me a few months ago. I really made two new style sheets, one for a two column layout and one for a three column layout. I validated my style sheet to make sure there were no errors or warnings. I did this every time I made a change in the style sheets, and I did make a lot of changes getting everything to work the way I wanted! I also made numerous copies of the style sheets for backups, as once a change is made in a style sheet, there isn't an 'undo' option.
My template looked something like this.
Very basic!