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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…
News
Video
SciFi-Action mit Ryan Gosling und Harrison Ford
Video
Agatha-Christie-Verfilmung mit Johnny Depp
Video
Kinostart: 23.11.2017