• Choose a category
• All
• Classic-Fiction

#menu li {

list-style-type: none;

border: black solid 1px;

float: left;

width: 10em;

background-color: #CCCCCC;

text-align: center;

}

This causes the list items to appear next to each other in the same line.

♦ Give each list item a width. In this case, 10em seems about right.

♦ Indent a deeply nested list by having the first-order sublists appear directly below the parent.

A list nested deeper than its parent is hard to read. A little indentation helps a lot with clarity.

♦ Use #menu li li li to indent nested list items, as shown here:

/* indent third-generation lists */

#menu li li li{

margin-left: 1em;

}

This selector is active on an element which has #menu and three list items in its family tree. It will work only on list items three levels deep. This special formatting isn’t needed at the other levels but is helpful to offset the third-level list items.

These tricks are just the beginning of what you can do with some creativity and the amazing power of CSS and HTML. You can adopt the simple examples presented here to create your own marvels of navigation.

These menu systems work pretty well, but if they’re used in a standard layout system, the rest of the page can shift around to fit the changing shape of the menus. To avoid this, place the menu using the fixed mechanisms described in Chapter 4 of this minibook.

Chapter 4: Using Alternative Positioning

In This Chapter

Setting position to absolute

Managing z-index

Creating fixed and flexible layouts

Working with fixed and relative positioning

Floating layouts (described in Chapter 3 of this minibook) are the preferred way to set up page layouts today but, sometimes, other alternatives are useful. You can use absolute, relative, or fixed positioning techniques to put all your page elements exactly where you want them. Well, almost exactly. It’s still Web development, where nothing’s exact.

Still, the techniques described in this chapter will give you even more capabilities when it comes to setting up great-looking Web sites.

Working with Absolute Positioning

Begin by considering the default layout mechanism. Figure 4-1 shows a page with two paragraphs on it.

I used CSS to give each paragraph a different color (to aid in discussion later) and to set a specific height and width. The positioning is left to the default layout manager, which positions the second (black) paragraph directly below the first (blue) one.

Figure 4-1: These two paragraphs have a set height and width, but default positioning.

Setting up the HTML

The code is unsurprising:

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

If you provide no further guidance, paragraphs (like other block-level elements) tend to provide carriage returns before and after themselves, stacking on top of each other. The default layout techniques ensure that nothing ever overlaps.

Adding position guidelines

Figure 4-2 shows something new: The paragraphs are overlapping!

Figure 4-2: Now the paragraphs overlap each other.

This feat is accomplished through some new CSS attributes:

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