• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 22. Web Page Layout > Creating a Sidebar

Creating a Sidebar

Sidebars are possibly the most common method used to set off navigation tools. The traditional method is to create a long, horizontal background graphic that includes the sidebar and the background color for the content area. Using CSS, though, you can create a much smaller graphic that is just the width of the sidebar and use the repeat-y property to tile the sidebar image down the left side. This technique saves download time by reducing the size of the background graphic.

To create a sidebar:


Create a graphic of a thin strip the width that you want your sidebar to be (Figure 22.10).

Figure 22.10. The background graphic used to create a sidebar 160 pixels wide.


background: #ccccccurl
→ (background_side.gif)repeat-y;}

Set up the body selector in the document to use the graphic you created in step 1, but repeat it only in the y direction (see "Setting Individual Background Properties" in Chapter 6). You'll also want to set the background color for the rest of the page (Code 22.7).

Use tables or CSS positioning to set up a left column for the sidebar's content and a right column for everything else.

In this example, I've set up two absolutely positioned columns: one for the sidebar and the other for the content (Figure 22.11).

Figure 22.11. The sidebar runs down the left side of the screen, and the background color will fill the rest of the screen to the right.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint