Designbeispiel: ein eleganter Kalender

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Kalender eignen sich hervorragend, um Dinge zu organisieren – sie helfen uns dabei, gemeinsame Mittagessen anzusetzen, Geburtstage nicht zu vergessen und unsere Flitterwochen zu planen. Als Designer können wir uns all die Monate, Termine und Verabredungen als tabellarische Daten vorstellen.

Wenn Sie Ihren Kalender in Form einer allgemeinen HTML-Tabelle darstellen, sieht diese vermutlich eher sachlich aus. Wenn der Kalender außerdem noch eine große Anzahl von Ereignissen enthält, kann er schnell überladen wirken. In diesem Designbeispiel benutzen wir CSS, um den Kalender lesbarer zu machen, als dies mit reinem HTML-Code möglich wäre.

In der folgenden Abbildung sehen Sie die reine HTML-Darstellung des Kalenders ohne irgendwelche Stildefinitionen.

Abbildung: Der Kalender ohne Stildefinitionen.

Als Nächstes werfen wir einen Blick auf die Struktur des Markup-Codes. Wie Sie bereits aus dem Rezept Den Zellzwischenraum einstellen wissen, muss der Wert für das Attribut cellspacing im table-Element selbst festgelegt werden:

Es folgen jeweils auf einer eigenen Zeile die Zellen mit den Tabellenüberschriften (th), die das Jahr, den Monat und den Tag enthalten:

Jedes Datum eines Monats enthält einen Link auf den betreffenden Tag (der den Benutzer zu einer detaillierten Liste für diesen Tag führt) sowie einen Link, über den weitere Termine für diesen Tag eingetragen werden können. Umgeben Sie diese beiden Links mit einem div-Element, damit es zwischen den beiden Teilen der Tabellenzelle eine klare Trennung gibt.

Das erste Datum in unserem Kalender ist der 1. Oktober, der auf einen Montag fällt:

Für den folgenden Tag, den 2. Oktober, wurde bereits ein Termin eingetragen. Dieser ist in der Dokumentstruktur als Link markiert und befindet sich unterhalb des div-Elements mit dem Datum und dem Link auf die Funktion neuerTermin:

Der übrige Markup-Code besitzt eine ähnliche Struktur. Um Samstag und Sonntag als Wochenendtage hervorzuheben, weisen Sie den entsprechenden Zellen eine eigene Klasse (class) zu.

Nachdem die Struktur des Kalenders fertig ist, können wir uns nun den Stildefinitionen zuwenden. Als Erstes definieren wir die Stile für die Tabelle selbst und die enthaltenen Links. Die Breite der Tabelle wird auf 100% des sichtbaren Bereichs festgelegt. Für die Darstellung wird das Modell der zusammengefassten Rahmen (border-collapse: collapse) verwendet (siehe das Rezept Rahmen und Innenabstände für Zellen einstellen). Dies ist das von den meisten Webdesignern benutzte Modell, das vom größten Teil der CSS-fähigen Browser richtig interpretiert wird. Außerdem wird die Unterstreichung der Links abgeschaltet (siehe folgende Abbildung):

Abbildung: Die Unterstreichung der Links wurde entfernt.

Im nächsten Schritt nehmen wir die Gestaltung der ersten drei Tabellenzeilen vor. Diese Zeilen werden jeweils über einen ID-Selektor angesprochen, da die Stile nur einmal im Dokument vorkommen sollen. Alle drei Zeilen mit Tabellenüberschriften sollen in einer Schrift mit fester Zeichenbreite dargestellt werden. Dabei erhält der Monat die höchste Schriftgröße, es folgen Jahr und Tage in absteigender Größe (siehe die nächste Abbildung):

Abbildung: Stildefinitionen für die ersten drei Zeilen.

Jetzt ist es an der Zeit, die Datums- und "Neuer Termin"-Links mit Stilen zu versehen. Um die in den meisten Kalendern verwendeten "Datumskästchen" nachzubilden, werden die Rahmenseiten rechts und unterhalb des Textes hervorgehoben und der Inhalt per Definition als Float nach links verschoben.

Die Links zum Hinzufügen neuer Termine sollen möglichst nah beim Datum stehen. Wenn Sie den Link per Floating rechts anordnen, wird er neben dem Datum für den folgenden Tag angezeigt. Ordnen Sie ihn dagegen links an, so teilen Sie dem Benutzer mit, dass sich das Pluszeichen (+) auf einen neuen Termin für den aktuellen Tag bezieht (siehe nächste Abbildung):

Abbildung: Stildefinitionen für die Datums- und "Neuer Termin"-Links.

Nun befassen wir uns mit den Stildefinitionen für die Terminlisten. Da die vorangehenden Links als Float definiert wurden, wird eine sichtbare Abgrenzung benötigt. Gleichzeitig sollen die Termineinträge unterhalb des Datums angezeigt werden.

Die sichtbare Trennung erreichen Sie durch die Eigenschaft clear. Damit können Sie festlegen, welche Seiten eines Elements nicht neben einem Float stehen dürfen. In diesem Fall soll die linke Seite der Terminbeschreibung nicht neben den Datums- und "Neuer Termin"-Links stehen. Für den Fall, dass sich das Design in der Zukunft ändert, benutzen wir hier vorsichtshalber den Wert both anstelle von left.

Danach ändern wir die Darstellungsrolle des Links auf block und versehen ihn an seiner Unterseite mit einem Innenabstand (siehe nächste Abbildung). Durch diese Anpassungen soll verhindert werden, dass sich mehrere Termineinträge in der gleichen Tabellenzelle überschneiden. Zudem schafft der Innenabstand einen netten visuellen Puffer, durch den das Auge leicht zwischen zwei Terminen unterscheiden kann:

Abbildung: Die Links zu den Terminen werden als Block-Level-Elemente behandelt.

Jeder Tabellenzelle wird eine Breite von 14% zugewiesen, da die Gesamtbreite der Tabelle (100% des sichtbaren Bereichs) auf die 7 Wochentage verteilt ungefähr den Wert 14 ergibt. Die Zellen werden mit einem weißen Rahmen umgeben, und ihr Inhalt wird mit Hilfe der Eigenschaft vertical-align oben angeordnet (siehe nächste Abbildung):

Abbildung: Der Zelleninhalt wird oben ausgerichtet.

Die Hintergrundfarbe für die Termine am Wochenende wird dunkler dargestellt als die der übrigen Wochentage (siehe folgende Abbildung):

Abbildung: Die Wochenendtage werden durch einen dunkelgrauen Hintergrund hervorgehoben.

Die übrigen Tage im Kalender werden mit einem leichten Grauton hinterlegt (siehe nächste Abbildung):

Abbildung: Stildefinitionen für leere Daten des folgenden Monats.

Der aktuelle Tag (in unserem Beispiel der 27.) wird durch einen 2 Pixel breiten schwarzen Rahmen markiert:

Und damit ist der Kalender fertig (siehe folgende Abbildung).

Abbildung: Das aktuelle Datum wird durch einen dunkleren Rahmen gekennzeichnet.