HTML and CSS Reference
In-Depth Information
border: 2px solid #ff9e05;
background-color: #fc0;
}
#nav-main:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
#nav-main ul {
list-style: none;
margin: 0;
}
#nav-main li {
float: left;
border-right: 2px solid #ff9e05;
}
We've also added
text-transform:uppercase
to display the text in all capitals, and a right border to
each list item to match the border around the entire navigation bar. Figure 10-8 shows the current
rendered state, but we're not quite done with it yet.
Figure 10-8.
The navigation bar is horizontal now, but still needs more work
Without a width, floated elements collapse around their contents. These navigation links all line up, but
they're bunched tightly together and nearly impossible to read. Links render as inline elements by default,
so they take up no more space on the page than their contents. We could easily pad the list items to
create some inner spacing between their edges and their contents, but the active, clickable links would be
no bigger than the words themselves.
Small links can sometimes be a difficult target to hit with a mouse click (or finger tap on mobile devices).
So why not pad the links and make a bigger clickable, tappable target? We've done just that in Listing 10-
16. We've also removed the usual underline from the normal and visited link states, but the underline will
appear when a user hovers over the link, focuses it, or activates it. We're declaring a background color
twice: first as a fallback for older browsers that don't support RGBA color, then again for newer browsers
that do support RGBA (this goes way back to Chapter 2).
