Help
If you would like to create a horizontal navigation menu out of an unordered set of links, like the example shown in Figure 7.13, you'll appreciate this excerpt from Christopher Schmitt's CSS Cookbook, Third Edition.
First, create a properly constructed set of unordered links:
<div id="navsite" class="clearfix"> <p>Site navigation:</p> <ul> <li><a href="/">Home</a></li> <li><a href="/about/">About</a></li> <li><a href="/archives/">Archives</a></li> <li><a href="/writing/">Writing</a></li> <li><a href="/speaking/" id="current">Speaking</a></li> <li><a href="/contact/">Contact</a></li> </ul> </div>
Then set the CSS rules for the navigation structure, making sure
to adjust the list items to float, as shown in Figure 7.14:
#navsite p {
display: none;
}
#navsite ul {
width: 100%;
float: left;
padding: 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
<span class="strong"><strong>#navsite ul li {</strong></span>
<span class="strong"><strong>list-style: none;</strong></span>
<span class="strong"><strong>margin: 0;</strong></span>
<span class="strong"><strong>float: left;</strong></span>
<span class="strong"><strong>}</strong></span>
#navsite ul li a {
padding: 12px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background-color: #666;
text-decoration: none;
background-image: url(title-glass.png);
background-position: 50%;
background-repeat: repeat-x;
display: block;
width: 7em;
}
#navsite ul li a:link {
color: white;
}
#navsite ul li a:visited {
color: #667;
}
#navsite ul li a:link:hover, #navsite ul li a:visited:hover {
color: #000;
background-color: #aae;
border-color: #227;
}
#navsite ul li a#current {
background-color: white;
border-bottom: 1px solid white;
color: #448;
margin-bottom: −1px;
}
#navsite ul li a#current:hover {
background-image: url(title-glass.png);
background-position: 50%;
background-repeat: repeat-x;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* for IE6 */
* html .clearfix {
height: 1%;
}
/* for IE7 */
*:first-child+html .clearfix {
min-height: 1px;
}
The first part of the Solution hides the heading. This is done because the visual representation of the tab navigation design is enough to inform users that these are navigation links:
#navsite p {
display: none;
}
The next rule defines the padding and margin for the box that is
created by the unordered list element, ul. The line
that stretches across the bottom of the folder tabs is drawn by the
border-bottom property (see Figure 7.15):
#navsite ul {
width: 100%;
float: left;
padding: 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
The declaration that makes this horizontal navigation work with
the unordered list is float for the list items:
#navsite ul li {
list-style: none;
margin: 0;
<span class="strong"><strong>float: left;</strong></span>
}
Note
Another method for building horizontal menus is to use the
inline property. Although both
approaches do obtain a horizontal appearance, by setting a list item
to float, you still retain the block-level
properties of the element, allowing you to set properties such as
margin and width for consistent
menu tags. If you don’t want consistent tab widths, or if you prefer
the spacing between the menu labels to be consistent, the
inline property is an acceptable alternative with
the padding-left or
padding-right property.
Instead of stacking the list items on top of each other by default, the browser now lays out the list items as it would text, images, and other inline elements (see Figure 7.16).
To create the look of the folder tab, use the border property in the following CSS
rule:
#navsite ul li a {
padding: 12px 0.5em;
margin-left: 3px;
<span class="strong"><strong>border: 1px solid #778;</strong></span>
<span class="strong"><strong>border-bottom: none;</strong></span>
background-color: #666;
text-decoration: none;
background-image: url(title-glass.png);
background-position: 50%;
background-repeat: repeat-x;
display: block;
width: 7em;
}
The first border property is a shorthand
property that dictates a solid, 1-pixel border around the link. However,
immediately following the border property is the
border-bottom property, which tells the
browser not to display a border beneath the link.
The value of the border-bottom property is
displayed over the border shorthand property (as
shown in Figure 7.17). This overwriting occurs
because the border-bottom declaration overrides the values in the
border declaration because of the order in which they are
declared.
After you’ve created the look of the border tab, set the color of the text links and rollover states:
#navsite ul li a:link {
color: white;
}
#navsite ul li a:visited {
color: #667;
}
#navsite ul li a:link:hover, #navsite ul li a:visited:hover {
color: #000;
background-color: #aae;
border-color: #227;
}
The final CSS rule defines how the “current” link appears. This style is applied to the link that represents the page being viewed by the user (see Figure 7.18):
#navsite ul li a#current {
background: white;
border-bottom: 1px solid white;
}
Next, add a self-clearing float to the entire
navigation menu on the div element. This makes sure
that any text or content in the rest of the page doesn’t wrap around the
menu navigation:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* for IE6 */
* html .clearfix {
height: 1%;
}
/* for IE7 */
*:first-child+html .clearfix {
min-height: 1px;
}
The original tab menu bar (as well as other navigation styles) at http://css.maxdesign...orizontal05.htm
Learn how to solve the real problems you face with CSS. This cookbook offers hundreds of practical examples for using CSS to format your web pages, and includes code samples you can use right away. You'll find exactly what you need, from determining which aspects of CSS meet the specific needs of your site to methods for resolving differences in the way browsers display it.
