Sexy Ordered Lists with CSS

Blog » CSS/XHTML » Sexy Ordered Lists with CSS

Sexy Ordered Lists with CSS

PrintJanuary 22nd, 2009

Recently I was working on a site where I had to style an ordered list and thought this may help some of you in future projects. The snag that some people tend to run into is that they are not sure how to separate the styles of the numbers and the actual content of the list.

It may feel easier to number each list item manually but then we end up defeating the purpose. In this tutorial I will show how to give an ordinary ordered list a face lift.

HTML

We will first create an ordered list and add two elements, the heading and a paragraph.

<ol class="steps">
	<li>
		<h2>heading</h2>
		<p>paragraph</p>
	</li>
	<li>
		<h2>heading</h2>
		<p>paragraph</p>
	</li>
</ol>

CSS

Start by styling the ordered list itself. Note that we will specify a font style to the list item first (this will be the styles for the numbers).

ol.steps {
	margin: 20px 0;
	background: url(ul_bg_repeat.gif) repeat-y; /*--Bg of the order numbers--*/
	padding: 0 0 0 35px; /*--Distance between the order numbers--*/
	border: 1px solid #111;
}
ol.steps li {
	margin: 0;
	padding: 15px 15px;
	color: #cbff78;
	font-size: 1.7em;
	font-weight: bold;
       /*--The bevel look is styled with various colors in the border properties below--*/
	border-top: 1px solid #000;
	border-bottom: 1px solid #353535;
	border-right: 1px solid #333;
	border-left: 1px solid #151515;
	background: #222;
}

When using border colors to create the bevel look, you will notice we will have an extra pixel at the top and bottom of your list.

You can fix this in two ways. First create a class for the top and bottom list items.

ol.steps li.first { border-top: 1px solid #353535; }
ol.steps li.last { border-bottom: none; }

Method 1 – Manual
Specify the above classes for the first and last list item manually in the HTML

<li class="first"><!--Content--></li>
<li><!--Content--></li>
<li class="last"><!--Content--></li>

Method 2 – jQuery
Use jQuery to add the classes on the first and last list item.

<script type="text/javascript">
	$(document).ready(function() {
		$("ol.steps li:first").addClass("first");
		$("ol.steps li:last").addClass("last");
	});
</script>

Now that we are done styling the list item, we will override the base font style with the heading and paragraph tags.

ol.steps li h2 {
	font-size: 0.9em;
	padding: 5px 0;
	margin-bottom: 10px;
	border-bottom: 1px dashed #333;
	color: #fff;
}
ol.steps li p {
	color: #ccc;
	font-size: 0.7em;
	font-weight: normal;
	line-height: 1.6em;
}

Conclusion

As you can see, ordered lists don’t have to be boring. If you have any other techniques to style ordered lists, please let me know!

Related Resources

Did You Enjoy This Post?

subscribeSubscribe via RSS ,by email, or by twitter to get all upcoming
tutorials and articles delivered straight to you.

Bookmark or Share this Post!

  • Digg
  • del.icio.us
  • StumbleUpon
  • Technorati
  • Twitter
  • E-mail this story to a friend!

This entry was posted on Thursday, January 22nd, 2009 at 10:53 pm and is filed under CSS/XHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

35 Responses to “Sexy Ordered Lists with CSS”

  1. Nokadota

    Ooh, that *is* sexy. I’m going to use this.

  2. Derrick

    Love this…Great….

  3. Juarez P. A. Filho

    Simple, clean and really cool. I used similar code in my last project. :)

  4. Andrew Houle

    Fantastic tut, I love the end result. I never thought to use jQuery to style the first and last element, I will definitely be adding that feature to some lists in the future :)

  5. David Dashifen Kees

    Unless I’m blind — which is a distinct possibility as I’m without coffee so far this morning — I don’t think you listed the background image that you use in the demo within the code above. Not a major problem, but if people copy the code as is, it may not look exactly like they expected.

  6. Soh

    David good catch! I’m getting on a plane now and will be away for the weekend but will def update as soon as I get back – thanks!!

  7. John Lund

    Really cool, that bevelled look is pretty simple to add but the effect is a quality finish.

    Nice one!

  8. Jade

    Looks nice. I’ve found this very useful in projects before too. The only problem I’ve ran into is when you’re not guaranteed what exactly will be inside the list item. I did this for a client’s site that had a cms and low and behold it didn’t put a paragraph tag around the content and so it didn’t pull the overwriting css.

  9. Khayyam

    You always have the tightest tutorials and inspirition driving posts! Thanks so much.

  10. Steve

    So so sexy.

  11. B. Moore

    Excellent tip! thank you

  12. Soh

    Hey Jade!

    Good point!

    I would then wrap the h2 and p tag inside of another div and specify the color/size/style on the fonts contained in that class. That should take care of the unknown factors that may come up with the CMS :-)

  13. JennyB

    That’s so pretty! Thanks for putting it together. As a newbie to CSS, I find I work best with cheat sheets. Since I always have my iPhone with me, I keep them there. The best one I’ve found so far is from these guys:

    http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=301093674&mt=8

    They also have great cheat sheets for PHP and Javascript. Hope this is helpful!

  14. Robin

    Hi, and greetings from Málaga, Spain. I have very much enjoyed discovering your site, for which I congratulate you. I also thank you, for being so generous in sharing your knowledge, for I have learnt from your example.
    Truly lovely site. Nice outline with the Giraffes and Rhinos!
    Your humble student,

    Robin Fernández-Medina

  15. Soh

    Thanks for the kind words! :-)

  16. durff33

    Nicely designed list, thanks for your interesting posts :)

  17. Sameer

    I’m Impressed.

  18. Sudeep Tamrakar

    Great example. Thanks

  19. Colin

    Is there a jquery or .js file that has to be listed in the head tags?

  20. Antoine Guédès

    Really nice.

  21. Phaoloo

    Haha, really simple ordered list but s*xy :D

  22. Mariusz Cieśla

    jQuery script is not really needed for serious browsers – should be only ran in ;)

  23. Web Design Mumbai

    it looks really neat…..thanks a lot

  24. Mike Gadd

    <p>Hi Been trying to do this for a while what you have done Soh is Great </p>
    <p>
    Looking to use this in a CMS but needs to be coed from the front end. Not found a way to do this yet, Using Xstandard Truly brilliant editor.
    </p>

  25. Tomás

    Looks nice !

  26. macCesar

    Why not use pseudo elements for the first and last list elements to style them?… Instead of adding extra presentation markup to the page?

    It’ll work even if javascript is disabled!!!

    You’ll only need to change 2 lines like this:

    ol.steps li:first-child { border-top: 1px solid #333; }

    ol.steps li:last-child { border-bottom: none; }

    And you can even delete the jQuery library and function call (If you don’t need it for anything else) :)

  27. Soh

    Hey MacCesar,

    Once IE6 dies out completely I would def suggest that route. But until then I believe this is still the safest way :-) (or using both methods so you can cover all grounds)~

  28. Bradford Sherrill

    interesting don’t use ordered lists much, mainly unordered lists

  29. macCesar

    Thanks Soh.. And BTW, Great site and greate tutorials!

  30. Sam

    VERY nice… it all seems so easy now. thank you

  31. Ed

    Thanks so much for the inspiration, i’ve got some great ideas about how I will use this in my web app

  32. kaushal sharma

    what to say… everyone has already put his / her words here but i have one thing God Bless You…!

    Your almost all code put a remarkable presence.

    -Thanks

  33. admire

    thanks man ,this is cool..

  34. Thana

    good………

  35. Shahriat Hossain

    Such a lovely post.

Speak Your Mind…

Need to post HTML code?
Use Postable for your convenience.

Don't have an Avatar?
Set up a Gravatar image now!

Blog Blog Categories

Popular Comments Popular Posts

Recent Comments Recent Comments