Blätternavigation

Die standardisierte Paging-Navigation sieht wie folgt aus:

Damit die Navigation bei einer hoher Trefferanzahl nicht zu lang wird, werden maximal sieben Seiten angezeigt.

<div class="paging">
    <div class="back">
        <a title="eine Seite zurück" href="#">zurück</a>
    </div>
    <p class="nav-index">
        <strong>
            <span class="aural">Sie sind auf 
             Treffer-Seite:</span> 4
        </strong> |
        <a title="Suchergebnisseite" href="#">5</a> |
        <a title="Suchergebnisseite" href="#">6</a> |
        <a title="Suchergebnisseite" href="#">7</a> |
        <a title="Suchergebnisseite" href="#">8</a> |
        <a title="Suchergebnisseite" href="#">9</a> |
        <a title="Suchergebnisseite" href="#">10</a> |
    </p>
    <div class="forward">
        <a title="eine Seite vor" href="#">vor</a>
    </div>
</div>

Das Element <div class="paging"> ist relativ positioniert. Die darin enthaltenen Elemente "vor" (<div class="forward">) und "zurück" (<div class="back">) sind jeweils absolut an den linken bzw. rechten Rand positioniert. Der Absatz <p class="nav-index"> wird über die CSS-Eigenschaft text-align: center; zentriert dargestellt.