HTML and CSS Reference
In-Depth Information
Note To achieve this visual effect, you don't actually even need to wrap each link in a div element—by
“promoting” the inline a element to a block element, you could float them, apply padding and margins and
so on to get the same effect. However, if you have total control over the HTML for these navigation blocks,
you would be wise to put them in an unordered list, as previously noted.
Setting the Link Color and Background Image for the Current Tab
We have just a couple of small tasks left to do—set the font color for the links and set a back-
ground that is going to be used for the current page:
#tablinks a:link,
#tablinks a:visited,
#tablinks a:hover,
#tablinks a:active {
color:white;
text-decoration:none;
}
#tablinks a.current {
background:#047070 url(tab-bg-hover.gif) repeat-x top;
}
Remember to set the class of current to the appropriate link (applied to the a element,
not the containing div ):
<div><a href="/travel/" class="current" >Travel</a></div>
The final result is shown in Figure 8-12.
Figure 8-12. The finished product: styled div s in a tab-like style
Note In the previous example it would be up to you to manually or programmatically write in the current
class for the section you're in. There is a smarter way of achieving this using CSS contextual selectors that
takes the effort out of this; see Chapter 12.
Search WWH ::




Custom Search