Tutorial 5 - Floating next and back buttons using lists - all steps combined

Step 1 - Start with a paragraph of text and a list

For this exercise, we want to float a "back" button to the left and a "next" button to the right. We could use two divs, but to make it simpler we will use two list items.

We will start with a paragraph of text and a simple list. The UL is styled with an ID selector (id="navigation"), and the two LI's are styled with class selectors (class="left" and class="right"). Any names could be used here.

Step 2 - Remove bullets

To remove the HTML list bullets, set the "list-style-type" to "none".

ul#navigation { list-style-type: none; }

Step 3 - Remove padding and margins

Standard HTML lists have a certain amount of left-indentation. The amount varies on each browser. Some browsers use padding (Mozilla, Netscape, Safari) and others use margins (Internet Explorer, Opera) to set the amount of indentation.

To remove this left-indentation consistently across all browsers, set both padding and margins to "0" for the "UL".

margin: 0;
padding: 0;

Step 4 - Float the list items

Two rules are now added to make the list items move over to the edges of the page. A "float: left" is used on the "back" button and a "float: right" is used on the "next" button. A width is also required when floating an element - unless it is an image.

For this example, a width of 5em is used. The float: right list item looks like it is not floating to the right edge of the containing box at present. This is because it is aligned left inside a 5em wide box. We will fix this soon.

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

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

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

border-top: 1px solid #666;

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

padding: .5em 0;

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

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.

ul#navigation li a { display: block; }

Step 8 - Moving the width

Win/IE5 and Win/IE6 will not recognise the entire block as an active link unless a width is added to the "a" state. For this reason, we remove the width from the two float rules and apply it to the "a" state.

width: 5em;

Step 9 - Add a background color

To add a background color, you set it within the "a" state. A color is also added to make the text readable.

color: #FFF;
background-color: #036;

Step 10 - Add padding

Add padding to the list items within the "a" state.

padding: .2em 0;

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

text-align: center;
text-decoration: none;

Step 12 - Add a hover state

Use the "a:hover" to set a second background color as a rollover state. If you roll over the list now you will see that the rollover works.

ul#navigation li a:hover
{
color: #FFF;
background-color: #69C;
}

Finished!

« Back to main menu

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 li a:hover
{
color: #FFF;
background-color: #69C;
}

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