精通CSS高级Web标准解决方案 Chapter 6

精通CSS高级Web标准解决方案

Chapter 6 Styling Lists and Creating Nav Bars

In this chapter you will learn about
• Styling lists with CSS
• Using background images as bullets
• Creating vertical and horizontal nav bars
• Using sliding doors tabbed navigation
• Pure CSS drop-downs
• Creating CSS image maps
• Creating remote rollovers
• Using definition lists

Basic list styling

Basic list styling is very simple. Say you start with this simple to-do list:

• Read emails
• Write chapter
• Go shopping
• Cook dinner
• Watch Lost

To add a custom bullet, you could use the list-style-image property. However, this doesn’t give
you much control over the position of your bullet image. Instead, it is more common to turn list
bullets off and add your custom bullet as a background image on the list element. You can then
use the background image positioning properties to accurately control the alignment of your
custom bullet.
Older versions of Internet Explorer and Opera control list indentation using the left margin,
whereas most modern browsers, including Firefox and Safari use left padding. As such, the first
thing you will want to do is remove this indentation by zeroing down the margin and padding on
the list. To remove the default bullet, you simply set the list style type to none:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
Adding a custom bullet is very straightforward. Applying padding to the left side of the list item
creates the necessary space for your bullet. The bullet is then applied as a background image on
the list item. If the list item is going to span multiple lines, you will probably want to position the
bullet at or near the top of the list item. However, if you know the contents of the list items won’t
span more than one line, you can vertically center the bullet by setting the vertical position to
either middle or 50%:
li {
background: url(/img/bullet.gif) no-repeat 0 50%;
padding-left: 30px;
}
The resulting styled list can be seen in Figure 6-1.

Creating a basic vertical nav bar

As always, you need to start with good, semantic mark-up:

• Home
• About
• Our Services
• Our Work
• News
• Contact

The first things you want to do are remove the default bullets and zero down the margin and
padding:
ul.nav {
margin: 0;
padding: 0;
list-style-type: none;
}
You can then start layering on the graphical styling. In this case, I’m giving my navigation menu a
light green background and a dark green border. I’m also going to set the width of my navigate list
in ems.
ul.nav {
margin: 0;
padding: 0;
list-style-type: none;
width: 8em;
background-color: #8BD400;
border: 1px solid #486B02;
}