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

I have to make CSS Zen more zen

I've been stuck on this "L" shaped layout and initially was going to go with a zombie theme. However, I think there'd be way to many colors involved and the site would get bogged down with graphic elements. I think I'll stick to earth textures, like looking at a cut away of a lawn with the grass being the open head space and then fading to black. In this layout, the largest black box is the main body text; the boxes at the bottom link out to other css zen gardens, and the right column is for the html and css link availability.

I've got to keep things simple, harmonious. For a background color scheme behind the text, I want to stay with opaque greens and light, warm browns.

@media print

Apologies everyone! After getting the About Me pages layout just the way I wanted it, I promptly broke the code by attaching a print style sheet. BUT, I realized I didn't put @media print in my script, which means, "no wonder it wasn't printing up right!...and altering all my code." *shakes head.*


I do want to document this so you can see the before:

Everything in brackets isn't supposed to be there. Not one bit.

and the after will be in my next post. I also found that adding a custom font to my page my background disappear, which was the last of last steps for me in the process, so I MUST resolve that by today.

And the renovations continue!

I find redoing my web page cathartic until something in my stylesheet overrides everything else. However, I've found a lot of good through my mistakes. A fixed background makes for smoother scrolling and lets me know how much room I have for more content. I still have to find a background color I like, but I'm rounding the edges to my images and tinkering with the drop shadow. I wish I'd remembered last week that you could add drop shadow to photos in css, rather than trying to figure out how to add drop shadow to an image and make it somehow fit in with the page it was going to be overlaid on. Stay tuned for a the media and contact me sections. About Me is up now!

http://raycarey.aisites.com/about/index.html

Renovating my web page!

So much still needs to be done! But...I'm well on my way to a warmer site. Out with the old:

and in with the new http://raycarey.aisites.com/

I'm still working on the peripheral pages (homework pages and I have to revise all my media content and features), but I already dig the use of texture. Not sure that I've settled on that color for the gutters though. I'd really like to match the color temperature of the wood grain photo.

ROYGBIV

I'm gathering photo elements in order to rebuild my web site. I liked my first run at it, but after I completed it, there were many changes I wanted to make, like adding more color and subtle textures. I'll make sure to post some "before and after" screen captures showing the differences between my old and new site as soon as it's up. In the mean time, I wanted to promote this project: http://www.photoshop.com/users/RayCarey/albums/dc159f63c710409297ba9b3f4a365ac8
That's the link to my ROYGBIV project, where I wanted to cover the color spectrum (in this case, limited to red, orange, yellow, green, blue, indigo, and violet) through photography. Fortunately, there were plenty of examples for each color at the San Francisco Zoo. Simple compositions with black, white, and black and white animals acting as bookends to the shoot. Hope you enjoy! Also, feel free to look at some of my other photo work while you're there.

-Ray

Just checked my portfolio site, against http://analyze.websiteoptimization.com/ and things are looking good. Only 31462 bytes to download the page, so for all you non-web speakers, it's small. 
Small is good. Small means my page loads faster, so if you're looking to bebop around
and surf the web, check out http://raycarey.aisites.com/ and click on my portfolio.

First of many posts...

Hello! This is my latest and greatest effort to update everyone on my current work and information. Stay tuned, as I'll be sharing my latest image projects, animations, and videos as well as links to where you can see more from me or get in touch.