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
#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 {
border-right:1px solid #094747;
#tablinks a {
padding:5px 10px;
Search WWH ::

Custom Search