Go to the Background FAQ

How do I create a bar at the left side?

This is one of the more popular questions, lately. What people want is to create a bar at the left side of the screen, with buttons on top of it, and the real content of the page to the right of it. Actually... A page just like this one... ;-)

This is what I did to create it:

  1. First I created the background image. It's an image of 1199 by 10 pixels. At the left we see the colorbar; it's about 95 pixels wide and a part of the image. The rest of the image is transparent, so you will see the color specified with the BGCOLOR attribute to the BODY element.

  2. Then I made the HTML document with the image that I created in step 1 in the background. The tricky part is that we don't want the normal text to appear on the bar! To separate the text from the colorbar I used a table.
    If you take a look at the source of this document you will notice that I set the left column of the table to a fixed width, using a transparent image.

To the left of this text you will find two buttons. For the purpose of clarity about how these tables are put together I turned the border of this table on. When you create the buttons in your image-editor, make sure you put the background image behind the buttons you want. This is the only way to make sure you get a smooth (anti-aliased) border.

The first button is the text put on a white colored background. The second button was made using the future background image... You will notice the smooth borders with button two. There's an important pitfall here: the different browsers don't have the same margin at the left side! So when you created the page on your Mac and the graphics are in the perfect place, there's a big change that they won't be in place if you watch the same page on a UNIX platform. I have chosen to put them somewhere in between :-)

Because of the different left margins of the browsers you will have to make parts of your button, that are actually the background, transparent. Button three, for instance, wasn't made transparent and you will directly notice the slightest shift to the left or right.

You might be tempted to make a background image with a gradient of just one pixel high. This might not be such a good idea for people viewing in a 256-color mode. To the right of this text you see what this page looks like with a background of just one pixel high and viewed on a computer in 256-color mode:

And now the same area with a background of 10 pixels high. You see that Netscape is finally able to dither the gradient areas, to create as good as possible the gradient pieces.

Go to the Background FAQ