List Navigation
Votes: 526
Step 1
The code
Copy this code into your code view
<div id="nav"><ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About Us </a></li>
<li><a href="#">Contact us </a></li>
</ul>
</div>
The CSS
#nav {
width: 200px;
}
Lets set our main Nav div to 200 pixels wide to contain the navigation, remember when we set to "block" it will stretch to the end of the page, so this counter acts that.
#nav ul, #nav ul li {
margin: 0px;
padding: 0px;
list-style-type: none;
}
This removes the automatic padding and margin set by Mozilla and Internet explorer, and the list bullets. This is a grouped selector .
#nav ul li a {
display: block;
padding: 3px;
}
This sets all of our links to be block level items. This allows the user to click anywhere on the <a> box, not just the text. The padding of 3 is used to give it some space around the element box, but still gives room for graphics or background colors, margin would not do that.
Step 2
More css, fun fun fun!
Lets add some more to the anchor tag in the navigation ID in the unordered list.
#nav ul li a {
display: block;
background-image: url(../images/bluebutton.gif);
Add the background image to the anchor tag
height: 20px;
Tell the anchor to be 20 pixels high, this needs to be equal or greater than the height of our font size.
color: #FFFFFF;
Make the text white
background-repeat: no-repeat;
This is more of a "cover your butt" thing, it keeps the background from repeating if for some reason the anchor tag grows, if your linked text is too long it might happen.
text-decoration: none;
Get rid of the underline
padding-top: 5px;
padding-right: 3px;
padding-bottom: 5px;
padding-left: 30px;
Sets the padding around your element box, remember padding + element box = total height, so since we have 20px for a height, then 5 on the top and bottom or the element box that makes 10 , so 20 + 10 = 30 .. good thing, because our image is exactly that high!
margin-top: 5px;
margin-bottom: 5px;
This gives some spacing from the other links
font-size: 16px;
It's a good idea to set this.
}
So after doing this, your buttons should work but nothing happens when your roll over them, boring I know.
Step 3 - the roll-over
Since we did most of the work in the last step.. we essentially re-use the the settings by default.
#nav ul li a:hover {
background-image: url(../images/bluebutton_over.gif);
Set the hover background image.
background-repeat: no-repeat;
}
Should work as above.
Write a comment
- Required fields are marked with *.