Designing with CSS – 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:
- Locate the
font-size
property and value and delete them. - Locate the
background-color
property and change its value to #869BCC. - Locate the
border-right
property and change it to border-bottom. - Locate the
padding
property and change the values from0 25px 0 25px
to 4px 0 6px 4px. - Locate the
text-align
property and delete it and its value ofcenter
. - Locate the
width
property and delete it and its value of9em
.
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).
Next you will add the hover
and focus
styles.
Comments