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.