Creating the Navigation Selector

The next element to design within the flow of the page is the container for the navigation. Make this an id selector and give it a name of nav. Depending on your preferences, you can either hand-code the selector and use Dreamweaver’s code hints or you can work through the CSS Styles panel (press Shift+F11) and Dreamweaver’s dialog boxes.

Define your nav ID selector to have a black border, 1 pixel wide, and on only the bottom edge.

1. Place your cursor below the #banner selector.
2. Type #nav{ and press Enter. The code hints appear.
3. Select border-bottom from the list and press Enter.
4. Type the short-hand for the value: 1px solid #000000;
5. Type } to close the selector.

Your nav selector should look like the following:

#nav{
 border-bottom: 1px solid #000000; 
}

Adding the ul Element

You will use an inline list for the navigation menu. The first thing you need to define is the ul element that holds the list items. Earlier I mentioned the benefits of using zero for default margins to provide a level playing field to start from. This is an important part of working with lists because browsers render them so differently from one another. Some use padding, while others use margins. So let’s use zero for the padding and margins of the ul element:

1. Open basiclayout.css in Dreamweaver.
2. Place the cursor after the closing “}” of the nav div.

3. Press Enter twice and type #nav ul{ on the line.

   This opening line of the selector declares that the rules you apply here will apply only to ul elements that are a descendant of the #nav ID. If you had simply declared this line as ul{, then any rules you determine here would have been applied to all ul elements wherever they are located on the page. This is also an example of specificity. In short, you are pattern-matching the layout of this document. The selector says, find the nav div and, if any ul elements exist within the nav div, style them like this.

   

   Note: I discussed descendant selectors and pattern matching in Part 1 of this series.

4. Press Enter and type padding: 0; to set the padding.
5. Press Enter and type margin: 0; to set the margin.
6. Press Enter and type background-color:#00FF99; to set the background color.
7. Press Enter and type } to close the ul element definition.

You do not actually need to type each property out in its entirety. Watch the code hints and select the property and value you need. Once you are used to working with code hints, you will be able to create CSS rules quickly and easily. It is worth persevering with this method of hand coding. Just remember to add a semicolon after each value.

The #nav ul selector should look like the following:

#nav ul{
 padding: 0;
 margin: 0;
 background-color:#00FF99;
 }

Defining How to Display the li Element

The next step in the process of creating the navigation is to define how the li element (list item element) appears within the ul element (list element). CSS makes it quite easy to create a horizontal navigation system. By default, list items are stacked on top of one another. But you can change this quite easily by using the display property and the inline value. When you apply the display: inline; rule, lists are moved to a horizontal plane and bullets are dropped.

You should be pretty much up to speed at coding selectors by now, so I’ll show you the next selector and discuss what it does:

#nav ul li{
 display: inline;
 padding: 0;
 margin: 0; 
}

Do you see the use of descendant selectors to pattern-match the document? The opening line finds the #nav ID, sees if it contains a ul element, and, if it does, looks within that ul element and see if it contains an li element; if all these conditions are met, then the line applies the the following rules to the li element.

I’m sure you can see now how these selectors are taking shape. You are being very specific about the areas of the XHTML document that you want to affect with your rules. To be specific, you’ll use descendant selectors to pattern-match the elements as they appear within the XHTML code.

Besides the display: inline; rule, the remaining properties in this selector are zero for the default padding and margin settings, which you have done on many occasions in this article series.