Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Designing with CSS in Dreamweaver MX 2004 – Part 5: Making Changes to the Link Styles

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.

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

Figure 3

Figure 3. Navigation where links act like buttons

Next you will add the hover and focus styles.

Comments