This is similar to the Google exercise, but now we're going to throw positioning into the mix. What makes it particularly difficult is that we're going to try to imitate a CSS Zen Garden layout.

A bit of background... CSS Zen Garden is probably the best resource you'll ever find on doing full-CSS layouts. It's a really incredible website that I would highly recommend all of you check out sometime. They're more or less doing something similar to what we're doing, with one HTML page and many different CSS documents that style the page to look radically different with each submission.

Of course, the important thing we want to imitate here is the layout, not the designs. That is your mantra for this exercise... don't worry about finding the right color or getting the background image: just try to put everything in the right place.

As with the Google exercise, I will provide you with an HTML template that you may not alter. It is slightly different from the default CSS Zen Garden template... hopefully simpler. I will also give you a CSS template to start with, although you will probably find that it doesn't start you off that much, other than listing all of the IDs that can be found in the HTML document.

I've chosen four out of the many Zen Garden official layouts for all of you to pick one and try your luck on. They are the following:

• Dave Shea's tranquille

• Dan Rubin's Not So Minimal

• James Abbott's Egyptian Dawn

• Clinton Barth's Zen Pool

---

Here's a starting list of things to think about when you are trying to figure out how to do a CSS-only layout.

• Break the layout down into obvious sections. We're not looking so much at individual IDs and divs as we are the overall picture. Which IDs make up the majority of the content? Which IDs make up the navigation? Where are they in relation to each other?

• Once you've got the "main" sections figured out, the next step is to figure out how exactly you would go about positioning them and to just try it. Remember what was said about block elements and set sizes: an element whose size has not be definitely set will automatically stretch to become as large as is necessary. This means you may want to set the width for some IDs so that you can move them more easily, and so that they will float properly.

• The CSS template has some borders written in to start you off. You may get rid of them if you like (they are obviously not within any of the layouts that you are trying to imitate), but it may be to your advantage to leave them in temporarily to help you see exactly what boxes you have, how big they are, where they are, etc. Borders can be extremely useful when dealing with all-CSS layouts because they make it obvious what space is available and what space is being taken up.

• Experiment! You don't know what to do? Well, just try random stuff! Much of this is guess and check; try something, doesn't work, erase, try something else. There should be a lot of guess and checking on your part, and in this case it's really not that bad of a thing.

• Remember, you should concentrate solely on getting things to be in the proper place. Don't worry about design!

---

HTML template: http://128.32.250.91/~kass/zengarden/zengarden.html
CSS starter file: http://128.32.250.91/~kass/zengarden/zenstyles.css

haha

What have I said? :P

CSS is so intuitive... if you want to do a certain thing, you can probably GUESS at what the property is. Now what do you suppose the property to control the background image of an element would be, hmm?

Not the correct answer. Guess again. No really. GUESS. If you wanted to change the BACKGROUND IMAGE of the body, how would you do it?

body {
       ________________: _______;
}

What do you suppose goes in the first blank?

Correct. Mostly. You guessed the right property, at least. :P Of course, the img that you used is an HTML tag and has no place in CSS, but since this is the first time we've touched on this, you can hardly be expected to know the right way to put in an image through CSS.

background-image: url("imagename.jpg");

You do not need to put in an alt, since it's not an actual image that goes in with the rest of the content. It's a mechanism for changing the appearance of a site, which is why it's controlled by CSS. Make sense?