Dreamweaver Article

Designing with CSS – Part 5: Defining Columns and Vertical List Navigation

Restyling the Unordered Navigation List

Begin by making changes to your #leftcol #nav ul selector. It should currently look similar to Listing 1.

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

Listing 1. #leftcol #nav ul selector code

Change the code in Listing 1 so it resembles the version in Listing 2.

#leftcol #nav ul {
margin: 0; 
padding: 0;
background-color: transparent;
list-style-type: none;

border: 1px solid #000000;
}

Listing 2. Revised #leftcol #nav ul selector code

Open basicalyout.css in Dreamweaver, locate the #leftcol #nav ul selector, and complete the following steps. Remember that while you type in the style sheet, your CSS code hints are active. Take advantage of them and monitor what they are offering as you type. Code hints speed your workflow dramatically:

1. Locate the background-color value delete it and type transparent.
2. Place your cursor after ; and press Enter.
3. Type list-style-type: none; and press Enter. When you set the value of this property to none it removes the bullets from the list items.
4. Type and press Enter. The percent value you set here scales the font size based on the default percentage you set in the body selector.
5. Type border: 1px solid #000000;. This shorthand code sets the border for all four sides in accordance with the given values. In this case the borders will be one pixel wide, solid, and black.
6. Save your work.

Making Changes to the Link Styles

To change the default, or inactive, state of the links in your new navigation system, you first need to locate the #leftcol #nav ul li a selector (see Listing 3). Quite a selector name, isn't it? Earlier I discussed the advantages of being very specific with your selectors; this is an ideal time to review that discussion and refresh your memory. By using descendant selectors, you can pattern-match your selectors right down through the markup of your XHTML document. This gives you much flexibility. If you had set this selector as simply #leftcol #nav, then every link in your nav div would have taken on the same appearance. Surely you wouldn't have wanted that.

#leftcol #nav ul li a{

color: #FFFFFF;
background-color: #3333CC;
text-decoration: none;
padding: 0 25px 0 25px;
border-right: 1px solid #000000;
text-align: center;
width: 9em;
}

Listing 3. #leftcol #nav ul li a selector code

The list navigation is going to be styled to make it react in the same manner as a button graphic might. Any links styled like that, which were not a part of the main navigation, would have looked very odd indeed. By being specific, however, you can create a totally different link style that sits in the nav div but outside the ul element. Change this selector to reflect the code in Listing 4.

#leftcol #nav ul li a{
background-color: #869BCC;
border-bottom: 1px solid #000000;
color: #000000;
display: block;
padding: 4px 0 6px 4px;
text-decoration: none; 
height: 1%;
}

Listing 4. Revised #leftcol #nav ul li a selector code

To make the necessary changes, complete the following steps:

1. Locate the font-size property and value and delete them.
2. Locate the background-color property and change its value to #869BCC.
3. Locate the border-right property and change it to border-bottom.
4. Locate the padding property and change the values from 0 25px 0 25px to 4px 0 6px 4px.
5. Locate the text-align property and delete it and its value of center.
6. Locate the width property and delete it and its value of 9em.

Add two new property and value pairs to this selector:

• display: block;
• height: 1%;

The display: block; property makes your links act like buttons. The link will be clickable along its entire width—except in Microsoft Internet Explorer for Windows. To work around this problem, I deployed the "Holly Hack" and gave the link a height of 1%, which makes IE behave in the proper manner.

Note: Read more about the Holly Hack on CommunityMX, where none other than Holly Bergevin herself explains how it works.

Save your work and preview basiclayout.html in your favorite browser (see Figure 3).

Figure 3. Navigation where links act like buttons

Next you will add the hover and focus styles.

Page 3 of 5

Previous Page

Next Page