Tutorial 4 - Horizontal lists - all steps combined

There are many methods that can be used to making a horizontal list. The main ingredient is "display: inline", applied to the "LI" element.

CSS CODE
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

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


HTML CODE
<div id="navcontainer">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div>

Step 1 - Make a basic list

Start with a basic unordered list. The list items are all active (wrapped in <a href="#"> </a>) which is essential for this list to work. Some CSS rules are written exclusively for the "a" element within the list items. For this example a "#" is used as a dummy link.

Step 2 - Remove the bullets

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

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

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

Step 4 - Display inline

To force the list into one line, apply "display: inline;" to the "LI".

CSS CODE
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer ul li { display: inline; }

Step 5 - Removing text decoration

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

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer ul li { display: inline; }
#navcontainer ul li a { text-decoration: none; }

Step 6 - Padding around list items

To make each list item into a box, we need to add padding to the "a" element.

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
}

Step 7 - Adding background color

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

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

Step 8 - Add a rollover color

Use "a:hover" to set a second background color, as a rollover. Roll over the list now you will see how it works.

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

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

Step 9 - Center the list

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

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

Finished!

« Back to main menu

Other Max Design articles and presentations
Associated with webstandardsgroup.org