HTML and CSS Reference
In-Depth Information
Figure 8-11.
Our links are in the right place, but they need more work.
Styling the Links
We need to do the following to get this looking the way we want:
•
Apply a background image to the entire horizontal strip
•
Give each one of the links a bit of padding
•
Add some borders between the links
•
Create a background image that can be used to identify the current location in the site
Applying a Background
This is a straightforward job. We simply tile a background image to the strip, repeating it along
the x-axis. In the design, there is a slight fade from the top strip, so we need to anchor it at the
top:
#tablinks {
background:#336868 url(tab-bg.gif) repeat-x top;
}
Padding Out the Links and Adding Borders
Where we've floated the
div
elements that contain the links, the widths have all collapsed
down. We can add
padding
in—all around, as it happens—because these are block elements
that we're dealing with and as such they honor
padding
and
border
attributes that we set. We'll
set the
border
at the
div
level but we'll set the
padding
to the link inside. Why? Because we want
to apply a different background to the link on hovers and on the current page, so we want the
link to stretch all the way out to the container rather than be pushed in by
padding
that's
applied to the
div
element.
In order to add
padding
to the link (an inline element) inside the floated
div
element (a
block-level element), we need to convert the link to a block-level element. This is easily done!
#tablinks div {
float:left;
border-right:1px solid #094747;
}
#tablinks a {
display:block;
padding:5px 10px;
}
