Die Breite und Höhe des body-Elements, die die CSS-Regeln festlegen, sind das Doppelte der Mindestmaße. Die Regeln sollen für die Vorschaubilder in Suchmaschinen die Seite auch dann ansprechend darstellen, wenn Script nicht ausgeführt wird. 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.
Die div-Elemente werden absolut positioniert:
| ID | Element |
|---|---|
| div_logo | Das Logo-Feld links in der Titelleiste |
| div_head | Der Titel in der Mitte der Titelleiste |
| div_links | Das Menüfeld rechts in der Titelleiste |
| header | Die Kopfleiste |
| footer | Die Fußleiste |
| ix_main | Die Abschnitts-Liste |
| sl_main | Die Vorschaubilder |
| div_main | Die Haupt-Inhaltsbereich |
classpopup | Popup-Fenster |
Diese Elemente werden durch Javascript positioniert.
Die Titelleiste (div-Element) mit der ID div_title fasst das Logo, den Titel und das Menüfeld zusammen. Ihre Höhe (durch Javascript bestimmt) ist das Maximum der Höhen der drei enthaltenen Elemente, wie sie diese CSS-Datei vorgibt.
Javascript schaltet die Anzeige (Sichtbarkeit) von Elementen mittels Wörter im Attribut class. CSS-Regeln setzen die Eigenschaft display der verborgenen Elemente auf none:
Ein Abschnitt (div-Element), dessen Attribut class das Wort hidden enthält, wird nicht angezeigt.
Die Javascript-Funktionen show_elt und hide_elt tauschen die Wörter hidden und shown im Attribut class gegeneinander aus. Die Elemente, die auf diese Weise angezeigt und verborgen werden, sind die Titelleiste, die Kopfleiste, die Fußleiste, die Abschnittsliste und die Vorschaubilder.
Ein Abschnitt (div-Element), dessen Attribut class das Wort inactive enthält, wird nicht angezeigt.
Die Javascript-Funktionen activate_elt und deactivate_elt tauschen die Wörter inactive und active im Attribut class gegeneinander aus. Beim Umschalten zwischen inactive und active geht es darum, ein Element aus einer Reihe von Elementen nach Art von "Radioknöpfen" hervorzuheben: den aktuellen Abschnitt, das aktuelle Bild. Ein div-Element wird hier hervorgehoben, indem es ausschließlich angezeigt wird, es könnte aber auch auf andere Art hervorgehoben werden. Die betroffenen Elemente sind die Schaltflächen "Auf" und "Ab" in der Abschnittsliste und in der Leiste der Vorschaubilder, der Haupt-Textabschnitt (ID div_maintext) und der Haupt-Bildabschnitt (ID div_mainimg), der Text und die Vorschaubilder zum aktuellen Abschnitt.
Ein Abschnitt (div-Element), dessen Attribut class das Wort popinact enthält, wird nicht angezeigt.
Ein Aufklapp-Fenster (Popup) und sein "Öffner" (Schaltfläche zu Anzeige) können nicht beide gleichzeitig das Wort popact im Attribut class enthalten. Die Javascript-Methoden Popup::open und Popup::close schalten zwischen den Wörtern popinact und popact im Attribut class eines Popup-Fensters und seines Öffners um.
Die Abschnittsliste (ID ix_main) und die Vorschaubilder (ID sl_main) sind absolut positionierte "Schiebeleisten". Nicht nur die "Rahmen" (IDs ix_frame, mt_frame und sl_frame) blenden den Inhalt außerhalb ihrer Grenzen aus (overflow hidden), sondern auch die umfassenden "Behälter" selbst. Während der Inhalt der Schiebeleisten aktualisiert wird, können der Rahmen und die Bewegungs-Schaltflächen zusammen die Höhe des Behälters überschreiten. Das führte zu einem unnötigen Bild-Flackern, wenn der überlaufende Inhalt nicht ausgeblendet würde.
Ein Vorschaubild ist ein Feld (div-Element) mit dem Wort slide im Attribut class. Die Breite eines Vorschaubild-Feldes ist auch die Breite der Vorschaubild-Leiste. Die Höhe eines Vorschaubildes ist die Schrittweite, um die sich die Vorschaubild-Leiste bewegt, wenn die Maus auf eine der Schaltflächen "Auf" (ID sl_up) oder "Ab" (ID sl_down)zeigt.
Für die Reihe der Vorschaubilder eines Abschnitts gibt es ein einziges Hintergrundbild: die Montage der Vorschaubilder. Ein hervorgehobenes Vorschaubild hat ein eigenes Hintergrundbild (prev_frame.png): einen farbigen Rahmen mit einem transparenten Inneren.
Die Abschnittsliste ist ein ul-Element, dessen Listeneinträge nicht besonders gekennzeichnet sind (list-style-type: none). Die Einträge haben einen kleinen Innenabstand.
Der Haupt-Inhaltsbereich (ID div_main) enthält den Haupt-Textbereich (ID mt_main) und den Haupt-Bildbereich (ID div_mainimg), von denen zu jeder Zeit nur ein Element angezeigt wird. (s. Sichtbarkeit) Der "Behälter" macht die Anpassung an die Größe des Browserfensters einfacher.
Javascript interpretiert die hier festgesetzte Höhe als Grenze für die Anzeige von Kopf- und Fußleiste. Nur wenn die Höhe des Browserfensters größer ist als die Summe der hier festgesetzten Höhe und der Höhe der Titelleiste (sofern diese angezeigt wird), werden Kopf- und Fußleiste angezeigt.
Der Haupt-Bildbereich (ID div_mainimg) wird auf die ganze Höhe des Haupt-Inhaltsbereichs ausgedehnt. Sonst würde seine Höhe automatisch nach dem Inhalt als 0 bestimmt, denn der ist anfangs ein img-Element, dessen Höhe an den Haupt-Bildabschnitt angepaßt ist.
Die Wörter grey und black im Attribut class des Haupt-Bildabschnitts bestimmen Hintergründe. Die Datei desktop.xslt (Text) legt die verfügbaren Wörter fest, hier werden die zugehörigen Hintergrundfarben definiert.
Die Javascript-Funktion do_show_image paßt die Darstellung des Bildes an die Größe des Bildabschnitts an, indem sie eines der Wörter fullheight, fullwidth oder normal in den Wert des Atrributs class einfügt. Hier werden die zugehörigen CSS-Regeln definiert.
Der Haupttext (ID mt_main) hat einen oberen Rand (1 Pixel, transparent), damit der obere Abstand (margin) der folgenden Überschrift nicht mit dem oberen Abstand des gesamten Inhaltsbereichs zusammengefaßt wird. Andernfalls bliebe möglicherweise der untere Rand des Haupttextes immer unsichtbar.
Die Überschriften der Textabschnitte (h2-Elemente) sind serifenlos. Verweise auf Bilder werden durch Kursivschrift und den "Verweis-Mauszeiger" (pointer) gekennzeichnet. Ein Bildverweis unter dem Mauszeiger wird durch eine Hintergrundfarbe hervorgehoben.
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 und die Darstellung der "Öffner": Wenn das Aufklapp-Fenster sichtbar ist, dann ist die Schrift des Öffners grau. Wenn das Aufklapp-Fenster nicht sichtbar ist, dann ist die Schrift des Öffners unterstrichen, und der Mauszeiger (cursor nimmt die Form für einen Verweis (pointer) an.
Die Aufklapp-Fenster sind die Fenster "Einstellungen" (ID set_frame), "Kurzhilfe" (ID help_frame) und "Info" (ID about_frame). Die Größe der Aufklapp-Fenster ergibt sich automatisch aus dem Inhalt, nur für das Fenster "Info" wird die Breite vorgegeben.
Die Stichwörter (dt - Elemente) im Fenster "Info" sind etwas abgesetzt.