Enlaces de páginas con estilo CSS
Anteriormente hablamos de cómo paginar los resultados de una consulta MySQL con PHP. Cada página es un enlace que nos lleva a determinado contenido, y como es parte importante del diseño de nuestra página hay que darle la importancia debida dándole un buen acabado visualmente.
Estos código muestras como hacer esto:
En la parte de estilos de la página web añadimos esto (también podemos separar los estilos en un documento .css si lo deseamos):
<STYLE TYPE="text/css">
<!--
html, body {
background-color: white;
color: #2B3956;
font-family: Verdana, Arial, Sans-Serif;
font-size: 11px;
text-align: left;
}
/* Pagination DIV */
#pg
{
width: 700px;
background-color: #FFFFFF;
text-align: center;
font-size: 10px;
margin-bottom: 5px;
padding: 10px;
}
/* Pagination Link */
#pg a {
font-size: 10px;
text-decoration: none;
color: #000000;
border: 1px solid #dddddd;
padding: 3px;
-moz-border-radius: 3px;
}
#pg a:hover {
font-size: 10px;
text-decoration: none;
color: #000000;
border: 1px solid #A7A7A7;
background-color: white;
padding: 3px;
-moz-border-radius: 3px;
}
/* Pagination Current Page */
#pg a.current {
font-size: 10px;
text-decoration: none;
color: #000000;
border: 1px solid #336699;
background-color: #F5F7FA;
padding: 3px;
-moz-border-radius: 3px;
}
/* Pagination Disabled Page */
#pg span.disabled {
font-size: 10px;
text-decoration: none;
color: #C6C7C7;
border: 1px solid #C6C7C7;
background-color: white;
padding: 3px;
-moz-border-radius: 3px; // Rounds the corners; Works for Mozilla only
}
-->
</STYLE>
Dentro del body escribirmos lo siguiente, que es en sí la estructura de la paginación:
<div id="pg">
<span class='disabled'>« Previous</span> <a class="current" href='pagination.php?number=1'>1</a>
<a href='pagination.php?number=2'>2</a>
<a href='pagination.php?number=3'>3</a>
<a href='pagination.php?number=4'>4</a>
<a href='pagination.php?number=5'>5</a>
<a href='pagination.php?number=6'>6</a>
<a href='pagination.php?number=7'>7</a>
<a href='pagination.php?number=8'>8</a>
<a href='pagination.php?number=9'>9</a>
<a href='pagination.php?number=10'>10</a>
<a href='pagination.php?number=2'>Next »</a>
</div>
En resultado será el que se muestra en la imágen superior (iniciando este artículo).
En BitRepository podemos encontrar otro estilo más que podemos aplicar a nuestros enlaces de páginas.
Si estan interesados en hacer intercambio de enlaces (tecnologia, informatica, relacionados)contactame en link.exchange.mariana@gmail.com
exelente el articulo aque faltaria como paginar no por tu ejempo ya que es como complicado de entender , dejar algun codigo de for y llevar el consecutivo y dejar activo en el numero en el que va.. voy hacerlo esta noche y si lo tengo lo publico con de una con mysql y facil de entender.. sii no pues tmb colaboren con la causa …