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.

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

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

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.