CSS-Tricks Example

PHP Numbered Lists

By CSS-Tricks


Ordered lists are boring! If you are within a loop, the possibility for cool numbered lists presents itself. Just set up a simple 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. This could be easily adapted to be used within the comment loops within WordPress, which is where I got the idea to do this =)


In this example, I just used a h2 element with a huge font size, grey color, floated to the left, with a little right margin. This technique is nice and bulletproof because it doesn't use any graphic elements to contain the number. The code is below.

1

Typi tation gothica quis sollemnes eum. Consequat magna ex usus lectores lectorum. Lectores etiam eorum est diam assum. Commodo consequat legere volutpat dynamicus eleifend. Doming possim illum legere ad quis. Facilisi claram notare doming claritas consequat. Enim eleifend molestie possim nobis luptatum. Eum vero et delenit feugait accumsan. Hendrerit tincidunt vero vel eorum claritatem. Soluta legunt quod qui dolore typi.

2

Typi tation gothica quis sollemnes eum. Consequat magna ex usus lectores lectorum. Lectores etiam eorum est diam assum. Commodo consequat legere volutpat dynamicus eleifend. Doming possim illum legere ad quis. Facilisi claram notare doming claritas consequat. Enim eleifend molestie possim nobis luptatum. Eum vero et delenit feugait accumsan. Hendrerit tincidunt vero vel eorum claritatem. Soluta legunt quod qui dolore typi.

3

Typi tation gothica quis sollemnes eum. Consequat magna ex usus lectores lectorum. Lectores etiam eorum est diam assum. Commodo consequat legere volutpat dynamicus eleifend. Doming possim illum legere ad quis. Facilisi claram notare doming claritas consequat. Enim eleifend molestie possim nobis luptatum. Eum vero et delenit feugait accumsan. Hendrerit tincidunt vero vel eorum claritatem. Soluta legunt quod qui dolore typi.

4

Typi tation gothica quis sollemnes eum. Consequat magna ex usus lectores lectorum. Lectores etiam eorum est diam assum. Commodo consequat legere volutpat dynamicus eleifend. Doming possim illum legere ad quis. Facilisi claram notare doming claritas consequat. Enim eleifend molestie possim nobis luptatum. Eum vero et delenit feugait accumsan. Hendrerit tincidunt vero vel eorum claritatem. Soluta legunt quod qui dolore typi.

5

Typi tation gothica quis sollemnes eum. Consequat magna ex usus lectores lectorum. Lectores etiam eorum est diam assum. Commodo consequat legere volutpat dynamicus eleifend. Doming possim illum legere ad quis. Facilisi claram notare doming claritas consequat. Enim eleifend molestie possim nobis luptatum. Eum vero et delenit feugait accumsan. Hendrerit tincidunt vero vel eorum claritatem. Soluta legunt quod qui dolore typi.

6

Typi tation gothica quis sollemnes eum. Consequat magna ex usus lectores lectorum. Lectores etiam eorum est diam assum. Commodo consequat legere volutpat dynamicus eleifend. Doming possim illum legere ad quis. Facilisi claram notare doming claritas consequat. Enim eleifend molestie possim nobis luptatum. Eum vero et delenit feugait accumsan. Hendrerit tincidunt vero vel eorum claritatem. Soluta legunt quod qui dolore typi.

7

Typi tation gothica quis sollemnes eum. Consequat magna ex usus lectores lectorum. Lectores etiam eorum est diam assum. Commodo consequat legere volutpat dynamicus eleifend. Doming possim illum legere ad quis. Facilisi claram notare doming claritas consequat. Enim eleifend molestie possim nobis luptatum. Eum vero et delenit feugait accumsan. Hendrerit tincidunt vero vel eorum claritatem. Soluta legunt quod qui dolore typi.

8

Typi tation gothica quis sollemnes eum. Consequat magna ex usus lectores lectorum. Lectores etiam eorum est diam assum. Commodo consequat legere volutpat dynamicus eleifend. Doming possim illum legere ad quis. Facilisi claram notare doming claritas consequat. Enim eleifend molestie possim nobis luptatum. Eum vero et delenit feugait accumsan. Hendrerit tincidunt vero vel eorum claritatem. Soluta legunt quod qui dolore typi.

9

Typi tation gothica quis sollemnes eum. Consequat magna ex usus lectores lectorum. Lectores etiam eorum est diam assum. Commodo consequat legere volutpat dynamicus eleifend. Doming possim illum legere ad quis. Facilisi claram notare doming claritas consequat. Enim eleifend molestie possim nobis luptatum. Eum vero et delenit feugait accumsan. Hendrerit tincidunt vero vel eorum claritatem. Soluta legunt quod qui dolore typi.

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

.comment-box {
	margin: 0px 0px 50px 50px;
	padding: 20px;
	width: 240px;
	border: 1px solid black;
	float: left;
}