If you want to use something different from the default numbering of ordered lists, then all you have to do is choose a different style for your lists. CSS allows you to select from a wide variety of different list item shapes. For exampe, ordered list styles: decimal (default), lower-alpha, upper-alpha, lower-roman, upper-roman and none.
By default, most browsers display the ordered list numbers same font style as the body text. But what if I want change style only ordered list numbers. Here is a quick CSS tutorial on how you can use the ordered list <ol> and paragraph <p> element to design a stylish numbered list.
Overview
Basically, all what we need to do is style the <ol> element to Georgia font and set background image, and then reset the <p> element (nested in <ol>) to Arial. By default numbers of ordered list positioned outside of <ol> element. So if you want numbers lie on background, you need to set left margin to <li> element. I have to add left padding to <li> element in my example, to separate text from background image.
1. HTML source code
Make an ordered list. Don’t forget to wrap your text with a <p> tag.
<ol>
<li>
<p>This is first line</p>
</li>
<li>
<p>Here is second line</p>
</li>
<li>
<p>And last line</p>
</li>
</ol>Here is how the default ordered list will display:
2. ol element
Style the ol element:
ol { font: italic 1em Georgia, Times, serif; color: #999999; }
The list will become like this:
3. ol p element
Now style the ol p element:
ol p { font: normal .8em Arial, Helvetica, sans-serif; color: #000000; }
Your final list should look like this:
You can also add background under numbers. Don’t forget to reset margin for ol and ol p elements and add it to ol li element.
ol { background: #555555; margin:0px; padding: 0px; } p { margin:0px; padding:3px 0; } li { background: #ffffff; margin-left: 40px; padding-left: 10px; }
This is how it look like now:
View my demo file to see more samples.
Hi every one!
I have some problem that how to design order list for persian language I mean from left to right for persain like الف ب ت ث
plz help me
you can use the Unicode for this for example.
(ا)
(ب)
(پ)
etc…
to find your Unicode visit to this site http://mylanguages.org/converter.php
Hi there
Fabulous layouts above. Love them.
One question you may be able to assist: why do your layouts work in IE6 and mine don’t? For IE I have to place a no-wrap otherwise the content will appear down the left side of the container only. I have tested the lists in IE but still having probs. Cheers
Hi,
Is there a way to have an ol within another ol but is styled different? Example, I have an ol that is decimal and I’d like a second ol within that ol that is alpha:
1. this is the first list
A. this is the second list
Please let me know if you can help.
Thanks!
Cool thanks!
I guess it’s a bit late, but…
@Ghezal, put the attribute dir with the value rtl on it:
With dir meaning “direction” and rtl meaning “right to left”
@Brian you could use css inheritance if you are reluctant to add ids or classes
ol {color: red}
ol ol {color: black}
Your decimals will be red and your alphabetic characters will be black.
Great info. Thanks for posting!
Ok, i think i will save this for thenext time I’ll have to argue with Frank (friend of mine) about it! I wasn’t wrong :D
Nice description! Is it possible to make an ordered list with something other than periods after the numbers? I would like two numbered lists:
1)
2)
and
1>
2>
From the various examples seen online to style ordered lists, the common method seems to be to style the numbers via the OL tag, then set additional styling on the list LI elements to override the OL styling.
You can see this list styling method taken to the next level on this price comparison site where the list is displayed as a top chart and incorporates H3 and P tags for even further style customizations – see an example of that here:
http://www.superstoresearch.com/~Argos#Argos_Extra
I like the tip where you can add an image for the bullet. That was something I was unaware of. Thanks
I don’t know what to say, I just landed because of search engine and this post is awesome. I always wanted to learn new things and this post me regular for this sites. Thumbs ups & many many thnx for the tips.
how can i change the bullet numbering into urdu or any other unicode language??
Great looking site and thank you for this great post
Hi there – thanks for this info – most helpful
just one question. when I place an image inside a div that’s floated left. My ordered list which flows to the right of it wont move over enough and the numbers appear inside the div. When i style the list with a big enough left margin to fix it, the list retains the big left margin below the image and it looks ugly. Any advice?
Hi Dont know if anyone can help but Iam trying to renumber my lists I know you can do this i.e. etc but what i want to do is have my list as
1.
1.1
1.2 etc but id I enter it shows as 1. anyone any ideas great tut thanks
@alistair:
you can go straight to the source for this one:
http://www.w3.org/TR/CSS21/generate.html#counters
shows you how to do exactly that.
Thank you so much. A lot of help. I especially like the roll-over description. And this little pen icon in the reply box.
Anyone have a work around to the depreciated command? It works when I do layout for epub docs, but it does not validate.
Arrg! Nobody on the web seems to have an elegant solution.
ol start = being the depreciated command. :)
@ PATG LLC: I don’t know if you consider this elegant but I found this site:
http://www.arraystudio.com/as-workshop/make-ol-list-start-from-number-different-than-1-using-css.html
Please note that the CSS ways of starting list numbering from an offset were never well supporting among browsers and so the HTML ‘start’ attribute is back in HTML5.
Great info, but what if I want both elements centered on the same line. I’ve tried multiple configurations using float tags and such, but I can’t get them to play nice. I want something like:
1. Line one text
2. Text
The board stripped out my formatting, but imagine the last two lines of the post above centered.
i think you should check your code one more time
hey guys, are there anyone can help me with the css code for the background image that fit to screen? the width should fix to the screen.
Please take a look on the links
http://beta.dreampracticewebsites.com//herson/acupuncturetoronto/index.html
Thanks
Hey, very nice article!
I’d do only one change, instad of wrapping everything inside the li element using a paragraph, you could change the CSS rule “ol p {…}” to “ol li > * {…}”. It’s more simple.
Hope that helps!