HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [120]
9. Swap for an inset border when the mouse hovers on an anchor by using the #menu a:hover selector to change the border to an inset:
#menu a:hover {
border: 3px blue inset;
}
When the mouse hovers on the button, it appears to be pressed down, enhancing the 3D effect.
This list makes an ideal navigation menu, especially when placed inside one column of a multicolumn floating layout.
The inset/outset border trick is easy, but the results are a tad ugly. If you prefer, you can build two empty button images (one up and one down) in your image editor and simply swap the background images rather than the borders.
Building horizontal lists
Sometimes, you want horizontal button bars. Because XHTML lists tend to be vertical, you might be tempted to think that a horizontal list is impossible. In fact, CSS provides all you need to convert exactly the same XHTML to a horizontal list. Figure 3-2 shows such a page.
Figure 3-2: This list uses the same XHTML but different CSS.
There’s no need to show the XHTML again because it hasn’t changed at all (ain’t CSS grand?). Even the CSS hasn’t changed much:
#menu ul {
margin-left: -2.5em;
}
#menu li {
list-style-type: none;
float: left;
width: 5em;
text-align: center;
}
#menu a {
text-decoration: none;
color: black;
display: block;
border: 3px blue outset;
background-color: #CCCCFF;
}
#menu a:hover {
border: 3px blue inset;
}
The modifications are incredibly simple:
1. Float each list item by giving each li a float:left value:
#menu li {
list-style-type: none;
float: left;
width: 5em;
text-align: center;
}
2. Move the margin-left of the entire ul by taking the margin-left formatting from the li elements and transferring it to the ul:
#menu ul {
margin-left: -2.5em;
}
3. Add a horizontal element.
Now that the button bar is horizontal, it makes more sense to put in some type of horizontal page element. For example, you may want to use this type of element inside a heading div.
Creating Dynamic Lists
A simple list of buttons can look better than ordinary XHTML links, but sometimes, your page needs to have a more complex navigation scheme. For example, you may want to create a menu system to help the user see the structure of your site.
When you think of a complex hierarchical organization (which is how most multipage Web sites end up), the easiest way to describe the structure is in a set of nested lists. XHTML lists can contain other lists, and this can be a great way to organize data.
Nested lists are a great way to organize a lot of information, but they can be complicated. You can use some special tricks to make parts of your list appear and disappear when needed. In the sections “Hiding the inner lists” and “Getting the inner lists to appear on cue,” later in this chapter, you expand this technique to build a menu system for your pages.
Building a nested list
Begin by creating a system of nested lists without any CSS at all. Figure 3-3 shows a page with a basic nested list.
Figure 3-3: This nested list has no styles yet.
No CSS styling is in place yet, but the list has its own complexities:
♦ The primary list has three entries. This is actually a multilayer list. The top level indicates categories, not necessarily links.
♦ Each element in the top list has its own sublist. A second layer of links has various links in most elements.
♦ The Web Development element has another layer of sublists. The general layout of this list entry corresponds to a complex hierarchy of information — like most complex Web sites.
♦ The list validates to the XHTML Strict standard. It’s especially important to validate your code before adding CSS when it involves somewhat complex XHTML code, like the multilevel list. A small problem in the XHTML structure that may go unnoticed in a plain XHTML document can cause all kinds of strange problems in your CSS.
Here is the code for the nested list in plain XHTML: