ixdesk.css


Fenstergröße und Layout

Die Größe des body-Elements, die die CSS-Regeln festlegen, ist die Mindestgröße. Das body-Element füllt immer das ganze Fenster aus. Breite und Höhe werden, falls nötig, unabhängig von einander auf die Maße des Fensters vergrößert.

Das Layout ist durch Javascript in Verbindung mit diesen Regeln fest vorgegeben. Die Titelleiste mit dem Logofeld, der Überschrift und der Klang-Schaltfläche, die Navigationsleiste, der Inhaltsbereich und das Feld für eingebetteten Inhalt (iframe) werden absolut positioniert: Die Titelleiste oben, der Navigationsbaum links und der Inhaltsbereich rechts unter der Titelleiste. Das iframe-Element und der Inhaltsbereich sind stets gleich positioniert. Wenn der eingebettete Inhalt sichtbar ist, überdeckt er den Haupt-Inhaltsbereich. Das Logofeld ist genau so breit wie die Navigationsbaum.

Titelleiste

Die Titelleiste (div-Element) mit der ID div_title fasst das Logo (ID div_logo), die Überschrift (ID div_head) und die Klang-Schaltfläche (ID div_sound) zusammen. Ihre Höhe (durch Javascript bestimmt) ist das Maximum der Höhen des Logo und der Überschrift.

Die Klang-Schaltfläche

Die Beschriftung der Klang-Schaltfläche ist ein verschachteltes, absolut positioniertes div-Element. So kann der Text vertikal in der Titelleiste zentriert werden.

Abhängig vom Zustand der Klangwiedergabe wird der Text der Klangschaltfläche durch ein Dreieck als Symbol für "Wiedergabe" oder durch ein Quadrat als Symbol für "Stop" ergänzt.

Der Haupt-Inhaltsbereich

Der Haupt-Inhaltsbereich ist ein verschachteltes div-Element innerhalb des Elements mit der ID div_content. Für das verschachtelte Element werden Innenabstände festgelegt. Diese beieinflussen nicht die Positionierung des enhaltenden Elements.

Die Unterabschnitte, die im Inhaltsverzeichnis (Navigationsbaum) genannt sind, sind bis auf den aktuellen Abschnitt mit dem Wort hidden im Attribut class gekennzeichnet. Sie werden nicht dargestellt.

Fokussierte Verweise (a-Elemente) im Haupt-Inhaltsbereich werden schwarz auf hellblauem Hintergrund ohne eine Umrandung dargestellt.

Der Navigationsbaum

Der Navigationsbaum ist ein verschachteltes div-Element in einem absolut positionierten div-Element mit der ID div_navig. Das innere Element definiert Innenabstände. Verschachtelte Einträge (div-Elemente) werden eingerückt. Einträge unterhalb eines "gefalteten" Eintrags werden verborgen.

Der Text eines Eintrag (p-Element) enthält auch ein span-Element, das für ein zusätzliches Symbol gedacht ist. Das Symbol hängt ab vom Attribut class.

Der aktuelle Eintrag wird durch die Hintergrundfarbe hervorgehoben

Aufklapp-Fenster

Die Aufklapp-Fenster sind durch das Wort popup im Attribut class gekennzeichnet. Sie werden dünn umrandet mit einem farbigen Hintergrund dargestellt. Die Wörter popact und popinact schalten die Sichtbarkeit der Fenster.

Das Dokument enthält ein Aufklapp-Fenster mit dem Titel "Tastatur-Steuerung" und der ID help_frame. Für dieses Fenster wird hier die Breite vorgegeben.