<html5>
<head>
</head>
<style type="text/css">
/*
Creating a graphical nav bar
*/
/*
As in the previous examples, the margin and padding are zeroed, the list bullets are removed,
and a width is set for the navigation bar. An overflow of hidden is also applied to the navigation
list in order to clear any enclosed floats.
*/
ul.nav {
margin: 0;
padding: 0;
list-style: none;
width: 72em;
overflow: hidden;
}
/*
Like the previous example, the list elements are floated left to make them display horizontally
rather than vertically. However, this time, the larger of the two images that make up the tab is
applied as a background image to the list item. As this image forms the right side of the tab, it is
positioned to the right
*/
ul.nav li {
float: left;
background: url(img/tab-right.gif) no-repeat right top;
}
/*
As in the previous example, the anchors are set to display as block-level elements to make the
whole area clickable. The width of each tab is again controlled by the width of the contents, and
setting the line height similarly controls the height. To complete the tab effect, the left part of the
tab is applied as a background on the anchor and aligned left. As the tab changes size, this
image will always be aligned left, sitting over the top of the larger image and covering the hard left
edge. Last, to make sure this technique works in IE 5.2 on the Mac, the anchors are floated as
well.
*/
ul.nav li a {
display: block;
padding: 0 2em;
line-height: 2.5em;
background: url(img/tab-left.gif) no-repeat left top;
text-decoration: none;
color: #fff;
float: left;
}
/*
To create the rollover effect, you can simply change the link color:
*/
ul.nav a:hover,
ul.nav a:focus {
color: #333;
}
</style>
<body id="home">
<ul class="nav">
<li><a href="home.htm">Home</a></li>
<li><a href="about.htm">About</a></li>
<li><a href="news.htm">News</a></li>
<li><a href="products.htm">Products</a></li>
<li><a href="services.htm">Services</a></li>
<li><a href="clients.htm">Clients</a></li>
<li><a href="case-studies.htm">Case Studies</a></li>
</ul>
</body>
</html5>
