Styling the Navigation

With the handheld version of your site now appearing with the correct dimensions, you can begin to style your navigation. Begin with the skip link and then the leftcol div navigation. Scrolling on handheld devices can be a little awkward at times, so the skip link plays an important role in how the navigation of your site works.

Handheld devices display your code in the order it is written. This, of course, doesn't mean that handheld devices don't support float. They do, but you cannot expect them to display three columns either! This means that your users need to scroll past the skip link, then the leftcol navigation, and then the rightcol div's information before they get to your main content.

This is pretty inconvenient, so I will show you how to use the skip link to rectify this problem—in the much the same way that a screen-reader user would click the skip link to access the main content area.

• View the movie: Styling the Navigation

Complete the following series of steps:

1. Create a new selector.
2. Type #leftcol ul { and press Enter.
3. Type list-style-type: none; and press Enter.
4. Type } and press Enter.

Create a grouped selector for your navigation styles:

1. Type #skip a, #leftcol a { and press Enter.
2. Type display: block; and press Enter.
3. Type padding: 2px; and press Enter.
4. Type background-color: #006600; and press Enter.
5. Type color: #fff; and press Enter.
6. Type text-decoration: none; and press Enter.
7. Type margin: 2px 0; and press Enter. (This shorthand for applying 2 pixels of margin space to the top and bottom of the element and zero pixels to the left and right.)
8. Type } and press Enter.

Create a rule for your active styles:

1. Type #skip a:active, #leftcol a:active { and press Enter.
2. Type background-color: #cc6600; and press Enter.
3. Type } and press Enter.
4. Save your work.
5. Open health.html in Design view.
6. Turn on CSS Layout Backgrounds so you can see your navigation blocks.
7. Preview your page in Opera.
8. Press Shift+F11 to put Opera into handheld mode.
9. Return to the HealthHandheld.css file.
10. Change the default font size on the body rule to 80%.
11. Add a background-color property to the body rule.
12. Type background-color: #fff; and press Enter.

13. View the page in the browser (see Figure 3)



Figure 3. Opera displaying the page in handheld mode

Page 3 of 6

Previous Page

Next Page