Designing a CSS based template - part IV

Now that our color paint and pencils are tucked away, we can move on to part 4. In this chapter we will concentrate on slicing our design and determine the DIV containers.

The question you need to ask is, what are the different parts of our design? What are the different components of this page? By doing that we'll have our answer on how to slice it up. If you are a web designer it might be a rather easy answer since you are thinking about the next step, the dividing into separate DIV containers ... and no, no tables. With CSS and XHTML we create not only lighter web pages, we also make things much more flexible and much more accessible.

This is how I see my different areas, components or whatever you call them:

• the header
• the left
• the content

Exporting the gifs and jpegs

These are the different elements you need to export to gif or jpeg:

• 1. header
• 2. bg_navbutton
• 3. bg_navbutton_over
• 4. bullet_extlink
• 5. bullet_title

Ok, you probably think, "what about the background?" That's right, it's not listed here. This needs a little explainging. We want a smart solution, since we still want our content centered if we stretch our window. Here is how you should export your background. It's 1600 pixels wide and 5 pixels high (this should be enough... unless you are the proud owner of an Apple 30 inch Cinema Display ?).

Implement the background by using CSS

This is the CSS code we need to have our centered background:

Our background is a 5 pixels high "line" which is repeated vertically (repeat-y) starting horizontally centered (50%) at the top (0) of our browser window. Background-attachment: fixed, means the background will not scroll with the content, it is "fixed". We use the body tag as our selector, since our background should be applied to the entire body of our page.

View the result here.

Adding our first layout DIV containers

Now we will be adding the first layout DIV containers: our header, left and the content.

Here is the CSS for our header:

Now we use an id selector to create the header container div. An id selector is always applied to only 1 element of the page. An id attribute must be unique within the document. Our header needs to be centered, that's why we use "text-align: centered;" This line is added to our code in the body:

You'll notice that when you add this header image that it doesn't align at the very top of the page. That's why we add a "margin: 0" and"padding: 0" into our body tag selector:

1. body {
2. background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;
3. background-attachment: fixed;
4. margin: 0;
5. padding: 0;
6. }

View the result here.

If all of this is really very new to you, then this full introduction to CSS is a must read to get a better understanding of the matter. Good luck! ;-)

from www.veerle.duoh.com