Dreamweaver Article

Applying CSS from Screen to Print to Handheld – Part 4: Navigation and Main Content

Building the Navigation Bar

The original layout of your design uses table cells to hold the navigation bar. You'll be changing this system for a more accessible one. Your navigation system will be built on an unordered list.

Tip: You will need to use a compliant browser to see the effects of your CSS applied correctly. Rather than list all the browsers that get it right, I advocate using Firefox. You won't want to use Internet Explorer 6 or earlier for testing what you do in this section of the tutorial because those browsers just don't get it right. You will learn how to correct the problem in Part 5 where I discuss workarounds in detail.

Your navigation system will consist of five CSS rules. The goal is to create a series of clickable CSS buttons. Obviously you don't want every link on your page to inherit this type of appearance, so you will target the navigation links using descendant selectors to ensure that only the links in your navigation function this way.

Here are the five selectors you will be creating:

• #leftcol ul
• #leftcol ul li
• #leftcol li a
• #leftcol li a:hover
• #leftcol li a:focus

The space between each of the selector names (for example, #leftcol[space]ul) is a descendant combinator. In plain English, the first rule reads like this: Find an element with an ID of leftcol, and then look for a ul element within the element that has an ID of leftcol and apply the property and values within the #leftcol ul CSS rule to that element only.

Effectively you are creating a mapping to a specific element in a specific location within your design. All the rules in the list above work in exactly the same way.

In Dreamweaver, switch to Code view and then follow these steps to write your rules directly into the health.css style sheet and make good use of Dreamweaver's code hints:

• View the movie: Building the Navigation Selectors

1. Locate the final value in the #leftcol selector.
2. Place your cursor after the ; character and press Enter.
3. Type (don't forget the semicolon).

4. Insert a blank line below the #leftcol selector and type the following (pressing Enter after each line):

   #leftcol ul {
   list-style-type: none;
   border-top: 1px solid #333;
   }
   #leftcol ul li {
   border-bottom: 1px solid #333;
   background-color: #d5edb3;
   }
   #leftcol li a {
   display: block;
   text-decoration: none;
   color: #283f13;
   padding: 3px 0 3px 2px;
   }
   #leftcol li a:hover, #leftcol li a:focus {
   background-color: #960;
   color: #fff;
   }

Now that you have created all the required selectors for the navigation, let's look at them in detail:

The #leftcol selector

#leftcol {
    background: #996600;
    float: left;
    height: 100px;
    width: 139px;
    
}

You introduced a font-size change to your #leftcol selector—you added a font-size property and value. By setting this property on the parent container (the leftcol div) all the text within that element will inherit that element. The 80% value is gauged from the default value you set for the font size on the body rule; that value was 100.01%. This somewhat odd value ensures that some scaling bugs are taken care of when you declare small font sizes. Because this scaling bug appears in some older versions of the Opera browser, you cannot put this into your Internet Explorer–only style sheet, as you will do with other rules later in this tutorial.

The #leftcol ul selector

#leftcol ul {
    list-style-type: none;
    border-top: 1px solid #333;
}

You are doing two things in this selector. First you are removing the bullet points from the list. You don't want to display those in your navigation bar.

Second, you are adding a top border to the ul element. This serves as part of the styling you will use to give each button a top and bottom border. By setting this value here, you can then set bottom border values on the li elements without worrying about duplicating borders where you don't want them.

The #leftcol ul li selector

#leftcol ul li {
    border-bottom: 1px solid #333;
    background-color: #d5edb3;
}

The first property provides the bottom button border I mentioned earlier. The second value provides your list elements with a default background color. The background color will change on hover and on focus, as you will see shortly.

The #leftcol li a selector

#leftcol li a {
    display: block;
    color: #283f13;
    padding: 3px 0 3px 2px;
}

This selector enables your list link navigation to act like a graphic button. The property display: block; forces the behavior you want; it makes your links clickable just as if they were graphic buttons.

Note: This styling fails in Internet Explorer 6 and earlier versions, and a workaround is necessary to force this behavior. I'll discuss this workaround in Part 5 of this tutorial.

You have set a default color for your links and you have also set some padding to move the link text away from the borders. The padding, when written like this, always reads as follows, from left to right: top, right, bottom, and left.

The hover and focus selectors

#leftcol li a:hover, #leftcol li a:focus {
    background-color: #960;
    color: #fff; 
}

Because the properties and values of these two selectors are exactly the same, this gives you the opportunity to group your selectors. You can do this by separating each selector with a comment in the selector area of your CSS rule.

In these selectors you have indicated that a user is accessing a link, whether that is by a pointing device (hover) or perhaps by tabbing to a link (focus). Both methods provide the user with a visual indication that they have accessed a link before they click it.

Internet Explorer simply places a series of dotted focus marks around a link to indicate focus. Browsers that implement focus correctly apply the properties and values from the focus selector. Firefox gets this right. You might want to view the two different behaviors from these browsers by previewing and tabbing to the links after you complete this tutorial.

Adding the Navigation Elements

Now that you have created your CSS selectors for the navigation, you will want to add the required navigation elements to the page so that you can view and test your design. Follow these steps:

• View the movie: Building the Navigation List

1. In Dreamweaver, switch to Code view.
2. Place your cursor at the end of the opening leftcol div tag and press Enter.
3. Switch to Design view and select the Unordered List icon in the Property inspector.
4. Type Link One and press Enter.
5. Select the Link One text.
6. Enter # in the Link text box.
7. Type Link Two and press Enter.
8. Select the Link Two text.
9. Enter # into the Link text box.
10. Type Link Three and press Enter.
11. Select the Link Three text.
12. Enter # into the Link text box.
13. Type Link Four.
14. Select the Link Four text.
15. Enter # into the Link text box.
16. Open the health.css file.
17. Locate the #leftcol li a selector.
18. Enter text-decoration: none; to remove the link underlines.
19. Locate the #leftcol selector.
20. Delete the height property and its value.
21. Delete the background-color property and its value.
22. Save your work.

That completes the styling of your navigation.

Page 2 of 3

Previous Page

Next Page