Designing with CSS – Part 5: Building site navigation

Note: This tutorial was written for Dreamweaver CS3. Although Dreamweaver CS4 adds new CSS functionality (revised Property inspector, Code inspector, related files), the CSS panel in Dreamweaver CS4 has not changed, and you should still be able to follow this tutorial using Dreamweaver CS4.

In this fifth section of the Designing with CSS tutorial series, we’ll build a navigation bar in our sample website. To accomplish this, we’ll use an unordered list. Using lists to create site navigation helps keep your pages accessible, as well as making the navigation content easy to update. If you missed any of the previous sections, it may be helpful for you to review them to become familiar with the concepts previously discussed before beginning this part:

• Part 1: Understanding CSS design concepts
• Part 2: Defining style properties and working with floats
• Part 3: Using CSS Positioning for site layout
• Part 4: Styling headers and main content

In this article, we’ll discuss CSS tips and design considerations. After we complete the navigation bar, we’ll take a look at a minor display issue with the image in the header div that occurs when the page is viewed in Internet Explorer—and we’ll discover how to quickly and easily resolve the issue.

Building a vertical unordered list navigation

If you haven’t already, download the provided sample files, or open the files we used in Part 4 of this tutorial series. Launch Dreamweaver and open index.html with the Document window in Design view. At the moment, the sidebar1 div holds some default content; this content consists of a heading followed by three links in paragraph text content. First, we’ll remove the paragraph text. You can complete this task by following the steps below:

1. Click inside the paragraph text, immediately below the Sidebar1 Content heading.
2. Select the <p> tag in the Quick Tag Selector at the bottom of the Document window.
3. The paragraph text in the sidebar1 Content is highlighted because it is selected, (see Figure 1).

4. Press the delete key.
5. The paragraph text is removed from the page design.
6. Repeat the above steps and remove the second paragraph, (see Figure 2).

After you’ve removed the placeholder content in the sidebar1 Content div you are ready to begin building your site navigation.

• Play the demo: Vertical list navigation

Here are the steps reviewed in the demo:

1. Click to the right of the Sidebar1 Content heading.
2. Press the enter (or return) key.
3. Type the following text: Link 1
4. In the Property inspector, select the unordered list button.
5. The paragraph with the text "Link 1" has been changed to an unordered list.
6. Press the enter (or return) key to add a new set of <p> tags.
7. Type the following text: Link 2
8. Press the enter (or return) key to add a new set of <p> tags.
9. Type the following text: Link 3
10. Click the cursor within the unordered list, (Link 1, Link 2, Link 3).
11. Open the CSS Styles panel by selecting Window > Styles.
12. Click the New CSS style button.
13. Dreamweaver has created the descendant selector for you. It is displayed in the Selector text field.
14. Make sure the menu option for Define in: is set to the external CSS style sheet for this project (the twoColElsLtHdr.css file in the CssFiles folder of the sample files).
15. Click OK.
16. In the CSS Rule Definition dialog box, select the List item in the Category column.
17. In the drop-down menu next to Type: select none.
18. In the drop-down menu next to Position: select inside.
19. In the Category column, select Type.
20. In the text field next to Size: type: 80
21. In the drop-down menu next to Size: select %.
22. Click OK.
23. The page design updates to reflect the recent changes

Next, we’ll add a little left margin to the li elements, to move the navigation away from the edge of the page and give the design some breathing room.

• Play the demo: Setting the links in the list navigation

Here are the steps reviewed in the demo:

1. Select the first linked text item, (Link 1).
2. In the Property inspector, type the number sign (#) into the Link field.
3. Repeat steps 1 and 2 twice, for Link 2 and Link 3.
4. Click the cursor inside one of the link items.
5. Click the New CSS style button.
6. Select the Type option from the Category column.
7. Click the Color Picker cube.
8. Select the blue header background color using the eyedropper tool in the Color Picker.
9. In the Decoration option, select none.
10. Select the Box option from the category column.
11. Deselect the "Same for all" option in the Margin section.
12. In the Right: text field, type 1.
13. In the adjacent drop-down menu, select ems.
14. Select the Background option from the Category column.
15. Click the Background Color Picker cube.
16. Select the hexadecimal value #FFFFCC (a pale yellow color).
17. In the margin-left text box, type: 1
18. From the adjacent drop-down menu, select ems.
19. Click the cursor in Design view.
20. The page design updates to reflect the recent changes
21. In the CSS Styles panel, expand the Box section and select the padding option.
22. In the padding option text field, type: 2px.
23. In the CSS Styles panel, expand the Display section.
24. In the drop-down menu, select block.
25. Selecting the block option makes the links act like buttons.
26. Save index.html and the CSS style sheet.

Let’s take a moment to review what we just did. We created the basis for our navigation; we’ve added the unordered list and the text that will be used for the links. Next, we’ll change the text into navigation links.

Now that we’ve created a style for the linked text in the navigation bar, we’ll add a hover effect that will interact with the users cursor when they run their mouse over the links.

• Play the demo: Adding the a:hover rule

Here are the steps reviewed in the demo:

1. Click the cursor inside one of the links in the sidebar1 div.
2. In the CSS Styles panel, click the New CSS style button.
3. In the New CSS Rule dialog box, click to the right of the a element, (see Figure 3).

4. In the Selector text field, type: :hover with no space after the a element.
5. Make sure your CSS style sheet is selected in the Define in: drop-down menu.
6. Click OK.
7. In the CSS Rule Definition box, select the Type: option from the Category column.
8. Click the Color Picker cube and select the hexadecimal value #000000 (black).
9. Select the Background option from the Category column.
10. Set the background color to the hexadecimal value #FFFFCC.
11. Save the CSS style sheet.
12. Press F12 to view the index.html page in a browser. Test the navigation buttons by rolling your cursor over the linked text to check the rollover effects, (see Figure 4).

The navigation system for the sample site is now complete.

If you’ve been examining the sample project in different browsers, you may have noticed that the image in the header displays a small gap beneath it, (see Figure 5). This gap also appears in Internet Explorer, but does not exist in Firefox. We’ll fix this minor display issue now.

• Play the demo: Correcting the header image

Here are the steps reviewed in the demo:

1. Click on the header image to select it.
2. In the CSS Styles panel, click the New CSS style button.
3. In the New CSS Rule dialog box, note that Dreamweaver has already created the selector for you.
4. Click OK.
5. Select the Block option from the Category column.
6. In the Display: drop-down menu, select the block option.
7. Click OK.
8. The page design updates in the Design view and the gap below the header image disappears.
9. Save the CSS Style Sheet.
10. Select File > Preview in browser to view your page using Internet Explorer.
11. Notice that the issue is resolved: The gap under the image has disappeared, (see Figure 6).

You may have noticed that much of the work we’ve done in this tutorial series has involved the use of descendant selectors. If you plan to use the new CSS Layouts included in Dreamweaver CS3, I recommend becoming as familiar as possible with using descendant selectors. While we’ve seen how well Dreamweaver handles the CSS for you, it is also great to be able to edit the code and modify the style sheet by hand when desired.

Where to go from here

After you’ve experimented with the settings described in this tutorial, proceed to Part 6 of this tutorial series. The final article will examine the code you’ve created in the sample site and describe best practices for creating sites that use CSS for site layout and design. Get started by going to, Designing with CSS – Part 6: Using Dreamweaver CS3 compatibility checks for browser compatibility.

Also, if you want to learn more about topics described in this tutorial, see a previous article I wrote, CSS design basics with Dreamweaver – Part 6: Defining and using descendant selectors.