Home | Audio | DIY | Guitar | iPods | Music | Brain/Problem Solving | Links| Site Map

This work is licensed under a Creative Commons License.

Designing with CSS – Part 5: Building site navigation

Adobe
Adrian Senior
www.webade.co.uk
www.communitymx.com
www.ukcsstraining.co.uk
Created: 16 April 2007

User Level: Beginner, Intermediate

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 p that occurs when the page is viewed in Internet Explorer—and we’ll discover how to quickly and easily resolve the issue.

Requirements

To complete this tutorial you will need to install the following software and files:

Dreamweaver CS3

• Try
• Buy

Sample files

• css5_samples.zip (ZIP, 27K)

Prerequisite knowledge

This tutorial describes how to create site navigation using Dreamweaver CS3 and assumes you are familiar with working with both Internet Explorer and Firefox browsers. (Other browser options: Safari, Opera, Flock, Google Chrome, or compare browsers.) This is Part 5 of a six-part tutorial series—be sure to review Part 4 of this tutorial to review the topics discussed in that section before continuing.

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 p 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).

   

   Figure 1. After selecting the <p> tag in the Quick Tag Selector, the paragraph text is highlighted to indicate it is selected

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).

   

   Figure 2. Delete the two paragraphs of text below the header in the sidebar1 Content p

After you’ve removed the placeholder content in the sidebar1 Content p 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 p.
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).

   

   Figure 3. Create the hover selector for the linked text in the New CSS Rule dialog box

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).

    

    Figure 4. The navigation links use a hover effect to create rollover buttons

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.

Figure 5. The header image is displayed with a small gap when the page is viewed using Internet Explorer browser.

• 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).

    

    Figure 6. View the page in Internet Explorer to check that the gap below the header image has disappeared.

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.

About the author

 

Adrian Senior owns the UK-based web design agency Webade, which has been in business since 1998. He is also a member of Team Macromedia and a partner at Community MX. The year 2004 saw Adrian's first trip to America, where he visited Orlando and delivered two sessions at the TODCon conference.

Adrian also provides training courses for companies who need to train their designers how to build compliant, accessible web sites using CSS and xhtml.

He's been married to his wife, Janette, for 24 years and has two children, Antony and Eleanor.

Home | Audio | DIY | Guitar | iPods | Music | Links | Site Map | Contact

Top