Paginação estilo Digg com CSS
Postado por: Pedro Rogério em
Se você possui um blog ou um site que possui muitas páginas, aqui iremos aprender uma maneira muito fácil para que os usuários possam estar visitando essas páginas mais rapidamente, nós iremos utilizar uma técnica chamada de paginação, onde são dispostos vários números de páginas em formato de listas para que o usuário possa estar navegando mais rapidamente pelo site, essa técnica é muito utilizada em fóruns, e também lá no Digg. Para isso iremos utilizar do seguinte código CSS:
body {
font-size: 100%;
color: #333;
background: #FFF;
font-family: Arial, Helvetica, sans-serif;
}
#pages {
padding: 3px;
}
#pages ul {
list-style-type: none;
}
#pages li {
float: left;
display: inline;
margin: 0 5px 0 0;
display: block;
}
#pages li a {
color: #88af3f;
padding: 4px;
border: 1px solid #ddd;
text-decoration: none;
float: left;
}
#pages li a:hover {
color: #638425;
background: #f1ffd6;
border: 1px solid #85bd1e;
}
#pages li.nolink {
color: #CCC;
border: 1px solid #F3F3F3;
padding: 4px;
}
#pages li.current {
color: #FFF;
border: 1px solid #b2e05d;
padding: 4px;
background: #b2e05d;
}
E agora, no nosso HTML você pode observar que estamos utilizando de listas desordenadas, que para esse fim seria a melhor indicação, e se notar no código CSS, estamos utilizando a propriedade CSS Display:inline, muito utilizada em menus e formulários para dispor o nosso exemplo em linha.
<div id="pages">
<ul>
<li class="nolink">« Previous Page</li>
<li class="current">1</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">Next Page »</a></li>
</ul>
</div>
Para as páginas que não estão ativas, utilize-se da classe “nolink”, e para a página que está ativa, utilize-se da classe “current”, veja aqui um exemplo em funcionamento.
Tradução do artigo original de: Now CSS














Cara.. que demais seu tutorial!!
Muito Obrigado e parabens.. Estou utilizando na minha pagina..
abçs..
Fernando.
Opa, muito legal kra
show de bola.. adorei!
muito foda pedro !!!
Olá
Prezado
Baixei o código. Porém, não consegui fazê-lo rodar. O fiz ou não Fiz?
Ele não teria que retornar ou avançar conforme as páginas atuais e anteriores. Não entendi quando você apontou a alteração das classes.
Valeu
MPimenta
@MPimenta,
O exemplo citado no post é somente para ilustração, não existe funcionalidade alguma por trás, se você sabe PHP pode desenvolver essa funcionalidade facilmente.
O cara bem legal este tutorial mas tem como me dar uma dica de como fazer isso funcionar
| 1 | 2 | 3 | 4 | 5 |
pq cada pagina tem o endereço tipo assim http://www.tudodeinformatica.com/page/4” ma sqmuando eu clico n apagina 4 da erro como eu tenho q fazer fazer cada pagina ou tenho q fazer so uma pagina ou eu tenho q fazer varias paginas. Se alguem me der uma ajudinha muito obrigado
Queria sabber como centralizr essa paginação, não posso colocar uma largura fixa pois a mesma vai variar de largura.
Muito bom! Valeu pedro!!!!!