tag. Each link serves as a separate button.
3. Build the CSS file that combines the background graphics and the links.
4. Apply the appropriate CSS ID to the
tag??”and let CSS do the rest.
In addition to standard rollover behavior, this technique makes it possible to style an individual list item as
the current page indicator, as shown in Figure 15-6.
FIGURE 15-6
Turn a bulleted list into a navbar with CSS and just two low-bandwidth images.
CAUTION CAUTION
529
Creating Lists 15
Step 1: Preparing background graphics
A little bit of prep work is needed before you can begin applying CSS to your list. The first step is to use a
graphics program, such as Fireworks 8, to make the button images. Two separate but similar images are
needed: one for the initial button look and another for the rollover view.
Here??™s the process I used to create my graphic images with Fireworks:
1.
Pages:
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980