robglazebrook.com

I must be in a web design mood again. The signs are all there: I’m making time to write here when otherwise I’d do homework, I’m visiting the css Zen Garden daily (they’ve updated again… check it out) and getting jealous every time, and I’m also doing web design. Go figure, eh?

Megan’s website was the victim yesterday. She’d asked me to redesign her site a while back, but I’d been putting it off, as much out of time constraints as a lack of inspiration. She knew she wanted “music-type stuff.” That’s not as helpful as you’d think. *g*

Yesterday, however, I was inspired. I sat down at the computer at 10am, and by the time Megan got home from work around 3pm, her site was nearly completed. I got her approval on most of the stuff, a few suggestions on a couple of things, tweaked it a bit, and now it is as you see it. If you haven’t seen it, check it out.

In case you never saw the ‘before’ version, or can’t remember what it looked like, here’s a screenshot (as almost always, click to enlarge):

It wasn’t a bad design, per se. It just wasn’t great. The colors were a little vivid, the boxes were a little clunky, and it lacked a lot of personality. Mostly because it’s a minimal variation on one of the stock Blogger templates. And it was all basic CSS and crude tables.

Here’s what it looks like now:

I think it’s an improvement. The colors are more subtle and easier on the eyes, the boxes, through shadows and backgrounds, are softer, and the page looks a whole lot more “Megan.” It’s also structured with divs and styled entirely with CSS, which turned out to be a helluva challenge.

The layout still has one big flaw in just about every browser but IE: the menu background only extends to the bottom of the screen. If you scroll down, it’s gone. I’m considering this a flaw in the design of the other browsers, though I’m still trying to figure out a work-around. The menu, which is contained inside a div spanning the entire length of the site, is set to have a height of 100%. IE makes the menu 100% of the containing block, and the background stretches accordingly. Everything else stretches the background to 100% of the screen, which is quite different.

You know what? Forget what I just said. I just had a minor revelation. I’m using absolute positioning to get the menu where I want it, which takes it out of its containing box. A height of 100% would be 100% of the screen. This background might be working through a flaw in IE. Funny stuff. :) I’ll let you know if I figure out a better way of doing it. Floats weren’t working well earlier, but maybe I can make them work.

Sometimes, the thought of using tables for layout purposes is damn appealing. :)