Sexy Ordered Lists with CSS
Blog » CSS/XHTML » Sexy Ordered Lists with CSSSexy Ordered Lists with CSS
January 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
- Better Ordered Lists (Using Simple PHP and CSS)
- CSS Design: Taming Lists
- CSS-Styled Lists: 20+ Demos, Tutorials and Best Practices
Similar Posts:
Subscribe via RSS ,by email, or by twitter to get all upcoming
tutorials and articles delivered straight to you.
Bookmark or Share this Post!
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.
Popular Posts
Recent Comments
Regards from switzerland, Encore"
Ooh, that *is* sexy. I’m going to use this.
Love this…Great….
Simple, clean and really cool. I used similar code in my last project.
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
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.
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!!
Really cool, that bevelled look is pretty simple to add but the effect is a quality finish.
Nice one!
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.
You always have the tightest tutorials and inspirition driving posts! Thanks so much.
So so sexy.
Excellent tip! thank you
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
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!
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
Thanks for the kind words!
Nicely designed list, thanks for your interesting posts
I’m Impressed.
Great example. Thanks
Is there a jquery or .js file that has to be listed in the head tags?
Really nice.
Haha, really simple ordered list but s*xy
jQuery script is not really needed for serious browsers – should be only ran in …
it looks really neat…..thanks a lot
<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>
Looks nice !
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)
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)~
interesting don’t use ordered lists much, mainly unordered lists
Thanks Soh.. And BTW, Great site and greate tutorials!
VERY nice… it all seems so easy now. thank you
Thanks so much for the inspiration, i’ve got some great ideas about how I will use this in my web app
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
thanks man ,this is cool..
good………
Such a lovely post.