Adding flair to your unordered list

Have you ever found yourself wondering how you could somehow jazz up that simple, unordered list you have just sitting there on your website? Does it look like something our good friend Bill would have busted out in PowerPoint way back in 1990 on windows 3.0? Yeah, I thought so. Don’t fret my friends; CSS has come to the rescue…

Let’s say we have this very basic, yet effective, list of your all-time favorite movies:

  • The Last Dragon
  • Big Trouble in Little China
  • I’m Gonna Get You Sucka
  • Pee-Wee’s Big Adventure

<ul>
   <li>The Last Dragon</li>
   <li>Big Trouble in Little China</li>
   <li>I’m Gonna Get You Sucka</li>
   <li>Pee-Wee’s Big Adventure</li>
</ul>

Very boring and plain isn’t it? We can do much better with this. First up, in our style sheet, we’ll need to do some prep work and redefine some standard html tags to better suit what we want.

ul {
     margin: 0px;
     padding: 0px;
}
li {
     margin: 0px 0px 5px 0px;
     padding: 5px;
     list-style-position: inside;
}

What I’ve basically done above is tell the browser that I don’t want to use its default settings for every <u>l and <li> tag on the page. The <ul> tag instead, will have all margins set to zero, and all the padding of each <ul> tag will also be set to zero.

As for the <li> tag, each will have an inner padding of 5 pixels, and will also have zero margins for every side except the bottom. I set the bottom margin to push down 5 pixels, that way each <li> isn’t sitting right on top of the one below. In addition to setting the padding and margins, we will also move the bullet points inside of the <li> itself instead of its normal position. Using this, we won’t run into cross-browser problems with spacing issues. Moving on…

Say you want to make your top movie stand out among the crowd. What we’ll do now is add an id tag to our list, so that we can create special effects for this <li> tag.

<ul>
   <li id=”best-ever”>The Last Dragon</li>
   <li>Big Trouble in Little China</li>
   <li>I’m Gonna Get You Sucka</li>
   <li>Pee-Wee’s Big Adventure</li>
</ul>

Now, let’s go back to our style sheet and add some more code.

#best-ever {
     padding: 7px 5px 3px 40px;
     height: 25px;
     color: #FFFFFF;
     font-weight: bold;
     list-style-type: none;
     background: #E8651D url(http://images.ientrymail.com/nowcss/bruce-leeroy.gif) no-repeat left top;
}

Above is where the magic happens, and it wasn’t even in the privacy of your bedroom. What we’ve done here is redefine the padding of this particular tag. Instead of the normal 5 pixels which we specified earlier, we are now setting the top padding to 7, the right padding to 5, bottom to 3, and finally the left to 40. The reason for this is that we want the text to line up vertically centered next to our pretty graphic, and far enough away so that they don’t over lap each other.

For a little added touch, we’ve also changed the font to be bold and colored white against our now orange <li>, so that we get two contrasting colors that are easy on the eyes to read. Nice and pretty isn’t it?

Finally we set the background color and a background picture that doesn’t repeat. It is positioned in the top left corner of the <li> tag. As you can now see, this has completely changed the way our list looks, while actually keeping the <ul> code structure intact. You should end up with something like below:

  • The Last Dragon
  • Big Trouble in Little China
  • I’m Gonna Get You Sucka
  • Pee-Wee’s Big Adventure

Obviously this is a very basic CSS tutorial, and could actually be pushed much further than what I’ve shown, but that wasn’t the goal. The goal was to show you that you could alter your lists anyway you desire. With a little CSS knowledge, you can bend it to your will.

Now get out there and have some fun.

Leave a comment