direkt zum Inhalt springen

direkt zum Hauptnavigationsmenü

Sie sind hier

TU Berlin

Inhalt des Dokuments

Blätternavigation

Die standardisierte Paging-Navigation sieht wie folgt aus:

Blätternavigation
Lupe

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

HTML

<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>

CSS

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.

nächstes Kapitel:

Zusatzinformationen / Extras

Direktzugang

Schnellnavigation zur Seite über Nummerneingabe

Diese Seite verwendet Piwik für anonymisierte Webanalysen. Mehr Informationen und Opt-Out-Möglichkeiten unter Datenschutz.

Ansprechpartner/in

Corporate Design & Online-Design: Pressestelle

Technik: tubIT