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.
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 au...
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.
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%; }
