CSS Zen Garden: COMPLETE

My CSS Zen Garden is finally complete! You can find it here and access the html and css from the links on the right hand side of the page if you want to create a zen garden of your own. Below is a walkthrough from start to finish. The wireframe layout is built on a half scale and uses the original color scheme I picked. You can see the changes as things progress.

I've gone with darker colors so that the greens, blues, and white backgrounds will really pop and contrast from the rest of the page. I'm really partial to using earth tones so I had to make sure I contrast with light colors rather than have the page turn into an analogous mess. Below I wanted to also highlight the final layout and use of graphic elements.

Here was my first attempt at the zen garden. I had an empty div container with measurements assigned to it, but there wasn't any content  in it! Long story short, the bounding box had white space that ran underneath my banner and also disrupted the positioning (as seen by the space in the banner from the top of the page, whereas in the final, the banner is flush to the top.

As you can see, I completely reworked the footer (thanks to Sarah Lauren's wonderful help! You can visit her page here) and had to separate the footer dive through a float so the bounding box of the entire container wouldn't consume it. I also made turned the links seen in the original CSS Zen Garden (http://www.csszengarden.com/) into a three-column layout and placed it at the bottom. 

My original homework page can be found at http://raycarey.aisites.com/mm2203/week8HW/index.html, and as sidenote, I 'd like to point out that there's interesting little tutorial linked under my navigation (or you can just visit it now through a handy link!). If you follow it, I have a JavaScript "how-to" that is essentially the equivalent of an /ap div that lets you freely position your page elements. I wouldn't recommend it for your final page layout, because everything's positioning is absolute, but when you adjust your page elements, you css page automatically updates all your page positioning and element sizes (just about everything you'd need to transfer to your working page!). I hope you enjoy and feel free to leave me feedback!

-Ray