Information Technology Reference
In-Depth Information
14
Here, each navigation button floats left relative to each other, so that the buttons appear left-to-
right.
#nav-wrap2 ul#nav li{
display:inline;
float: left;
position: relative;
background: transparent url(images/nav-div.png) no-repeat left top;
padding-left: 2px;
}
This defines the label that links to the page. Notice the anchor (
a{
) tag at the top.
#nav-wrap2 ul#nav li a{
display: block;
margin-top: 1px;
height: 35px;
float: left;
color: #b5d1e6;
text-decoration: none;
font-size: 120%;
}
The button changes color when you hover the mouse over it using a class called fadeThis.
#nav-wrap2 ul#nav li a:hover{
color: #fff;
}
#nav-wrap2 ul#nav .fadeThis {
position:relative;
z-index: 1;
background: none;
}
#nav-wrap2 ul#nav .fadeThis span.hover {
position: absolute;
top: 0;
left: 0;
display: block;
height: 100%;
width: 100%;
background: transparent url(images/nav-active.png) repeat-x left top;
z-index: -1;
margin: 0;
padding: 0;
}
