HTML and CSS Reference
In-Depth Information
This is the effect you want for your navigation list. To fl oat the items in that list, you'll
apply the following style rule:
nav.horizontalNAV li {
font-size: 87.5%;
float: left;
text-align: center;
width: 20%;
}
Besides fl oating each list item, this style rule also reduces the text to 87.5% of the
default size, centers the text of the hyperlinks within each item, and sets the width of
each of the fi ve list items to 20% of the total width of the
nav
element. Because by
default the width of the
nav
element is equal to the width of the page body, the fi ve links
will be equally spaced across the browser window.
You'll also need to format the text of the hypertext links so that they are visible against
the black background. To do this, you'll use the following style rules:
If there is not enough
room in a container for all
of the floating elements,
they automatically wrap to
the next line in the page.
nav a {
text-decoration: none;
}
nav.horizontalNAV a {
color: rgb(255, 255, 99);
}
nav.horizontalNAV a:hover {
color: white;
}
The fi rst rule removes underlining from all hypertext links within any navigation list.
The next two rules set the color of the links in navigation lists that are part of the hori-
zontalNAV class to yellow except when a user hovers the mouse pointer over a link, in
which case the link color turns to white. You'll add these style rules to your style sheet
with the appropriate comments.
To format the navigation list:
◗
1.
Return to the
cp_styles.css
style sheet in your text editor.
◗
2.
Below the style rule for the
body
selector, add the following code, as shown in
Figure 4-20:
/* General Navigation List Style */
nav a {
text-decoration: none;
}
/* Horizontal Navigation List */
nav.horizontalNAV li {
font-size: 87.5%;
float: left;
text-align: center;
width: 20%;
}
