Discover the Secrets of CSS

The menu bar under the header is styled with the multi_level_menu.css style sheet from the Stylib library, and you will notice if you visit the Stylin’ Web site that the drop-downs of this menu are transparent and the underlying page is visible through them.

This transparency is created programmatically using the various CSS opacity options of the different browsers.

On the left navigation bar is a transparent round-cornered box that can increase in height as more content is added. The transparency here is created not programmatically but graphically, by using three .png background images with their transparency levels set in Adobe Fireworks. The center area of the box can expand as content is added, through the use of a repeat setting on the CSS for the background of the element. I also added the small sign-in form that we saw in Chapter 6 inside this area.

In the content column, the text wraps itself around a floated image, followed by an unordered list. On the right sidebar is an image of the book cover with a drop shadow (the shadow was created in Adobe Photoshop), with a simple unordered list of links below.