Hello, my name is Pieter!

I build web applications and craft user interfaces.

5 CSS tricks with lists

Here are some creative ways to style unordered (ul), ordered (ol) or definition (dl) lists. Take a look at the demo for what we're going to do.

1) Ordered list: Different styles for numbers and content

This one is very easy, but gives some nice results. The idea is simple, we create a ordered list and place the content between span tags. We style the ol with CSS, then style the span. Here's the code for the demo. <ol>
<li><span>This is some dummy text</span><li>
</ol>
 ol {
font-family: Georgia, sans-serif;
font-style: italic;
color: #999;
font-size: 16px;
}

ol li {
margin: 5px 0;
}

ol li span {
font-style: normal;
color: #333;
font-size: 14px;
}

2) Unordered list: buttons that change on hover

This is an absolute basic. It makes use of one image, so-called sprites. It's commonly used in navigations, like in the demo. We place an anchor-tag a in the li and give it a 100% width and height with display: block. Here's the code used in the demo: <ul id="buttons">
<li><a title="Lor" href="#">Lorem</a></li>
<li><a title="Ips" href="#">Ipsum</a></li>
</ul>
 ul {
list-style-type: none;
font-weight: bold;
}

ul li:first-child {
border-left: 0;
}

ul li {
display: inline;
float: left;
width: 200px;
height: 50px;
border-left: 1px solid #666;
border-right: 1px solid #eee;
}

ul li a {
display: block;
width: 200px;
text-align: center;
height: 20px; // 20 + 15 + 15 (padding) = 50
background-image: url('sprite.jpg');
padding: 15px 0;
color: #333;
text-decoration: none;
}

ul li a:hover {
background-position: left 50px; // does the trick
color: #fff;
}

 It's double the height as it's shown on the webpage. When hovering, we move the background half the height of the image down. To read more about this CSS Sprites technique, there's more information on A List Apart.

3) Unordered list: fade the last item

This makes creative use of a negative margin to overlap the previous list item. Here's an example: as you see the last item nicely fades into the background. Note: Doesn't seem to work in Internet Explorer, sorry! Let's take a look at the code. <ul>
<li>Morbi in sem ... quat.</li>
<li>Praesent dapibus,... metus.</li>
<li class="last"><img src="fade-last.png" alt="" /></li>
</ul> ul {
list-style-type: none;
font-size: 14px;
line-height: 20px;
color: #333;
}

ul li {
width: 380px;
background-image: url('fade-list.jpg');
height: 80px;
padding: 10px;
border-top: 1px solid #666;
border-left: 1px solid #666;
border-right: 1px solid #666;
}

ul li.last {
margin-top: -100px; // does the trick
}

ul li.last, ul li.last img {
width: 402px; // 380 + 20 (padding) + 2 (borders) = 402px
border: 0;
padding: 0;
height: 100px; // 80 + 20 (padding)
} That's it! I'd like to note that it only works with the image inserted in the HTML, background-images in CSS do not overlap the text - only the background image from the other list item. Instead of the .last class, :last-child could be used, but this isn't supported in every browser yet.

4) Definition list: price list

With definition lists, you can easily create a nice price list. Here's how. <dl id="pricelist"> <dt>Beef</dt> <dd>$15</dd> </dl> dl {
width: 500px;
font-style: italic;
font-family: Georgia, sans-serif;
}

dl dt {
width: 400px;
height: 15px;
padding: 5px 10px;
border-bottom: 1px solid #666;
display: block;
float: left;
margin: 5px 0;
}

dl dd { text-align: center;
font-weight: bold;
width: 80px;
height: 15px;
padding: 5px 0;
border-bottom: 1px solid #666;
display: block;
float: left;
margin: 5px 0;
}

5) Unordered list: columns within one list

I've read this one on Smashing magazine and it's a clever way to use negative margins. This is how it could look. <ul>
<li>Chicken</li>
<li>Horse</li>
<li class="col2 top">Sheep</li>
<li class="col2">Fish</li>
<li class="col3 top">Duck</li>
<li class="col3">Bird</li>
</ul> ul {
list-style:none;
width: 600px;
}

ul li {
line-height: 20px;
padding-left: 10px;
}

ul li.col2 {
margin-left:150px;
border-left: 1px solid #999;
}

ul li.col3 {
margin-left:300px;
border-left: 1px solid #999;
}

ul li.top { margin-top:-40px; }