Tutorial 5 - Floating next and back buttons using lists

Step 7 - Display block

To give the list items a rollover effect they need to be converted to blocks using "display: block" applied to the "a" element.

When a hyperlink is converted to block-level, Mac/Opera6 will place the underlines above the hyperlinked words rather than under them and Win/Opera will display no underline at all. These rendering issues will be dealt with in following steps.

Go to Step 8 →

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


CSS CODE
ul#navigation
{
list-style-type: none;
margin: 0;
padding: .5em 0;
border-top: 1px solid #666;
}

ul#navigation li a { display: block; }

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

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

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