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

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.

<!– The CSS –>

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;
}

<!– The HTML –>

<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>News</li>
<li>Mission</li>
</ul>

This is how it should look:

horizontal_nav

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.

<!– Here’s the HTML –>

<div id=”list_wrapper”>
<ul>
<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>

<!– Here’s the CSS –>

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:

multiple_columns

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.

<!– Here’s the HTML –>

<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>News</li>
<li>Mission</li>
</ul>

<!– Here’s the CSS –>

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:
cool_backgrounds2

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:

<!– Here’s the HTML –>
<ul>
<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>

<!– Here’s the CSS –>

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:
cool_backgrounds4

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s