HTML and CSS Reference
In-Depth Information
Listing 12-3. Styling of List Items to Be Displayed Inline
li {
display: inline;
}
A simple style frequently applied for the hyperlinks of such list items are bottom borders (Listing 12-4).
Listing 12-4. Bottom Border for Menu Hyperlinks
a:hover {
color: #949295;
border-bottom: 1px solid #949295;
}
Naturally, this style is seldom applied globally. Instead, it is extended with the identifier of the list or its container
parent element such as #main a:hover or #navtabs li a:hover .
A usual technique for creating custom navigation effects is to add a background image to the list items.
Listing 12-5 shows an example.
Listing 12-5. Custom Navigation Effect with a Background Image
li {
background: url('images/navbg.png') 5px no-repeat;
padding-left: 16px;
}
If certain links, such as the first, the last, or the currently selected one, have different styles than all the others,
unique identifiers should be provided for them (Listing 12-6).
Listing 12-6. More Specific Rules for the First and Last Items
<ul>
<li id="first">
<a href="http://www.example.com/" title="Home" accesskey="h" tabindex="1">Home</a>
</li>
...
<li id="last">
<a href="contact/" title="Address and phone" accesskey="c" tabindex="7">Contact</a>
</li>
</ul>
The first ruleset can be styled as shown in Listing 12-7.
Listing 12-7. A Specific Ruleset for the First List Items
li.first {
background: none;
padding-left: 0;
}
 
Search WWH ::




Custom Search