Ordered lists are boring! Sure you can apply background images and do quite a bit of sprucing up to a regular ordered list, but you just don’t get enough control over the number itself. Here is an example where you ditch the traditional ordered list and create your own!
If you set up a loop, or are already within an existing loop (think WordPress comments), the possibility for cool numbered lists presents itself. Just set up an integer variable in PHP that increments itself while the loop is running. Then echo the variable out where you need it and style it with CSS.
In this example, I used an h2 element with a huge font size, gray color, floated to the left, with a little right margin. This technique is nice ‘n’ bulletproof because it doesn’t use any graphic elements to contain the number.
Here is an example of a simple PHP loop:
<?php for ($i = 1; ; $i++) {
if ($i > 9) {
break;
} ?>
<div class="comment-box">
<h2 class="number"><?php echo $i ?></h2>
<p>CONTENT GOES HERE.</p>
</div>
<?php } ?>
Here is the applicable CSS:
h2.number {
position: relative;
top: 0px;
left: 0px;
font-size: 10em;
color: #ccc;
float: left;
margin-right: 10px
}
#page-wrap {
width: 760px;
background: white;
margin: 0 auto;
padding: 10px 0px 50px 0px;
background: white url(images/gradient2-bg.gif) bottom repeat-x;
}
#description-area {
padding: 20px;
}
.comment-box {
margin: 0px 0px 50px 50px;
padding: 20px;
width: 240px;
border: 1px solid black;
float: left;
}
You can simplify your PHP by doing:
Thanks Mirmillo! That is a bit cleaner.
While I agree that your result looks good, I would have to disagree with your title. This is not at “Better Ordered List”, as it is NOT an ordered list at all. For something like this, you really should use an <ol>, although the styling options are very limited.
I see a bunch of div’s, headers, and paragraphs. The only CSS ‘trick’ I see is a grid-derived layout.
@kimblim: Why do you think for “something like this” you should use an <ol>? I don’t see any semantic benefit of doing it one way or the other. Also, I think the title is appropriate. In my opinion the example is better than an regular ordered list and the result is indeed an ordered list.
@BillyG: While all of my examples will utilize CSS in some way or another, they may not be all be specifically focused on CSS. The “trick” part can be fairly loosely interpreted =).
@Chris:
You said it yourself: “and the result is indeed an ordered list”. If that is the case, then you really should use an <ol> (ordered list). Using anything but an <ol> for an ordered list makes no semantic sense whatsoever. Your example takes a heading (<h2>) and turns it into a numbered bullet.
^ “numbered bullet” should be “numbered list item”
@kimblim: You are saying that if it’s not an <ol> it’s not an ordered list and I’m saying just because it’s not an <ol> doesn’t mean it’s not an ordered list. Just different ways of looking at it I guess. If it was possible to do this example by using an <ol>, I agree that would be better semantically, but unfortunately it’s not.
I think people are missing the point hear. This is not actually a list or even an ordered list this is an alternative to a list.
I like it, it is different but thats the whole point :D
You could have a floated element which makes the content indented. Then you wouldn’t need any server-side scripting and it would be a semantic OL. You can even keep the HTML fully semantic and add the html with JS.
Wow very interesting and in depth. Keep it up! :)
How can we change the content of each item?
@Ian: Check out Dave’s awesome code suggestion above. Same results, and you can specify the content for each item instead of it being part of the loop.
Originally, I was thinking this would be part of an already existing loop where the content is getting dynamically generated (like being pulled from a database). For example, the WordPress comment loop…
Actually, if you really are interested in reducing your php code then you can do this (also semantically nicer):
As of PHP 5.1 this is valid syntax.
Very Nice. Gonna try intregrate it into my wordpress design.
For more simple styles (basically, separate text styling) It’s easier to do the following:
CSS:
HTML:
Of course – this has the limitation of the numbers not being able to be (straightforwardly) positioned separately from the text (or for it to be floated), but unless you *need* to do that, it’s probably, IMO, a better solution.
“If it was possible to do this example by using an , I agree that would be better semantically, but unfortunately it’s not.”
Why is it not possible with an unordered list? Simply replace your divs with list items, remove the numbering from the list and include it with PHP as you’ve done, pretty much exactly as you’ve done with your comments. So in this case I believe Kimblim is completely right.
Oh… At the moment i develop a website-concept and perhaps i need your tip ;)
Ralph
forgot to add: Place this under your last box: (note: didnt test it, but it should just work perfect)
It will loop true all H2 elements, checks if they contain the className number and replaces the content with ‘list number’
nice article. here’s how I tame odrered lists ;).
Great use of order lists. Modification from Mirmillo and others have made a master pieces of CSS script.
how do you number the comment entires? could you supply code and instruction on how to edit my css?
very thanks
here’s a very simple method i created, without any php, javascript– just pure CSS– to get my number-indicators in an OL to float like drop-caps. it looks like this. as you can see, it works perfectly in chrome and firefox, but of course IE 8 chokes on it– the floats work, but the OL numbers don’t increment. i bet somebody here can work out a fix.
keys to this method:
–don’t put anything inside the LI’s. they are empty. all content goes after each closing LI.
–float the surrounding div, not the LI.
–the OL must specify decimal inside style.
.dropli {
float: left;
width: .7em;
font-size: 8em;
line-height: 83%; }
.dropcontent { margin-bottom:2em; }
ol { list-style: decimal inside; }
………
<ol>
< div class=”dropli”><li ></li></div>< div class=”dropcontent”>orem ipsum dolor sit amet, consectetuer… </div>
Wow! Excellent tutorial. I’ve been looking for something just like this. Lists can be such a bore.