Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.


They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us info@westciv.com.

quick tutorials

Side panel

This recipe shows you how to use your style sheet to create a side panel running down the left side of your page, like this. You'll also learn how to use the same recipe to create a decorative heading.

Why would you want to do this?

The obvious answer is for decoration, but my design philosophy is that decoration does not have to be purely decorative. For example, you might wish to have the same side panel in different color schemes for the different parts of your site to help your users know where they are. Using style sheets, changing the side panel to update your site is a snap.

OK, I'm convinced. What do I do?

1. make a gif

The basic technique here is to have a small gif which will look attractive and convincing when simply repeated down the page.

Daniel Greene's Style Sheets demo page has a column of ivy down the left hand side of every page. He's used this gif to create the effect.

So, get to work with Photoshop or whatever package you want to use and come up with a picture or design that will repeat sensibly, save it as a gif, and you're ready to go.

2. your style sheet

In your style sheet you need to create a selector to select the BODY of the page. Then you want to give the BODY a background-image using the background-image property.

This is very straightforward, simply

BODY {background-image: URL(../gifs/main-panel.gif)}

Obviously, replace what's inside the round barackets with the URL of the gif you created above.

At this stage, you will just fill the whole background with the image repeating itself both down and across the page, which isn't what you want at all. So here's the clever part.

You need to make the gif repeat in the "y" direction only, that is, down the page, not both down and across. Again it's easy if you know how. Your finished code should look like this.

body {background-image: URL(../gifs/main-panel.gif);

background-repeat: repeat-y}

If you are using Internet Explorer you might have noticed that on some of the examples of a side panel the side panel does not scroll with the text. This is easy to do, and it doesn't affect the appearance of the page on Netscape Communicator (it just doesn't work :-).

All you have to do is also give a background-attachment value to the body, like this

body {background-attachment: fixed;

background-image: URL(../gifs/main-panel.gif);

background-repeat: repeat-y}

Make sure your style sheet is linked to the HTML document you want the side panel to appear on, and away you go.

Not working? Check...

1. Have you saved the style sheet?

2. Have you linked the style sheet to the HTML document?

3. Is the URL for the repeating gif correct?

4. Remember the "fixed" effect is not supported in Netscape Communicator.

3. Different panels for different parts of the site


Empowering your Markup for Web 2.0

Style Master developer John Allsopp tells you all you need to know about this exciting new approach to web development

If you have a site that has a number of different sections you may wish to distinguish these sections from one another by giving them similar but different side panels to different parts of the site.

Now if you've only got one style sheet for the whole site, as you usually would, you can't just apply the background image to the <BODY> selector. What you have to do is create a number of different classes for the <BODY> selector, one for each part of your site. Your selectors will look something like this





Now simply go through and apply the background properties to each of these different selectors, defining the appropriate URL for each section.

body.main {background-image: URL(../gifs/main-panel.gif);

background-repeat: repeat-y}

body.archive {background-image: URL(../gifs/archive-panel.gif);

background-repeat: repeat-y}

body.news {background-image: URL(../gifs/news-panel.gif);

background-repeat: repeat-y}

body.members{background-image: URL(../gifs/members-panel.gif);

background-repeat: repeat-y}

Next you have to go to each of your HTML documents and give the BODY in each of them the appropriate class. The code looks like this.

<body class="main"> in the Main section

<body class="archive"> in the Archive section

<body class="news"> in the News section

<body class="members"> in the Members section

Now that you've done this, and made sure that the style sheet is in fact linked to each of the pages, changing the look of the side panel is as simple as creating a new gif but giving it the old name.

4. A Decorative Heading

A background image which repeats in this way can be applied to any element in a page.

So, using exactly the same technique as above, but applying it to a heading you have

h1 {background-image: URL(../gifs/heading1.gif);

background-repeat: repeat-y}

Once you start doing this the possibilities are endless for achieving nifty effects with very small gifs, but remember that in page design, as with all design, less is more, so use your new technique wisely.

Style Master CSS Editor

Web Directions Conference