CSS Pagination (Seitennummerierung)

CSS Pagination (Seitennummerierung) 01.12.2007

Sobald man sehr langen Seiteninhalt hat oder die Anzahl der Artikel soweit angestiegen ist, dass der User die Internetseite endlos nach unten scrollen muss, sollte man den Inhalt oder die Artikel auf mehrere Seiten aufteilen. Dies erhöht die Benutzerfreundlichkeit ungemein. Damit der User optimal durch die einzelnen Seiten geführt werden kann, sollte man sich Gedanken über eine Pagination (Seitennummerierung) machen. Diese soll nicht nur schön aussehen, sondern auch eine hohe Usability haben.

Tipps für die Pagination

Bevor wir zum Beispiel kommen, möchte ich zuvor einige allgemeine Tipps für die eigene Pagination geben:

den klickbaren Bereich groß genug wählen, damit der User keine Schwierigkeiten hat, die Seitenzahl zu „treffen”
den Abstand zwischen zwei klickbaren Bereichen groß genug wählen, damit der User sich nicht versehentlich verklickt
die aktuelle Seitenzahl anders darstellen als die anderen Seitenzahlen, damit der User weiß, auf welcher Seite er sich befindet
für die Usability ist es sinnvoll „Zurück”- und „Weiter”-Links zu verwenden
die angebotenen Seitenzahlen auf maximal zehn Stück begrenzen aber die letzte Seitenzahl noch anzeigen (die Lücke kann man mit „…” anzeigen); jetzt ist es auch sinnvoll „erste Seite”- und „letzte Seite”-Links zu verwenden

XHTML Markup

Fangen wir wie gewohnt mit dem XHTML-Code an:

<div id="pagination">

<span><a href="#seite=1">&laquo; Zurück</a></span>

<span><a href="#seite=1">1</a></span>

<span class="aktuell">2</span>

<span><a href="#seite=3">3</a></span>

<span><a href="#seite=4">4</a></span>

<span><a href="#seite=5">5</a></span>

<span><a href="#seite=3">Weiter &raquo;</a></span>

</div>

Zu beachten ist, dass es sich bei dem Code nur um den Code für eine Seite (hier: Seite 2) handelt. Er muss für jede Seite entsprechend angepasst werden. Da ich im Beispiel lediglich 5 Seiten gewählt habe, benutze ich keine Links zur ersten oder letzten Seite, sondern lediglich Links zur vorherigen und nächsten Seite.

Wichtig ist, dass der Span-Tag (<span>) der aktuellen Seite mit der Klasse „aktuell” versehen wird. Je nach dem, wie zwischen den Seiten navigiert wird, müssen die Links zu den einzelnen Seiten angepasst werden. Die Links, die ich im Beispiel benutzt habe, sind nur beispielhaft.

Pagination Beispiel 1

Ich habe mir zwei Designs für eine Pagination überlegt. Das erste Design ist eher universell einsetzbar, wohingegen das zweite Design spezieller ausgerichtet ist. Zunächst zum ersten Design:

div#pagination{

	font-family:tahoma;

	text-align:center;

}

#pagination span{

	display:block;

	float:left;

	font-size:11px;

	line-height:13px;

	margin: 2px 6px 2px 0;

}

#pagination span a{

	background-color:#ffffff;

	border:1px solid #bbbbbb;

	color:#303030;

	display:block;

	padding:1px 5px 2px 5px;

	text-decoration:none;

}

#pagination span a:hover, #pagination span a:active{

	background-color: #bbbbbb;

	border:1px solid #303030;

}

#pagination span.aktuell{

	background-color: #303030;

	border:1px solid #303030;

	color:#ffffff;

	font-size:11px;

	padding:1px 5px 2px 5px;

}

Die Seitennummerierung sieht dann wie folgt aus:

« Zurück 1 2 3 4 5 Weiter »

Pagination Beispiel 2

Nun folgt das CSS, das das Design für die nächste Seitennummerierung angibt:

div#pagination{

	font-family:tahoma;

	text-align:center;

}

#pagination span{

	border:1px solid #303030;

	display:block;

	float:left;

	font-size:11px;

	line-height:13px;

	margin: 2px 4px 2px 0;

}

#pagination span a{

	background-color:#f20161;

	border:1px solid #ffffff;

	color:#ffffff;

	display:block;

	font-weight:bold;

	padding:1px 5px 2px 5px;

	text-decoration:none;

}

#pagination span a:hover{

	border:1px solid #303030;

}

#pagination span.aktuell{

	border:0;

	color:#303030;

	font-size:17px;

	font-weight:bold;

	line-height:21px;

	margin-top:0;

	padding:1px 3px 0 3px;

}

Die Seitennummerierung schaut dann wie folgt aus:

◄ Zurück 1 2 3 4 5 Weiter ►

Auch der Pagination sind keine Grenzen in der Gestaltung gesetzt. Sie kann nach den eigenen Wünschen gestaltet werden.

Zum Schluss noch zwei nützliche Links zum Thema:
» Beispiele für gut und schlecht gelungene Seitennummerierungen
» Weitere Designs für Seitennummerierungen

« Zur Übersicht

Kommentare

(Trackback senden) (CSS Pagination (Seitennummerierung)) (Kommentare abonnieren)

Clear

1

am 18.05.2009 um 13:16 Uhr.
Es heißt Paginierung, nicht Pagination.

Web-Spirit Sebastian Gollus