Listas con colores alternados con PHP, XHTML y CSS
Estoy desarrollando un script muy sencillo en PHP que permitirá agregar y listar feeds de forma muy simple en cualquier página. Como parte del diseño visual quise implementar la posibilidad de alternar un color por item para dar claridad y contraste en las listas de elementos de los feeds. La solución es simple y en un par de pasos se puede tener listas con un poco más de estilo.
¿Como dar un estilo para cada elemento?
Solo es necesario aplicar una clase para los elementos impares (1, 3, 5, 7, 9, 11, etc) y otra clase distinta para los elementos pares (2, 4, 6, 8, 10, etc)
En el caso de que uno genere las listas en forma manual es simple ya que solo debemos agregar la clase que corresponde a cada elemento, pero cuando las listas se generan a través de un script es más complicado ya que el mismo deberá encargarse de discriminar que clase aplicar, entonces el script deberá reconocer si el número del elemento de la lista es o no par.
¿Pero como saber si un número es o no par?
Aritméticamente en una división existe un Dividendo (número que se va dividir), Divisor (número que divide a otro), Cociente (resultado de una división) y el Residuo (número que sobra de la división). Cuando una división es exacta, el residuo es cero. Si se divide un número por dos y el residuo es cero, significa que la división es exacta y por lo tanto el número es par.
¿Como se obtiene el residuo de una división?
En PHP existe el operador matemático %, que obtiene el residuo de una división.
Ejemplos:
8 % 2 = 0 | Residuo cero, división exacta, número par
9 % 2 = 1 | Residuo uno, división inexacta, número impar
¿Como reconocemos los elementos?
Para reconocer si un elemento de la lista es par o impar primero debemos crear un contador dentro de un ciclo para contar la cantidad de elementos y determinar si son o no elementos pares.
<ul>
<?php $total = 10; /* cantidad total de elementos */ ?>
<?php for ($x = 0; $x < $total; $x++) { ?>
<li class="<?php if ($x%2==0) { echo "par"; } else { echo "impar"; } ?>">Elemento < ?= $x?></li>
<?php } ?>
</ul>
Esto generaría lo siguiente:
<ul>
<li class="par">Elemento 0</li>
<li class="impar">Elemento 1</li>
<li class="par">Elemento 2</li>
<li class="impar">Elemento 3</li>
<li class="par">Elemento 4</li>
<li class="impar">Elemento 5</li>
<li class="par">Elemento 6</li>
<li class="impar">Elemento 7</li>
<li class="par">Elemento 8</li>
<li class="impar">Elemento 9</li>
</ul>
Con esto ya se ha asignado una clase para los elementos pares y otra para los impares, y solo falta darle el estilo que uno quiera con CSS. En este caso solo aplicaremos un color suave de fondo para la class .par.
.par {
background-color:#F1F5FA;
}
Se puede aplicar el estilo que uno quiera, usando imágenes, colores, decoraciones de texto, etc. eso queda en el gusto y la imaginación de cada uno.
Este podría ser el resultado de una lista con colores alternados.
Jul 12th, 2006 > 3:58 am
Otra forma de hacerlo:
“>Elemento
Jul 12th, 2006 > 5:50 am
Genial… vamos, lo del color alternativo pues como que lo utilizo, pero de php nada, osea que me viene “de lujo”… gracias ;-)
Jul 12th, 2006 > 6:38 am
Jurarìa que era cuociente… mira que andaba perdido :-P
Jul 12th, 2006 > 1:02 pm
Antes de postear me aseguré de buscar y averiguar bien como se escribía, ya que según yo también era cuociente.
Creo que fue en el colegio donde nos enseñaron mal :)
Jul 15th, 2006 > 9:54 pm
Buen articulo es uno de esos tips que siempre ayudan, para complementar y para el caso de datos tabulares obtenidos de una tabla que es el caso más común y al menos el que yo más utilizo sería:
Suponiendo que en $conexion tenemos definido el mysql_connection
$sql="select * from mytabla";
$query=mysql_query($sql,$conexion);
$resultados=mysql_fetch_assoc($query);
do{
">
";
} while (mysql_fetch_assoc($query));
?>
Jul 15th, 2006 > 9:55 pm
Buen articulo es uno de esos tips que siempre ayudan, para complementar y para el caso de datos tabulares obtenidos de una tabla que es el caso más común y al menos el que yo más utilizo sería:
Suponiendo que en $conexion tenemos definido el mysql_connection
$sql="select * from mytabla";
$query=mysql_query($sql,$conexion);
$resultados=mysql_fetch_assoc($query);
do{
" >
";
} while (mysql_fetch_assoc($query));
?>
Jul 15th, 2006 > 9:55 pm
damn no hay caso con mostrar el código porfa borrar el comentario repetido te envío por mail el código mejor :(
Jul 15th, 2006 > 10:04 pm
jajaja, yo parseo ;)
$sql="select * from mytabla";
$query=mysql_query($sql,$conexion);
$resultados=mysql_fetch_assoc($query);
do{
<li class="<?php if ($x%2==0) { echo "par"; } else { echo "impar"; } ?>">
<?php
echo $resultados["elemento"];
echo "</li>";
} while (mysql_fetch_assoc($query));
?>
Buen aporte Saltador ;)
Se agradece
Jan 22nd, 2007 > 2:29 pm
hola una pregunta ? como aplico esto a mis comentarios en wordpress, la verdad es que nos soy nada experta en codigos y quería saber si me puedes ayudar a alternar los colores de fondo de mis comentarios.
simplemete que uno sea gris por ejemplo el 2 blanco y asi…
(y si no es muy complejo que tengan una imagen quizas)
gracias !!!
andrea
Jan 23rd, 2007 > 8:25 am
Andrea, eso es simple y sigue la misma lógica… solo hay que aplicarlo a la plantilla donde se crean los comentarios.
Contáctame y te ayudo…
Feb 12th, 2008 > 8:36 am
Hola, buen articulo, pero… no abra alguna forma de hacerlo directamente con css???
saludos y gracias