HTML and CSS Reference
In-Depth Information
Figure 3-14.
Styled footer links on PixelLogo.com
It all starts with the markup, of course, since we need to give unique IDs to each of our
lists:
<div id="footer">
<ul id="nav-a">
<li><a href="#">Logo Catalog</a></li>
<li><a href="#">Web Templates</a></li>
<li><a href="#">Logo FX</a></li>
<li><a href="#">Stationery</a></li>
</ul>
<ul id="nav-b">
<li><a href="#">Contact Us</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">About Us</a></li>
</ul>
<ul id="nav-c">
<li><a href="#">Affiliates</a></li>
<li><a href="#">Logo Design Resources</a></li>
<li><a href="#">Logo Design Samples</a></li>
<li><a href="#">Logo Templates</a></li>
<li><a href="#">Logo Design</a></li>
</ul>
</div>
So we have three lists, each with a different ID, and all three contained by a
div
. Let's apply
some styles:
#footer ul {
float:left;
margin:30px 0 0 20px;padding:0;
font-size:85%;
list-style:none;
}
#footer ul li { line-height:1.4; }
#footer ul li a {
