• Choose a category
• All
• Classic-Fiction

You can achieve this effect using a combination of positioning techniques.

Figure 4-8:

At first glance, this is yet another two-column layout.

Figure 4-9: The page scrolls to the Gamma content, but the menu stays put.

Setting up the XHTML

The HTML for the fixed menu page is simple (as you’d expect by now):

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

type = ”text/css”

href = ”fixedRelative.css” />

Fixed Position

The XHTML has only a few noteworthy characteristics:

♦ It has a menu. The div named menu contains a list of links (like most menus).

♦ The menu has internal links. A menu can contain links to external documents or (like this one) links inside the current document. The Alpha code means create a link to the element in this page with the ID alpha.

♦ The page has a series of content divs. Most of the page’s content appears in one of the several divs with the content class. This class indicates all these divs will share some formatting.

♦ The content divs have separate IDs. Although all the content divs are part of the same class, each has its own ID. This allows the menu to select individual items (and would also allow individual styling, if desired).

As normal for this type of code, I left out the filler paragraphs from the code listing.

Setting the CSS values

The interesting work happens in CSS. Here’s an overview of the code:

/* fixedRelative.css */

body {

background-color: #fff9bf;

}

h1 {

text-align: center;

}

#menu {

position: fixed;

width: 18%;

}

#menu li {

list-style-type: none;

margin-left: -2em;

text-align: center;

}

#menu a{

display: block;

border: 2px gray outset;

text-decoration: none;

color: black;

}

#menu a:hover{

color: white;

background-color: black;

border: 2px gray inset;

}

#menu h2 {

text-align: center;

}

.content {

position: relative;

left: 20%;

width: 80%;

}

.content h2 {

border-top: 3px black double;

}

Most of the CSS is familiar if you’ve looked over the other chapters in this minibook. I changed the menu list to make it look like a set of buttons, and I added some basic formatting to the headings and borders. The interesting thing here is how I positioned various elements.

Here’s how you build a fixed menu:

1. Set the menu position to fixed by setting the position attribute to fixed.

The menu div should stay on the same spot, even while the rest of the page scrolls. Fixed positioning causes the menu to stay put, no matter what else happens on the page.

2. Give the menu a width with the width attribute.

It’s important that the width of the menu be predictable, both for aesthetic reasons and to make sure the content isn’t overwritten by the menu. In this example, I set the menu width to 18 percent of the page width (20 percent minus some margin space).

3. Consider the menu position by explicitly setting the top and left attributes.

When you specify a fixed position, you can determine where the element is placed on the screen with the left and top attributes. I felt that the default position was fine, so I didn’t change it.

4. Set content position to relative.

By default,