Creating a vertical link- based navigation bar using CSS in Dreamweaver 8

(beginner to intermediate level)

Designing with CSS is a process of seperating content from appearance. It makes sense that a list of links is just that - a list. In this tutorial we are going to create a vertical navigation bar based on a simple list.

For a live example of the navigation we are going to build click here

Step 1 - Start with a list

In this example we are going to create a vertical navigation bar for a mythical wild bird site. This will start with a list of the links we wish the navigation bar to display. Type in the text below and hit enter (win) or return (mac) at the end of each line. Then click and drag from the beginnning of about us to the end of Contact us line and click the Unordered List button on the Property Inspector.

• About us
• Attracting wild birds
• Feeding wild birds
• Feeders and bird houses
• Contact us

Step 2 - Make the list items links

Under normal circumstances you will use the link bar on the Property Inspector to either point to a file in the Files palette or use the Browse button to browse for a file but because the other pages in this site do note actually exist, I am going to create a null link. By selecting my list item and entering the pound sign # in the text box I create a placeholder link. It won't go anywhere, but will still qualify as a link as far as styling for CSS is concerned. If I were to develop this page into an actual site at some point I could then replace the # with my actual link path at some later date.

Step 3 - Enclose the list in a div

Div tags like table cells are just a way of containing and controlling your content. If you had already created a page with a div for a vertical sidebar then you would insert your list between those existing div tags. In this tutorial as we are just creating the navigation bar not the whole page so we will need to enclose our list within div tags. This will create a container to hold our vertical navigation bar.

Method 1: Using the Quick Tag Editor

Select your bulleted list by placing your cursor inside the list and then selecting the <ul> tag on the tag selector. This ensures that you are selecting the entire bulleted list <ul> not just a collection of the individual list item tags <li>. Then click the Quick Tag Editor icon at the right side of the Property Inspector, as we had content selected the Quick Tag Editor will open in Wrap Tag Mode. Type in div id="navBar" between the angle brackets and hit enter. This will insert an div with an id of navBar around our list.

Note: You can also access the Quick Tag Editor from the Code window if you prefer hand-coding.

Method 2: Using the Insert Div Tag Icon

Select your unordered list (see above) and then switch to the Layout Pane of the Insert Bar. If your Insert Bar is not displaying choose View> Toolbars > Insert. From the Layout Pane click on the Insert Div Tag icon.

From the resulting Insert Div Tag dialog box make sure that the insert drop down is set to wrap around selection. Then enter navBar in the id field and click ok. This will insert an div tag with an id of navBar around our list. At this point your list should look like the image below right.

Step 4: Style the navBar div

While it doesn't always make a difference I generally find it more effective to use an outside in approach and work my way from the outside container div in to the last tag surrounding the content, the link tag <a>.

Select the div#navBar on the Tag Selector and then click the new style button on the CSS panel. This will launch the New Style dialog box.

Choose Advanced (ID's, pseudo-class selectors)for the Selector Type.

The #navBar should already be entered as we selected the div tag before creating the new CSS rule but... if it isn't - enter #navBar in the Selector text box. The # sign means that this is an id a type of style that can be used only once per page.

For the purposes of this tutorial select the "This document only" radio button and click ok Note: you can always export your styles later by choosing File > Export > CSS styles to create an external style sheet from internal styles on a page.

From the resulting CSS Rule Definition dialog box choose the background category and enter #566B2A in the background color text box. From the Box category enter a width of 180 pixels and a padding of 10 pixels (leave the same for all button selected). Then click ok.

Your navBar should now look like image below left. Note: If you have your visual aids for the CSS box model enabled you can click on the edge of a div to see the padding which will be displayed with a hatched pattern as in the image below right. To enable visual aids click on the Visual Aids icon and make sure that CSS box model has a check mark next to it.

The space you see between the lines denoting the padding and the actual list is the default padding and margins associated with the unordered list itself.

Step 5: Style the unordered list

Place your cursor within one of the links and select the <ul> tag from the tag selector. Then select the new CSS style button to define a style for the unordered list.

From the resulting New CSS Rule dialog box you should find the correct selector already entered which is #navBar ul. If not enter it manually, making sure that the Advanced radio button is selected. Click Ok.

By specifiying the style using both the container div and the ul tag allows us to specify the look of this specific unordered list. If we had other unordered lists on our page they would not be affected.

In the result Style Definition dialog box choose the box category and for both the margins and padding leave the same for all button selected and enter 0.

In the List category choose None from the Type drop down. Click Ok.

Your navigation bar should now look like the image below left. The image below right shows that the the bullets have been removed and that unordered list snugs up right to the padding specified for the container div.

Step 7: Style the links

Place your cursor within one of the links and select the <a> tag from the tag selector. Then click the New Style button. The selector for this style should be #navBar a so that we are affecting the links only within the navBar div.

In the box category set the top and bottom margins to 6 and for the padding leave the same for all button selected and enter 4 as the amount.

In the border category check the same for all button and choose solid for the Style, thin for the Width and #333300 for the color.

In the block category set the display to block - this will allow the entire area specified by the link tag (including padding) not just the text to be clickable.

We also need to specify a width for our #navBar a rule - if we don't specify the width Internet Explorer will not render this properly and will not allow the will only allow the text to be clickable even though we specified block as the display type. So return to the box category and add 170 for the width (this is calculated by taking the 180 width of the div and subtracting the left and right padding and 2 pixels for the left and right border of our #navBar rule.

Step 8 - Styling the a:link and a:visited states

Place your cursor within one of the links and click the <a> tag on the tag selector. Then click the New CSS rule icon on the CSS Styles panel. Even though we selected the a tag in the tag selected we will need to add a bit more. The selector should be #navBar a:link, #navBar a:visited which will allow us to specify both the link and visited states of these links at the same time.

In the Background category

• set the background color to # 809f3E

In the Type category

• set the font to Arial, Helvetica, sans-serif
• set the font-size to 12 px
• set the text -decoration to none
• set the colour to #333300
• set the font-weight to 400

Click Ok

Step 9: Create a new style for a:hover state

Place your cursor within one of the links and click the <a> tag on the tag selector. Then click the New CSS rule icon on the CSS Styles panel. The new CSS rule dialog should open with #navBar a we need to add :hover so that we are specifying the style for just the hover state. Make sure this document only is selected and click ok.

In the Background category

• set the background color to # D1E0B1

Click here to see the finished example