The Power of CSS

The colors for every element on the page are based on 6 hex values which only appear once in the entire file, you edit these values and you have an entirely new theme for this design.

Pixel dimensions are specified only a few times (where I had to), but for the most part everything is relative to the fonts you have and the screen resolution you are using. This gives the page as much width as it can get while the fonts and layout have as much compatibility as possible.

The Evolution of this Design

I'm not exactly sure where it all started, but I think the first idea I found for this was from waferbaby where I realized that you could actually make rollovers, by specifying different background colors in a style sheet.

The layout for this is very common, but I guess I settled on it after looking at designs like Libra (by whompy) and Pretension (by krsna77) for a while. I also referred to Pretension for a lot of the style sheet information, mostly the fonts and the idea of making fonts relative sizes (%) rather than using specific sizes.

Two of the most challenging aspects of this whole thing were getting everything to look the same in both IE and Mozilla and setting up the style sheet so it had some flexibility. This was of course most difficult with the menus. Mozilla doesn't have quite as good of support for css as IE, but I was really quite surprised how well it all worked out in the end. In fact, when I converted the html to xhtml I started having problems with IE and all of a sudden Mozilla was working perfectly. The biggest difference was made when I specified the left menu links to display as block elements in the style sheet. This is what was done on the waferbaby website.