Better Ordered Lists (Using Simple PHP and CSS)

Published by Chris Coyier

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.

nicenumberedlists.jpg

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;
}

LIVE EXAMPLE

DOWNLOAD EXAMPLE