Tutorial 6 - Floating inline list items - all steps combined

Step 1 - Start with a simple unordered list

For this exercise, we want to take a simple unordered list and convert it into a horizontal navigation bar.

We will start with a simple unordered 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 the bullets

To remove the HTML list bullets, set the "list-style-type" to "none". To target the specific UL, we use "ul#navlist", otherwise all UL's on the page would be affected.

ul#navlist { 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".

padding: 0;
margin: 0;

Step 4 - Display inline

To force the list into one line, apply "display: inline;" to the "LI". To target the specific list we use "ul#navlist li". This means we want to target the LI element within the UL, styled with a ID called "navlist".

ul#navlist li { display: inline; }

Step 5 - float the "a" state

When list items are converted to inline, they have a set amount of padding on their left edges that cannot be removed. To make the list items sit beside each other without any gap, they must be set to "float: left". At this stage we cannot see that the gap has closed.

A width is also required when floating an element - unless it is an image.

ul#navlist li a
{
float: left;
width: 5em;
}

Step 6 - Add a background color

At this point a background color and text color can be applied. There are many color combinations that can be used.

color: #fff;
background-color: #036;

Step 7 - Add padding to the "a" state

To make each list item into a box, we need to add padding to the "a" state. In this case we are using a shorthand rule. The padding is set to 0.2em for the top and bottom and 1em for the left and right.

padding: 0.2em 1em;

Step 8 - Removing text decoration

At this point you may wish to remove the text underline. It is common practice 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 behaviour (such as underlines) can be confusing for some users, who may not realise that the item is a link.

text-decoration: none;

Step 9 - Add a border to separate the list items

A border is set to the right of the list items to separate them.

border-right: 1px solid #fff;

Step 10 - Add a rollover color

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#navlist li a:hover
{
background-color: #369;
color: #fff;
}

Step 11 - Float the UL

To make the entire list into a navigation bar, we need to color the UL and stretch it to the full width of the browser window. Before we can do that, we need apply "float: left" to the UL - otherwise it will not show. So, apply float to the UL and set the width to "100%".

A width is also required when floating an element - unless it is an image.

float: left;
width: 100%;

Step 12 - Add a background color to the UL

At this point a background color and text color can be applied to the UL. There are many color combinations that can be used.

color: #fff;
background-color: #036;

Finished!

« Back to main menu



CSS CODE
ul#navlist
{
padding: 0;
margin: 0;
list-style-type: none;
float: left;
width: 100%;
color: #fff;
background-color: #036;

}

ul#navlist li { display: inline; }

ul#navlist li a
{
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
text-decoration: none;
border-right: 1px solid #fff;
}

ul#navlist li a:hover
{
background-color: #369;
color: #fff;
}

HTML CODE
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>
Other Max Design articles and presentations
Associated with webstandardsgroup.org