Tutorial 5 - Floating next and back buttons using lists

Step 5 - Adding a line above the list

To add a line above the floated list, use the shorthand rule "border-top: 1px solid #666;". Netscape 4 does not like this rule, so it should be hidden from the browser using "@import".

Go to Step 6 →

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

list-style-type: none;
margin: 0;
padding: 0;
border-top: 1px solid #666;

ul#navigation .left
float: left;
width: 5em;

ul#navigation .right
float: right;
width: 5em;

Lorem ipsum dolor sit amet...
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
Other Max Design articles and presentations
Associated with webstandardsgroup.org