Listas ordenadas con CSS+PHP

Escrito por J.F. el Lunes, 29 de Octubre del 2007 a las 16:40

Una curiosa forma de obtener listas ordenadas diferentes, con un elegante diseño gráfico, simpletemente utilizando PHP con CSS:

El código es el siguiente:

TEXTO PLANO

PHP:

1. <?php for ($i = 1; ; $i++) {
2.  
3.    if ($i> 9) {
4.       break;
5.    }  ?>
6.  
7.    <div class="comment-box">
8.       <h2 class="number"><?php echo $i ?></h2>
9.       <p>CONTENT GOES HERE.</p>
10.    </div>
11.  
12. <?php } ?>

TEXTO PLANO

CSS:

1. h2.number {
2.     position: relative;
3.     top: 0px;
4.     left: 0px;
5.     font-size: 10em;
6.     color: #ccc;
7.     float: left;
8.     margin-right: 10px
9. }
10.  
11. #page-wrap {
12.     width: 760px;
13.     background: white;
14.     margin: 0 auto;
15.     padding: 10px 0px 50px 0px;
16.     background: white url(images/gradient2-bg.gif) bottom repeat-x;
17. }
18.  
19. #description-area {
20.     padding: 20px;
21. }
22.  
23. .comment-box {
24.     margin: 0px 0px 50px 50px;
25.     padding: 20px;
26.     width: 240px;
27.     border: 1px solid black;
28.     float: left;
29. }

Enlace: | Fuente | Demo

Categoria: PHP, CSS

• Añadir este post a
• Del.icio.us -
• Meneame -
• Digg -
• Webeame

Entradas relacionadas

Deja un comentario

Nombre (obligado)

E-mail (no sera publicado) (obligado)

Pagina web

Puedes usar las siguientes etiquetas HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>