Tutorial 6 - Floating inline list items

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.

Go to Step 12 →



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

}

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