direkt zum Inhalt springen

direkt zum Hauptnavigationsmenü

Sie sind hier

TU Berlin

Inhalt des Dokuments

Inhaltsbereich

Teaser

Jeder Teaser ist mit der Klasse "teaser" ausgezeichnet: <div class="teaser">. Teaser haben eine Breite von 99% (notwendig für Internet Explorer 6.0), sind links gefloatet und erstrecken sich über den gesamten Inhaltsbereich. Der graue Balken mit der Rubrikenangabe und das Datum sind optional.

Teaser über die volle Breite des Inhalts
Lupe

Schmale Teaser haben eine Breite von 235px und sind links gefloatet. Sie werden über eine zusätzliche Klasse im Div-Element ausgezeichnet <div class="teaser small">. So werden zur Grundgestaltung der allgemeinen Teaser teaserspezifische Styles zugewiesen.

Schmaler Teaser
Lupe

Teaserlisten

Teaserlisten sind eine Kombination aus kurzen Textteasern, die gruppiert und mit einer Überschrift ergänzt werden.

Teaserlisten bestehen aus einem <div class="listing">, das eine Liste (ul) beinhaltet. Sie haben keine feste Breite.

Die Icons der Links in der Liste sind Hintergrundbilder, die über das CSS geladen werden.

#main .listing li a { margin: 0; padding: 5px 0 6px 24px; background: url(../img/icon-link-intern.gif) 0 5px no-repeat; display: block; height: 1%; }

Je nachdem, welche Funktion die Teaserliste erfüllt, wird in die <ul> eine zusätzliche Klasse eingetragen. So werden zur Grundgestaltung der allgemeinen Teaserliste zusätzliche Styles zugewiesen.

Teaserliste
Lupe

Beispiel

Sprungmarkennavigation <ul class="toc">: Über die Klasse "toc" werden der Teaserliste spezifische Styles der Sprungmarkennavigation zugewiesen.

Sprungmarkennavigation
Lupe

Banner

Banner erstrecken sich über die gesamte Breite des Inhalts- bzw. des Marginalspaltenbereichs.

Über <p class="aural">Werbung</p> erfolgt eine Kennzeichnung, dass ein Werbeblock folgt. Diese Zusatzinformation wird durch die Klasse "aural" aus dem sichtbaren Bereich geschoben, bietet aber einen zusätzlichen Komfort für blinde Menschen.

Werbebanner
Lupe

Schaufenster

Diese Teaser haben eine Breite von 235px und sind links gefloatet. So können jeweils zwei nebeneinander dargestellt werden. Der erste Teaser ist mit der Klasse "fakfirst" ausgezeichnet. Diese Klasse bewirkt einem Abstand von 20px zwischen den Teasern.

Schaufenster
Lupe

nächstes Kapitel:

Zusatzinformationen / Extras

Direktzugang

Schnellnavigation zur Seite über Nummerneingabe

Diese Seite verwendet Piwik für anonymisierte Webanalysen. Mehr Informationen und Opt-Out-Möglichkeiten unter Datenschutz.

Ansprechpartner/in

Corporate Design & Online-Design: Pressestelle

Technik: tubIT