Als je een website hebt met veel pagina's, wil je misschien een soort pagination (inhoud verspreiden over meerdere pagina's) aan elke pagina toevoegen.
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
Je kunt de huidige pagina markeren met een .active
class en door gebruik te maken van de :hover
selector kun je de kleur van elke paginalink wijzigen wanneer je de muis erover beweegt.
.pagination a.active {
background-color: #408bb5;
color: white;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
}
Voeg de eigenschap border-radius
toe als je een afgeronde "active
" en "hover
" knop wilt weergeven.
.pagination a {
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
}
Door de eigenschap transition
te gebruiken kun je een overgangseffect creëren, deze is dan zichtbaar wanneer je de muis erover beweegt.
.pagination a {
transition: background-color .5s;
}
Indien je randen wilt weergeven om de pagina nummers (pagination) dan kun je de eigenschap border
gebruiken.
.pagination a {
border: 1px solid #ddd; /* grijs */
}
Om de paginering wat mooier eruit te laten zien kun je aan het begin en aan het eind de hoeken van de randen afronden. Probeer het voorbeeld hieronder maar eens uit:
.pagination a:first-child {
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
}
.pagination a:last-child {
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
}
Je kunt ruimte tussen de links creëren door gebruik te maken van de margin
eigenschap.
.pagination a {
margin: 0 4px;
}
Om de grootte van de paginering aan te passen kun je de font-size
eigenschap gebruiken.
.pagination a {
font-size: 20px;
}
Om de paginering te centreren, gebruik je de text-align
eigenschap met de waarde center.
.center {
text-align: center;
}
Ad blocker gedetecteerd! | |
Ons website heeft gedetecteerd dat u een Ad blocker gebruikt. Codecenter.nl is gratis, wij blijven overeind door het weergeven van advertenties en u kunt ons daarbij helpen. Het wordt aanbevolen om uw Ad blocker uit te schakelen zodat u verder gebruik kunt maken van codecenter.nl, alvast bedankt. |