TU Berlin

Online-StyleguideGrundraster der HTML-Seiten

Inhalt des Dokuments

zur Navigation

Grundraster der HTML-Seiten

Die Website der TU Berlin ist für eine Auflösung von 1024 x 768 px optimiert. Das Grundraster wird für alle Seiten verwendet. Es wird nachfolgend am Beispiel der Startseite erläutert (weitere Details zu den einzelnen Elementen finden sich im Abschnitt Module). Auf spezifischen Unterseiten wird das Grundraster seiten- und inhaltsspezifisch mit zusätzlichen Layout-Modulen ergänzt.

Alle Seiten sind in vier Hauptmodule eingeteilt. Diese werden durch einen alles umschließenden Container #wrapper zusammengehalten.

  • #wrapper: umschließt die Navigation (#nav), den Inhalt (#main) und die rechte Randspalte (#extras) und gibt die Seitenbreite vor
  • Kopf = #branding: beinhaltet das Logo (#home), die Servicenavigation (#nav-meta), die Suche (#search-box), den Rubrikenkopf (.section-box) und das Login (#login). Das Branding ist relativ positioniert (position: relative;)
  • Hauptnavigation = #nav: beinhaltet die globale Navigation, bestehend aus einer Liste (ul)
  • Rechte Randspalte = #extras: beinhaltet die Suche, die Hilfe-Box und Boxen mit weiterführenden Links und Informationen
  • #content: der Content umschließt die Navigation (#nav), den Inhalt (#main) und die rechte Randspalte (#extras) und ist um die Breite der Navigation nach links (padding-left: 260px) und um die Breite der rechten Randspalte nach rechts (padding-right: 240px) eingerückt
  • Inhaltsbereich = #main beinhaltet verschiedene Inhaltselemente, wie z.B. Intros, Teaser, Teaserlisten, Bilder und Textelemente und den Fußbereich

nächstes Kapitel:

Navigation

Direktzugang

Schnellnavigation zur Seite über Nummerneingabe