Tutorial 5 - Floating next and back buttons using lists

Step 11 - Text decoration and alignment

At this point you may wish to remove the text underline. It is common practise for navigation not to have underlines as their placement and other feedback mechanisms make them more obviously links. However, you should be aware that modifying standard hyperlink behavior (such as underlines) can be confusing for some users, who may not realise that the item is a link.

We will also center the text within the box using "text-align: center".

Go to Step 12 →

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;
width: 5em;
color: #FFF;
background-color: #036;
padding: .2em 0;
text-align: center;
text-decoration: none;

}

ul#navigation .left { float: left; }
ul#navigation .right { float: right; }

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