• Choose a category
• All
• Classic-Fiction

left: 50px;

top: 50px;

margin: 0px;

}

Working with z-index

The only change in this code is the addition of the z-index property. Here are a couple things to keep in mind when using z-index:

♦ One element can totally conceal another. When you start positioning things absolutely, one element can seem to disappear because it’s completely covered by another. The z-index attribute is a good way to check for this situation.

♦ Negative z-index is undefined. The value for z-index must be positive. A negative value is undefined and may cause your element to disappear.

♦ It may be best to give all values a z-index. If you define the z-index for some elements and leave the z-index undefined for others, you have no guarantee exactly what will happen. If in doubt, just give every value its own z-index, and you’ll know exactly what should overlap what.

♦ Don’t give two elements the same z-index. The point of the z-index is to clearly define which element should appear closer. Don’t defeat this purpose by assigning the same z-index value to two different elements on the same page.

Building a Page Layout with Absolute Positioning

You can use absolute positioning to create a page layout. This process involves some trade-offs. You tend to get better control of your page with absolute positioning (compared to floating techniques), but absolute layout requires more planning and more attention to detail. Figure 4-4 shows a page layout created with absolute positioning techniques.

The technique for creating an absolutely positioned layout is similar to the floating technique (in the general sense).

Overview of absolute layout

Before you begin putting your page together with absolute positioning, it’s good to plan the entire process. Here’s an example of how the process should go:

1. Plan the site.

Having a drawing that specifies how your site layout will look is really important. In absolute positioning, your planning is even more important than the floating designs because you’ll need to specify the size and position of every element.

Figure 4-4: This layout was created with absolute positioning.

2. Specify an overall size.

This particular type of layout has a fixed size. Create an all div housing all the other elements and specify the size of this div (in a fixed unit for now, usually px or em).

3. Create the XHTML.

The XHTML page should have a named div for each part of the page (so if you have headers, columns, and footers, you need a div for each).

4. Build a CSS style sheet.

The CSS styles can be internal or linked, but because absolute positioning tends to require a little more markup than floating, external styles are preferred.

5. Identify each element.

It’s easier to see what’s going on if you assign a different colored border to each element.

6. Make each element absolutely positioned.

Set position: absolute in the CSS for each element in the layout.

7. Specify the size of each element.

Set the height and width of each element according to your diagram. (You did make a diagram, right?)

8. Determine the position of each element.

Use the left and top attributes to determine where each element goes in the layout.

9. Tune-up your layout.

You’ll probably want to adjust margins and borders. You may need to do some adjustments to make it all work. For example, the menu is 150px wide, but I added padding-left and padding-right of 5px each. This means the width of the menu needs to be adjusted to 140px to make everything still fit.

Writing the XHTML

The HTML code is pretty straightforward:

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

type = ”text/css”

href = ”absLayout.css