navigationssysteme.com
Unter der Domain navigationssysteme.com befindet sich eine Webseite auf der unterschiedliche Navigationsgeräte sowie deren Zubehör vorgestellt werden. Die Seite ist sehr komplex aufgebaut und nutzt für ihre grafische Interpretation durch die verschiedenen Browser ein CSS-Stylesheet (screen.css) das im Verzeichnis templates/navigationssysteme/css/ lokalisiert ist.
Im Stylesheet sind alle Vorgaben enthalten, die die notwendig sind, um die Seite korrekt darstellen zu können: Es werden die einzelnen Bereiche, ihre Größen und ihre Besonderheiten in Bezug auf Bilder oder Farben definiert. Am Beispiel der Listen – so wie sie auch in Menüs verwendet werden – wird schnell klar, wie die Programmierung dieser Seite abläuft:
Das größte und wesentlichste Menü der Seite ist im Bereich „menu“ untergebracht. Dieser Bereich, der gleichzeitig ein eigener div-container ist, wird durch den CSS-Befehl float:left; im linken Bereich des Layouts positioniert. Seine Breite wird mit 180 Pixel angegeben. Wird dieser Container aufgerufen, dann wird zunächst ein Mal die erste Überschrift der Größe h2 und der Klasse „menuHeader menuHeader-1“ dargestellt (Eigenschaften). Danach folgt eine unsortierte Liste <ul> mit den einzelnen Listenpunkten <li>. Die Liste hat die Klasse „menu menu-1“.
In der CSS Datei werden die dazugehörigen Fomationselemente wie folgt gelistet:
Für die Klasse „menuHeader menuHeader-1“ wird der Hintergrund #5A6F8B festgelegt (ein mittleres graublau) und das Bild „hersteller.gif“ als Bullet um die einzelnen Menüpunkte hervor zu heben definiert. Die einzelnen Listenpunkte werden durch die Klasse .menu li formatiert: .menu li {border-bottom: 2px dotted #B5B8BB;font-size: 11px; } Dies bedeutet, dass jeder Menüpunkt nach unten eine gepunktete Linie mit der Höhe 2 Pixel und der Farbe #B5B8BB hat und mit einer Schrift der Größe 11 Pixel dargestellt wird.
Danach folgt dann die nächste Überschrift (Hersteller) mit einer weiteren unsortierten Liste <ul> nach dem selben Prinzip. Der einzige Unterschied ist die Zuordnung der Klassen bei den Überschriften. Während „Eigenschaften“ durch „menuHeader menuHeader-1“ definiert ist, wird „Hersteller“ durch „„menuHeader menuHeader-2“ festgehalten.
Alle anderen Bereiche der Seite sind ebenfalls in der CSS Datei screen.css festgelegt und werden gleichfalls nach klassischen CSS-Kriterien gestaltet.