Team-Masters.com
Que du Gratuit pour Webmasters
Une barre de pagination tout en CSS
Voici comment créer une barre de pagination qui vous permet de proposer à vos utilisateurs de cliquez sur les numéros de pages suivantes ou précédentes et de se repérer sur la page en cours.
Voici un exemple de pagination.
Le code CSS à insérer dans l’en-tête ou à mettre dans un fichier CSS externe :
.pagination{
padding: 2px;
}
.pagination ul{
margin: 0;
padding: 0;
text-align: left; /*Set to "right" to right align pagination interface*/
font-size: 16px;
}
.pagination li{
list-style-type: none;
display: inline;
padding-bottom: 1px;
}
.pagination a, .pagination a:visited{
padding: 0 5px;
border: 1px solid #9aafe5;
text-decoration: none;
color: #2e6ab1;
}
.pagination a:hover, .pagination a:active{
border: 1px solid #2b66a5;
color: #000;
background-color: lightyellow;
}
.pagination li.currentpage{
font-weight: bold;
padding: 0 5px;
border: 1px solid navy;
background-color: #2e6ab1;
color: #FFF;
}
.pagination li.disablepage{
padding: 0 5px;
border: 1px solid #929292;
color: #929292;
}
.pagination li.nextpage{
font-weight: bold;
}
* html .pagination li.currentpage, * html .pagination li.disablepage{ /*Pour bug IE6.*/
margin-right: 5px;
padding-right: 0;
} Maintenant le code HTML de pagination :
<div class="pagination">
<ul>
<li class="disablepage">« précédent</li>
<li class="currentpage">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="#">15</a></li>
<li><a href="#">16</a></li>
<li class="nextpage"><a href="#">Suivant »</a></li>
</ul>
</div>C’est cool non ? Changez maintenant les polices, bordures, couleurs à votre guise. C’est sur Team-Masters.com.
16 août 2006
22 menus verticaux en CSS prêts à l’emploi
Un menu horizontal bien souligné
Un menu vertical avec un effet bouton en CSS
Un menu horizontal souligné au passage de la souris en CSS
Un menu horizontal en CSS avec une barre de séparation
Un menu vertical hiérarchisé en CSS
Un menu vertical aux effets agréables en CSS
CSS : Un menu vertical en 3D
Créez un menu vertical avec effet de rollover en CSS
Un menu vertical simple en CSS
