Week 7 - October 31st 2006

CSS Zen Garden Re-Build

This week's class will rebuild a layout that was designed for CSS Zen Garden. It won't match exactly, there are slight difference and a few minor problems that haven't been resolved, but overall it attains the effect of the page we're rebuilding.

For this rebuild, I have chosen the Mozart design by Andrew Brundle. The differences in our page will be that we won't be using as many images as the original page, i.e. we won't be using the images as headers. This page actually made use of images to take the place of some of the border information. Which we are not going to use. I have also re-scripted the HTML page into how I would go about this type of design. On the original page, a structure was set up that would allow multiple different sheets to be applied to it, but in this example we'll only be applying one, and so in some ways the code has been simplified, but in other ways in is more complicated in order to compensate for the images as borders.

In addition to making a complicated layout, we will look at a few new methods of designing pages, create multi-state links, and use an external stylesheet. For those that miss this lecture I'll be going over external sheets in week 8, and multi-state links in week 9 when we look at javascript rollovers.

Images

Mozart heading

Mozart background

Mozart sheet music background

Mozart fancy footer

RTF file for the source code

Finished Page

Detailed Discussion

If you look at the HTML code for this activity, you'll notice that it's still very similar to our "Universal Outline" (i.e. centreIE, allholder, header, content, footer). Of course there are some additions to it, for one I've added another div called subholder, the purpose of this div is to create a secondary holder to hold all the text areas, but allow the background image on the left side to not be covered with the text areas.

I've also made a lot of small divs throughout the page with class names of textarea, subheading, and bg. These were placed in the page so that I could add the gold borders around each section and give them background colours and other specifications.

Within the main content area you'll see this particular structure repeated:

<div class="bg">
<div class="subheadings"><h2>Sub-Heading 1</h2></div>
<div class="textarea"><p>Lorem ipsum...</p></div>
</div>
<div class="clear"></div>

The bg div is wrapped around the subheading and textarea divs, this is to create the subtle dark grey outline outside the gold outlines of the subheading and textarea divs. The clear div, is there to create a space for the background images to show through to the sheet music image.

CSS Breakdown and Description

body {
background: #292421 url(../bg-mozart.jpg) repeat-y fixed center;
color: #cfb35b;
margin: 0px;
padding: 0px;
font: small Arial, Helvetica, sans-serif;
}

These styles should all be pretty self evident after 10 weeks. This sets the background colour of the page, adds a background image that only repeats on the y-axis and places it in the horizontal centre of the page. This also sets the font and gives it a gold colour, as well as removes the margins and paddings built into the body tag.

#centreIE {
text-align: center;
}

Again, pretty self evident, the centring fix for IE6... I don't know if 7 needs this or not.

#allholder {
width: 701px;
background: url(../bg-bio.gif) no-repeat 0px 60px;
text-align: left;
margin: 0px auto;
padding: 0px;
}

This sets the width, of the allholder. Normally we use 770px, but in this case in order to have the images and everything line up properly as on CSS Zen Garden, I had to adjust the measurements. A background image is placed in the allholder, and 0px 60px indicates that it is 0px from the left, and 60px from the top. The only reason the 0px was specified was because CSS sometimes has trouble when only one direction is specified, and it'll actually apply the spacing to both direction, so to counter than we specifically set it to 0px. Padding and margins are set to 0, with auto to centre the allholder horizontally.

#subholder {
width: 533px;
float: right;
margin: 0px;
padding: 0px;
}

This sets the measurements for the subholder and makes it float to the right so that the allholder image remains visible.

#header {
background: url(../logo.jpg) no-repeat;
height: 173px;
width: 533px;
margin: 0px;
padding: 0px;
}

This sets the background of the header to the header image, with the width and height a match to the original image. Padding and Margin once again to 0.

#header h1 {
visibility: hidden;
margin: 0px;
padding: 0px;
}

Setting the H1 visibility to hidden makes the text in the header disappear, but it is still visible by speech browsers. The other alternative here would be to use an <img> tag to place the image directly in the header space with an alt attribute.

h2 {
margin: 0px;
padding: 0px;
font-size: large;
font-style: italic;
font-weight: normal;
}

This part gives all the other headings on the page a size and style.

p {
margin: 2px;
padding: 0px;
}

This piece of code just condenses the padding and margins defaultly set to <p> tags.

#menulist {
text-align: center;
margin: 0px;
padding: 0px;
}

This makes the menu text centred as well as removing the padding and margins.

#menulist li {
list-style: none;
margin: 0px 0px 10px;
padding: 0px;
}

This piece of code removes the bullets from the individual list items, and makes the items themselves a little more spaced out from each other.

#menulist a {
color: #CFB35B;
text-decoration: none;
display: block;
line-height: 20px;
font-weight: bold;
}

This sets the colour and style of the links in the menu. It also makes them act as block elements so that the hove below will be equal width for all links.

#menulist a:hover{
background: #CFB35B;
color: #000000;
}

This changes the background colour to gold, and the text colour to black on a hover event.

Continued soon...