Mirificam Press

Use the links below to share The Amazing LI: Using CSS and Unordered List Items to Do Just About Anything on your favorite social networks.

Back to the Article >>

The Amazing LI: Using CSS and Unordered List Items to Do Just About Anything

March 19th, 2008 in Design Tips & Tutorials

by: Matthew Griffin

I can still remember the day I discovered the <li> tag. It's not that I had never used list items before—I had built plenty of bulleted lists. What I discovered that day was that with a little CSS, the <li> becomes one of the most powerful and versatile tags in a web designer's arsenal. So versatile is the list item, in fact, that you could build and entire website layout out of just <ul> <li> tag pairs. Of course, that wouldn't be semantically correct, but you could do it. This article is a tutorial and a tribute to the amazing <li>.

Using <li>s for Horizontal Navigation

You can use unordered list items to present horizontal navigation buttons and other horizontal lists. When I first moved from table-based layouts to CSS, this was a big shocker for me. It opens up a world of possibilities and it makes your code oh-so-beautiful and easy to read. Not only that, it's semantically correct. The li tag is meant to denote "list items", and that's exactly what a set of navigations buttons is—a list of links. Here's an example of a five-button horizontal nav bar made completely of list items.

ul{
    margin: 0 auto;
    padding: 0;
}
ul.horizontal_list li{
    text-align: left;
    float: left;
    list-style: none;
    padding: 3px 10px 3px 10px;
    margin: 5px;
    border: 1px solid #CCC;
}

<ul class="horizontal_list">
    <li>Home</li>
    <li>About Us</li>
    <li>Contact Us</li>
    <li>News</li>
    <li>Mission</li>
</ul>

This is how it should look:

So now we have a decent-looking horizontal nav with just a few lines of HTML and CSS and we didn't use a single image. That's not to say that images are bad, but if you can cut the download size of a page by getting creative with your CSS, why not?

Multi-column Lists with <li>

Building lists that wrap into multiple columns is quick and easy with <li>. When data is actually tabular (requiring column header, columns, and rows), you should use a <table>. But when you're just looking to spice up the look of a list and make it a little easier to read, you should use this method. Just like any other set of <li>s, multi-column lists make for simple HTML code and easy rearranging of list items. Here's how it works.

<div id="list_wrapper">
    <ul class="multiple_columns">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>
        <li>Seven</li>
        <li>Eight</li>
        <li>Nine</li>
    </ul>
</div>

ul{
margin: 0 auto;
padding: 0;
}

/* The wider the #list_wrapper is, the more columns will fit in it */
#list_wrapper{
width: 200px
}

/* The wider this li is, the fewer columns there will be */
    ul.multiple_columns li{
        text-align: left;
        float: left;
        list-style: none;
        height: 30px;
        width: 50px;
    }

This is how it should look:

The list items just stack against each other horizontally until they fill the width of the containing wrapper. In this case we have a wrapper that is 200px wide and each list item is set to 50px wide. Since 50 goes into 200 four times, that means we'll have four list items in each row.

Cool <li> Background Effects

Want lists with cool bullets instead of the boring default black dot? CSS makes this possible with some simple adjustments to the background properties of your <li>. For this example, we'll borrow our code from the first example and build on it.

<ul class="cool_background">
    <li>Home</li>
    <li>About Us</li>
    <li>Contact Us</li>
    <li>News</li>
    <li>Mission</li>
</ul>

ul{
    margin: 0 auto;
}
ul.cool_background li{
    text-align: left;
    float: left;
    list-style: none;
    padding: 3px 10px 3px 25px;
    margin: 5px;
    background: url(cool_background.gif) 5px 5px no-repeat;
}

IMPORTANT: Don't forget to make your "cool_background.gif" file and put it into the same directory as your page.

This is what it should look like:

Animating Your <li>s with a Rollover Effect

A combination of <li> and <a> tags, and a little CSS can make for a good-looking rollover effect. Using CSS to produce your rollovers is quicker and easier than JavaScript and it also makes it easier change in the future. All you have to do is add a link tag to each nav item and use the pseudo class ":hover" to cause a background change when a mouse moves over the link. Below is a basic example:

<ul class="rollover">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Mission</a></li>
</ul>

ul{
    margin: 0 auto;
}
ul.rollover li{
    text-align: left;
    float: left;
    list-style: none;
}
    ul.rollover a{
        display: block;
        text-decoration: none;
        background: url(cool_background.gif) 5px 5px no-repeat;
        padding: 3px 10px 3px 25px;
        margin: 5px;
    }
    ul.rollover a:hover{
        background-image: url(cool_background2.gif);
        text-decoration: none;
    }

IMPORTANT: Don't forget to make your cool background images and put it into the same directory as your page. This is what it should look like:

The downside to this method is an inherent flicker in the rollover the first time the mouse is moved over each link. This is because the rollover image isn't actually downloaded until the hover action is activated. No worries, though, the issue can easily be fixed by using one image and hiding or revealing a portion of it when the mouse rolls over and rolls out. Read the article CSS Lite: A CSS Rollover Everyone Can Enjoy for more information. You'll also learn how to completely replace your link text with an image for slicker-looking nav buttons.

Conclusion

I'm sure this tutorial will be helpful for the CSS newbie. It's a great place to start. Once you've read and understand this articles, you'll be ready to move on to some of the more advance CSS methods presented on Mirificam Press. Check out these articles if you're looking for more.

Rollover Lite: A CSS Rollover Everyone Can Enjoy

Two Column CSS Layout: The Absolute Basics

Indestructible Website: How to Build an EM Based Layout that Won't Break

Creating CSS Flair Elements for Clarity and Style

Beautiful CSS: Organizing Your Stylesheets

UPDATED 11/2/2009