Bessere geordnete Listen (mit einfachem PHP und CSS)

Geordnete Listen sind langweilig! Klar, man kann Hintergrundbilder anwenden und regulären geordneten Listen eine ganze Menge verschönern, aber man bekommt einfach nicht genug Kontrolle über die Nummer selbst. Hier ist ein Beispiel, bei dem man die traditionelle geordnete Liste aufgibt und seine eigene erstellt!

Wenn Sie eine Schleife einrichten oder sich bereits in einer bestehenden Schleife befinden (denken Sie an WordPress-Kommentare), bietet sich die Möglichkeit für coole nummerierte Listen. Richten Sie einfach eine Integer-Variable in PHP ein, die sich selbst inkrementiert, während die Schleife läuft. Geben Sie dann die Variable dort aus, wo Sie sie benötigen, und stylen Sie sie mit CSS.

In diesem Beispiel habe ich ein h2-Element mit großer Schriftgröße, grauer Farbe, links ausgerichtet und mit einem kleinen rechten Rand verwendet. Diese Technik ist schön und bulletproof, da sie keine grafischen Elemente zur Einrahmung der Nummer verwendet.

Hier ist ein Beispiel für eine einfache PHP-Schleife

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

Hier ist das anwendbare 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-BEISPIEL

BEISPIEL HERUNTERLADEN