direkt zum Inhalt springen

direkt zum Hauptnavigationsmenü

Sie sind hier

TU Berlin

Inhalt des Dokuments

Rechte Randspalte

Jedes Modul ist mit der Klasse "box" ausgezeichnet: <div class="box">

Wenn die Box eine spezielle Funktion erfüllt, z.B. die Hilfsfunktionen, wird diese Funktion per zusätzlicher Klasse in das Div eingetragen. So werden zur Grundgestaltung der allgemeinen Box boxspezifische Styles zugewiesen.

Die Module <div class="box"> haben keine feste Breite und sind links eingerückt (margin-left: 40px;).

Boxen im Überblick

Kalender-Box <div class="box calendar">: Die Kalenderbox besteht aus einer Tabelle

Kalender-Box
Lupe [1]

Fotogalerie-Box <div class="box fotogallery">: Die Fotogalerie-Box besteht aus drei Bildern die links gefloatet sind.

Fotogalerie-Box
Lupe [2]

Direktzugang-Box <div class="box quickaccess">.

Direktzugang-Box
Lupe [3]

HTML

<div
class="box quickaccess">
<h3>Schnellzugang%lt;/h3>
<div class="standortnr">
<div class="aural">Schnellnavigation zur Seite über Nummerneingabe</div>
<label for="nummer">Gehe zu:</label>>
<input id="nummer" type="text" name="textfield" value="4732" title="Hier bitte
Standort-Nummer eingeben" onfocus="if (this.value == 'Nummer') this.value=''"
onblur="if (this.value == '') this.value=Nummer"/>
<a href="fachgebiet-energietechnik-umweltschutz.html">
<input class="button" type="image" alt="suchen" name="suchen"
src="img/icon-link-intern.gif" title="suchen" />
</a>
</div>
</div>

Help-Box <div class="box help">: Box für Hilfefunktionen, wie z.B. Schriftvergrößerung.

Help-Box
Lupe [4]

Link-Box: Bei Linklisten, die den gleichen Typus von Links enthalten - z.B. eine Linksliste mit externen Links - wird der Linklisten-Typ per Klasse in die ul geschrieben. Besteht eine Linkliste aus unterschiedlichen Linktypen, so steht in der ul keine Klasse, sondern jedes a ist indivduell mit einer Klasse versehen, die den Linktyp beschreibt.

Interne Linkliste
Lupe [5]
Externe Linkliste
Lupe [6]
Download Linkliste
Lupe [7]

nächstes Kapitel:

  • Footer [8]

Ansprechpartner/in

Corporate Design & Online-Design: Pressestelle
E-Mail-Anfrage [9]

Technik: ZE Campusmanagement
E-Mail-Anfrage [10]
------ Links: ------

Zusatzinformationen / Extras

Direktzugang

Schnellnavigation zur Seite über Nummerneingabe

Diese Seite verwendet Matomo für anonymisierte Webanalysen. Mehr Informationen und Opt-Out-Möglichkeiten unter Datenschutz.
Copyright TU Berlin 2008