In the last installment of the CSS Starter Page series, we added Sliding Door navigation above the header of the layout. In this article, we'll instead add a horizontal navigation bar beneath the header. We'll use an unordered list for accessibility, and change the list items from block to inline elements so that they'll appear side-by-side. We'll then style the list and links to integrate the navbar with the rest of the layout.

This tutorial includes support files so that you can play along at home.

The CSS Starter Page Series:
The CSS Starter Page Series - Part 1: Faux-Column Images
The CSS Starter Page Series - Part 2: More Background Images
The CSS Starter Page Series - Part 3: Three-Column Fluid Background Images
The CSS Starter Page Series - Part 4: Rounded Corner Background Images
The CSS Starter Page Series - Part 5: Shadows and Rounded Corner Background Images
The CSS Starter Page Series - Part 6A: Adding Navigation Schemes
The CSS Starter Page Series - Part 6B: Adding Navigation Schemes Part Two
TheCSS Starter Page Series - Part 6C: Adding Navigation Schemes Part Three ...

Related Articles

• Introducing CMX JumpStart: Stelvio Pass - Gallery
• CMX JumpStart: Stelvio Pass - Gallery
• Displaying Horizontal List Navigation in Dreamweaver's Design View
• The CSS Starter Page Series Part 10: Adding a Print Style Sheet
• YouTube Extension
• The CSS Starter Page Series - Part 9: Working with the Conditional Comment
• The CSS Starter Page Series Part 8: Managing Content with Spry
• Extending Dreamweaver CS4: Part 4 - Digg This!
• Extending Dreamweaver CS4: Part 3 - Phatfusion SortableTable
• The CSS Starter Page Series Part 7: Adding A Spry Menu Bar

• Extending Dreamweaver CS4 - Part 1: The TNC Lightbox
• Dreamweaver Built-In CSS Help Features - Part 3: CSS Layout Backgrounds
• The Adobe BrowserLab Web Service
• CMX JumpStart: Siberia
• Introducing CMX JumpStart Siberia
• Dreamweaver's Built-In CSS Help Features: Part 2 - CSS Layout Box Model
• Dreamweaver Built-In CSS Help Features - Part 1: CSS Layout Outlines
• The CSS Starter Page Series Part 6b: Adding Navigation Schemes Part Two
• A Beginner's Guide to Spry - Part 5: Spry Menu Bar
• The CSS Starter Page Series Part 6A: Adding Navigation Schemes