smdesk.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 Einzelbild-Feld ist absolut positioniert und füllt, wenn es angezeigt wird, das ganze Fenster. Das Hilfe-Fragezeichen (ID btn_help) wird absolut in der Ecke rechts oben positioniert. Außer den Popup-Fenstern sind die übrigen Elemente automatisch positioniert.

Die Übersicht

Die Übersicht besteht aus der Überschrift (h1-Element), dem Abschnitt mit den Vorschaubildern (ID div_details) und der Übersicht über die Bildergeschichten (ID div_urls).

Die gesamte Übersicht, der Vorschaubild-Abschnitt und die Übersicht über die Bildergeschichten werden alle mit einer senkrechten Bildlaufleiste angezeigt, falls nötig.

Der Vorschaubild-Abschnitt enthält zu jeder Bildergeschichte einen Unterabschnitt. Es wird immer nur der Unterabschnitt zu der ausgewählten Bildergeschichte angezeigt. Jedes Bild (das für die Sitemap ausgewählt wurde) wird durch ein div-Element (class inlimg) vertreten, in dessen Hintergrund das Bild erscheint. Nach den Bildern folgt ein weiteres div-Element (class inllinks) mit einem Verweis (a-Element) zur Bildergeschichte und einem Verweis zur Galerie-Ansicht der Bildergeschichte. Alle diese "inneren" div-Elemente werden "inline" dargestellt.

Die Übersicht über die Bildergeschichten (ID div_urls) enthält zu jeder Bildergeschichte ein div-Element, (class story), das "inline" dargestellt wird. Jedes dieser div-Elemente enthält das repräsentierende Bild als Verweis auf die Bildergeschichte und ein verschachteltes div-Element (class inl) mit einem Knopf (button-Element), der die Bildergeschichte auswählt, und einem Verweis auf die Galerie-Ansicht der Bildergeschichte.

Das Einzelbild

Das Einzelbild-Feld wird ohne Bildlaufleisten dargestellt. Die Wörter black und grey im Attribut class bestimmen die Hintergrundfarbe.

Das Bild wird immer zentriert. Es wird entweder in seiner normalen Pixel-Größe angezeigt oder an die verfügbare Breite oder Höhe angepasst.

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.

Aufklapp-Fenster haben einen definierten Innenabstand. Ein zusätzlicher oberer Außenabstand der Überschrift im Fenster "Tastatur-Steuerung" (h3) würde stören.

Das "Info-Fenster" (ID about_frame) hat eine feste Breite.