Window Maker - ein reines CSS Template
Die Inspiration für die Erstellung dieser Homepagevorlage, holten wir uns aus dem Internet. Vor einiger Zeit sahen wir eine Vorlage im Netz, die uns mit ihrem einfachen und doch zugleich raffinierten Aufbau verblüffte. Wir waren so fasziniert von der Technik, dass wir die Idee aufgriffen und diese Designvorlage, namentlich "Window Maker",- sowie gleich noch seinen Bruder den "Window-Manager" kreierten.
Leider wissen wir nicht mehr wo wir es gesehen haben, sonst könnten wir uns beim Ursprungsautor bedanken. An dieser Stelle also ein herzliches Dankeschön für die Inspiration an unbekannt.
Seitentechnik für moderne Browser
Die Quintessenz vorweg:
Die einzigen Bilder oder Images die hier verbaut wurden, sind die fixierten XHTML und CSS Badges, unten links von Validome. Alle anderen grafischen Elemente sind reiner CSS-Natur !
Um den heutigen Anforderungen an die unterschiedlichen Bildschirmauflösungen gerecht zu werden, entschlossen wir uns für ein sogenanntes fluides Layout. Wie Sie aus dem Code entnehmen können, wurde der Inhaltscontainer mit einer elastischen Breite versehen.
#window { min-width:40em; max-width:60em; }
Eine flächendeckende Usability (Gebrauchstauglichkeit) der Benutzerführung im Bereich der Navigation, wird durch die fixierten Karo`s sichergestellt. Hier könnte man im Praxiseinsatz durch zusätzliche Spann-Elemente, weitere Information für den User bei hover (onmouseover) über ein Zusatzfenster einblenden.
Alternativ wäre auch eine Lösung denkbar, welche die Karo`s bei hover vergrößert anzeigt, um ebenfalls weitere Informationen preiszugeben.
Auf jeden Fall denken wir hier an reine CSS-Lösungen, ohne Script-Einsatz, da ja bekanntlich bei abgeschalteten Javascript, das Menue nicht mehr funktionsfähig wäre.
Technik für den Internet Explorer 5.5/6.0
Leider spielt der InternetExplorer 6.0 mit der angebotenen Technik nicht mit. Da er den nachstehenden Befehl (position: fixed) nicht umsetzt, lassen wir alle fixierten Elemente für ihn mitscrollen.
#karo { position: fixed; left:185px; top:0px; z-index:1; }
Sollte sich jemand für diese Homepagevorlage interessieren, sind wir aber gern bereit dem InternetExplorer einem umfassenden Workaround zu unterziehen, damit er mit dieser Technik hier klar kommt.
Oder anders ausgedrückt:
Wenn es dem Wunsch des Kunden entspricht, bringen wir selbst noch diesem Möchtegern-Browser auch das Fliegen bei.
