So sorgen Sie für Übersicht

Workshop CSS: Aufklappbare Elemente

Oft ist der Platz auf einer Seite knapp, Sie möchten aber Ihren Besuchern trotzdem nichts vorenthalten. Aufklappbare Elemente sorgen für Übersicht.

CSS-Workshop

© Archiv

CSS-Workshop

Einige bekannte Websites wie beispielsweise Spiegel.de bedienen sich aufklappbarer Elemente, und zwar nicht nur für die Naviation. In einem Textbeitrag stehen beispielsweise die grundlegenden Informationen - Hintergründe erfahren Sie anschließend in einem separaten Kasten, der sich beliebig aufklappen lässt. Wie Sie diese Technik auch einfach für Ihre Website umsetzen, zeigt der folgende Workshop.

HTML-Grundstruktur

Das grundlegende Element der Seite ist eine HTML-Tabelle, die eine Überschrift und eine Fußzeile enthält. Diese beiden Teile sollen immer dargestellt werden.

<thead><tr><th>Titel</th><th>Interpret/Gruppe</th><th>Bewertung</th><th>ASIN</th></tr></thead>

Das Beispiel stellt eine CD-Liste mit Empfehlungen dar, die neben dem Titel der CD, die Gruppe, die eigene Bewertung und die ASIN-Nummer enthält.

<tfoot><tr><th>Insgesamt</th><Td colspan=3>
5 Empfehlungen</td></tr></tfoot>

Für die Fußzeile sind nur zwei Spalten notwendig, weshalb in dieser Zeile mithilfe von colspan=3 die letzten drei Spalten zusammengefasst werden.

Formatierungen

Für die optische Gestaltung der Tabelle wurde ein wenig in die CSS-Farben- und Formatierungskiste gegriffen. Der Kopf und die Fußzeile sollen in einem dunklen Blau erscheinen, die Zeilen mit den einzelnen CD-Tipps abwechselnd in einem hellen Blau- und Gelbton.

CSS-Workshop

© Archiv

Die Formatierung der Tabelle erfolgt mit klassischen CSS-Elementen. Durch Javascript kommt der Pfeil am unteren rechten Ende hinzu und dient zum Auf- und Zuklappen.

Dazu erhält die komplette Tabelle Klasse aufklappen zugewiesen und jede zweite Tabellenreihe die Klasse eins.

<table class="aufklappen"><tr>...</tr><tr class="eins">...</tr></table>

Nachdem Sie die Inhalte der einzelnen Felder genau abschätzen können, sollten Sie die Breite der Gesamttabelle festlegen, sodass diese im ausgeklappten und komprimierten Modus jeweils das gleiche Aussehen hat. Für eine bessere Kompatibilität verwenden Sie die Maßeinheit em.

table.aufklappen { width:35em; }

Die im Beispiel zugewiesenen 35em entsprechen hier rund 560 Pixel. Sie sollten, damit auch bei älteren Browsern keine Probleme entstehen, jedoch zuvor in Ihrem body-Bereich die Schriftgröße auf 100,01 Prozent ändern.

body { font-size: 100.01%; }

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".