HTML and CSS Reference
In-Depth Information
Don't worry, though, we'll sort this problem out soon. You just need to start with these
items all reset and then push them into the correct positions.
Padding Out the Links
A link is an inline element and thus cannot have heights or top and bottom padding values
set—or at least it can't unless we “promote” it to a block-level element using
display:block
.
And that's precisely what we recommend with any link that you have inside a list item. The
link will stretch to fill the available area and you can then apply background colors, borders,
and padding to your heart's content. We'll use that technique on the navigation that sits on the
left of the screen. In the CSS that follows, we've also applied a small margin to the left of each
of the list items to push them away from the left edge of the page, and we've set a width to
match the container it sits in (using ems, as this is an elastic page layout).
#navigation li {
margin:0 0 0 10px;
width:8em;
}
#navigation li a {
display:block;
border-bottom:1px solid #033;
text-decoration:none;
padding:2px 2px 2px 5px;
}
Note
Notice that the
text-decoration
property is set to
none
? You may hear people say that all links
should be underlined or, conversely, that nothing should be underlined unless it's a link. In body text, this is
certainly true, but in a navigation list, often the underline of the text is at odds with the width of the naviga-
tion block. The underline only applies to the wording, and each link is going to be slightly different. In short, it
can look a little ugly and staggered, especially if the link is inside a button-like container. For this type of link,
it's perfectly acceptable to switch off the underline—people using your web site will know it's a navigation
link without the underline.
■
The link is given some padding to take the text away from the edges. But how do you
know where the edges are? A hint is provided by a border that sits underneath the link.
Because the link is now a block-level element, it stretches to fill all the available space, as
shown in Figure 12-13.
Figure 12-13.
The link fills the available space once it's converted to a block-level element.
