Tutorial 5 - Floating next and back buttons using lists

Step 6 - Adding padding below the line

The line sits very close to the top of the two list items. This can be fixed by adjusting the UL padding. In this case we will add .5em to the top and bottom of the UL, but not the sides, using the rule "padding: .5em 0;".

Go to Step 7 →

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 .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