Cleaning some website code up

This is mainly for more advanced website designers than myself.

I design my sites by hand and whatnot and I just wanted 1) some input on a new design and 2) some suggestions for cleaning up the code. Here are four pages, each one the same code with css for different colors. Please let me know which color is the best, and give me some hints (if possible) on how to clean the HTML and CSS up. And yes, I know I haven't put any META tags or whatnot in yet.

http://www.calliander.net/dev/red.html
http://www.calliander.net/dev/blue.html
http://www.calliander.net/dev/green.html
http://www.calliander.net/dev/brown.html

Thanks in advance for any info!

I like the look. Clean, and easy to read, although the info text at the very bottom is a little small. Couple things:

Ditch the <CENTER> tags in leiu of <div align="center">. It's a bit nitpicky, but the CENTER tag is deprecated.

Try using CSS and positioning instead of tables for the layout. You could replicate the current look fairly easily, and you could make pretty sweeping changes without modifying much of the actual HTML. It takes a bit more of a time investment up front, but with the layout you've got right now, it wouldn't be much. It'll also decrease your page size considerably, and give you really clean HTML.

I'm a fan of the red myself, with the blue being a close second. THey both provided a nice contrast, giving the site a touch of color.

Yep. Switching to a CSS-based layout is the best way to clean up your code, any web designer who considers themselves advanced should've moved on from tables a long time ago.

I think the red is a lot better than the other three.

Thanks for the input. So my HTML and CSS look okay, then?

The only reason I'm still using tables is to support the older browsers, really. I don't really care how it LOOKS on an older browser, just that it's functional. Does using CSS & DIV commands work with older browsers?

CSS doesnt really work that well on IE 4 and Communicator 4.x, but really what percentage of the web are we talking about? Or, more specifically, what percentage of the people that surf your site?

ESPN.com uses CSS for layouts instead of tables, so if they do it, so should you.

Quote:

---

Originally Posted by diffusionx

CSS doesnt really work that well on IE 4 and Communicator 4.x, but really what percentage of the web are we talking about? Or, more specifically, what percentage of the people that surf your site?

---

That's true... I don't know why I'd want to support IE 4 and Nutscrape 4.

Thanks for reminding me.

Go all-CSS, and keep the red color.

One note on the bottom line "site design (v16.0) and content..." is that it is unreadable on my Windows machine here. I've read that Safari on Mac sets default font sizes differently than the web-standards Windows browsers set them at (I believe 14pt on Safari and 12pt on Windows browsers). I'd say set fonts in pixels (px) instead of points (pt) - you already seem to be - and make sure that you don't set anything below 9px.

Edit: Okay, it seems that you aren't using any default font sizes. I edited your CSS in FireFox and changed the footer from 8px to 9px font and that works well. So... fix the footer font :)

Quote:

---

Originally Posted by kabuki

Go all-CSS, and keep the red color.

One note on the bottom line "site design (v16.0) and content..." is that it is unreadable on my Windows machine here. I've read that Safari on Mac sets default font sizes differently than the web-standards Windows browsers set them at (I believe 14pt on Safari and 12pt on Windows browsers). I'd say set fonts in pixels (px) instead of points (pt) - you already seem to be - and make sure that you don't set anything below 9px.

Edit: Okay, it seems that you aren't using any default font sizes. I edited your CSS in FireFox and changed the footer from 8px to 9px font and that works well. So... fix the footer font :)

---

Did I type 8 instead of 9 for the footer? Yes, I did. Thanks for pointing that out. :)

I can just toss the following into the CSS, right?

Code:

---

DIV { some default div stuff }
.colortop { options }
.colorbottom { options }
etc.

---

That works just like the table, correct? Because I could even do that with P commands and IMG commands. I don't know if you noticed that.

But yeah, I'm fond of the red, too.

Oh yeah, would you guys suggest switching to XHTML?

Quote:

---

Originally Posted by Mike

I can just toss the following into the CSS, right?

Code:

---

DIV { some default div stuff }
.colortop { options }
.colorbottom { options }
etc.

---

That works just like the table, correct? Because I could even do that with P commands and IMG commands. I don't know if you noticed that.

---

I'm not really following you here... do you mean to fully switch from tables to divs?

Quote:

---

Oh yeah, would you guys suggest switching to XHTML?

---

Definately. Its pretty darn simple to do. This might help you: http://www.w3schools.com/xhtml/default.asp