Creating a simple horizontal navigation bar in CSS

1. Examine the web page. The web page for this exercise—graphical-navigation.
html—is designed for flexibility when it comes to styling elements on the page,
making it easy to change elements without touching the markup (this page is used
with a few modifications in subsequent exercises, too).
The page’s contents are placed within a wrapper div, within which are the masthead
and content divs. The latter contains some paragraphs, and the former
includes a navContainer div, which houses a navigation div, which in turn houses
the unordered list shown in the following code block. (This nesting of divs isn’t
required for all sites—often you can get away with a single div around the navigation
list—or, indeed, none at all, applying the id value of navigation to the list
itself; however, having an additional wrapper or two is often useful for more complex
layouts.)
The list is an unordered list. The main difference to previous lists is the inclusion of
an id value for each list item. For horizontal lists, especially those that will be highly
styled, this is worth doing, because it enables you to work all manner of CSS trickery
later on, which can benefit the web page. (In fact, some of the techniques can
be applied to vertical lists, too.)
<ul>
<li id="homePageLink"><a href="#">Home page</a></li>
<li id="servicesPageLink"><a href="#">Services</a></li>

<li id="customerSupportPageLink"><a href="#">Customer support</a>
å</li>
<li id="contactDetailsPageLink"><a href="#">Contact details</a></li>
</ul>

2. Edit the body and p rules. This design is going to have a classic feel, so in the CSS
file, edit the body rule to amend the font set, add a light gray background, and
amend the p rule to change the font size.
body {
font: 62.5%/1.5 Georgia, "Times New Roman", Times, serif;
background: #dddddd;
}
p {
font-size: 1.3em;
margin-bottom: 1em;
}

3. Style the structural divs. First, add a rule to style the wrapper div, as shown in the
following code block. This sets a fixed width for the div, centers it horizontally, and
applies borders on all edges except the top one. The background value provides a
white background for the page’s content. (Note that there’s plenty of explanation
about page layout in Chapter 7.) For the content area, add some horizontal
padding by adding the #content rule shown in the following code block.
#wrapper {
width: 700px;
margin: 0 auto;
border-right: 1px solid #898989;
border-bottom: 1px solid #898989;
border-left: 1px solid #898989;
background: #ffffff;
}
#content {
padding: 0 15px;
}

4. Style the navigation container by adding the following rule to style the
navContainer div. In this rule, the font style for the navigation bar’s links is set,
and the text-align value centers the content horizontally. The padding value
applies some padding at the top and bottom of the navContainer div, ensuring
its content doesn’t hug its edges—in design, the space is often as important as the
content, so don’t cram things in.
#navContainer {
font: 1.1em/1 Georgia, "Times New Roman", Times, serif;
background: #d7d7d7;
text-align: center;
padding: 7px 0px;
border-top: 1px solid #898989;
border-bottom: 1px solid #898989;
margin-bottom: 10px;
}

5. Style the list items. Now that the structure’s styled, it’s time to get cracking on the
list. First, add a rule to remove the default bullets from the unordered list within
the navigation div.
#navigation ul {
list-style: none;
}
Next, set the list items to display inline, as with the breadcrumbs. Add some horizontal
padding, and also, as shown, add a border to each item’s right-hand edge,
which will act as a visual separator, making each link more distinct.
#navigation li {
display: inline;
padding: 0px 9px;
border-right: 1px solid #aaaaaa;
}
If you test the page at this point, you’ll see that all the links have a right-edge border—
not a terrible crime—but from a design standpoint, the one at the far right
shouldn’t have one (after all, separators are only needed between pairs of links).
Luckily, because of the id values applied to the list items earlier, each one can be
individually styled, which also means an override can be applied to a specific link.
In this case, add the following rule, which removes the border from the list item
with an id value of contactDetailsPageLink:
#navigation #contactDetailsPageLink {
border-right: none;
}

6. The last thing to do is style the links. The following rules set the link text to uppercase,
removing the default underline and coloring them black by default. The links
are then gray on the visited state, have an underline on the hover state, and are
red on the active state.
#navigation a:link, #navigation a:visited {
text-transform: uppercase;
text-decoration: none;
}
#navigation a:link {
color: #000000;
}
#navigation a:visited {}
#navigation a:hover {
text-decoration: underline;
}
#navigation a:active {
color: #ff0000;
}

**NOTE :In this example, the color of the navigation links—which have no underline—is the
same as the body copy. While this would be a very bad idea for inline links, it’s fine for
the navigation links, because they’re obviously distinct from the text elsewhere on the
page, due to the background color and horizontal line that separates the navigation
area from the content area.