Kompatiblität und Download
Die rechte Spalte erhält eine variable Breite von 15em. Damit wird sie in Abhängigkeit der Textgröße skaliert und ungewollte Zeilenumbrücke beim Vergrößern werden vermieden.
Looks smart under ...
- IE 6.0/Win
- IE 5.5/Win
- IE 5.0/Win
- Opera 7.11+/Win
- Opera 8.0/Win
- Mozilla 1.7.1+/Win
- Firefox 1.0+/Win
- Firefox 1.0+/Mac
- Safari 1.3/Mac
- Camino 0.6/Mac
- Firefox 1.0+/Linux
- Konqueror 3.3.2/Linux
Das Hauptmenu
mit
Textfluss
Das Hauptmenu entstammt dem kreativen Geist hinter A-List-Apart und hört auf den Namen Sliding Door. Mittlerweile existiert auch eine zweite, verbesserte Version Sliding Door II, welche die Kompatibilität weiter verbessert und einen Hover-Effekt für die einzelnen Reiter einführt.
Das Menu ist hier nur der Vollständigkeit halber enthalten. Allerdings finde ich persönlich eine Reiter-Navigation sehr übersichtlich.
Variation 2 - ein weiteres Zweispalten-Layout
Auch hier wurde mit wenigen Handgriffen am Basis-Stylesheet das entsprechende Zweispalten-Layout erzeugt.
Die erforderlichen Änderungen für diese Variante stehen in der Datei basemod_2column_leftfloat.css im CSS-Verzeichnis:
#col1 {display:none;}
#col1_content {display:none;}
#col2 {margin-left:0px; border-left:0;}
#main {background-image: none;}
Die rechte Spalte #col3 und deren Inhalt #col3_content werden abgeschaltet. Mit dem dritten Befehl wird der rechte Rand der mittleren Spalte #col2 angepasst. Der Änderung an #main betrifft das Abschalten der Hintergrundgrafik, welche im Dreispalten-Layout hinter der linken Spalte liegt.
Welche Vorteile ergeben sich aus dem Einsatz von Floats?
Zunächst ist da sicherlich eine Hemmschwelle zu überwinden, da die Dinger ganz sicher nicht jedermanns Sache sind und die Browser es einem nicht gerade einfach machen. Betrachten wir es aber mal etwas genauer:
Verbesserte Barierefreiheit
Pixelgenaue Layout sind schön. Aber oftmals nur so lange, wie man sie in der ihr vorbestimmten Größe betrachtet. Vergrößerungen zum Zwecke der Lesbarkeit sind oftmals gar nicht möglich, da alle Größenangaben in Pixeln abgezählt und für die Ewigkeit ins CSS gemeißelt sind. Von Sprüchen wie: "Optimiert für 800x600 und Internet Expl..." will ich gar nicht reden.
Einfachere Portierbarkeit auf andere Medien (Druck/ Handheld)
Mit dem Drucken von Webseiten beginnt meist das Dilemma. Alle Brower haben eines gemeinsam. Sie haben arge Mühen, Layouts mit fixen Breiten vernünfig auf ein A4-Blatt zu bringen. Variable Breiten bewirken hier schon mal wahre Wunder.
Sind fixe Layouts jetzt doof?
Nein, sind sie nicht. Sie sind sogar derzeit IN. Man schaue sich nur mal in der Blogspäre um. Wer hipp sein will, der ist auf fix. Und daran ist auch nichts auszusetzen denn Funktion geht nicht in jedem Fall vor der Optik. Und daher sollten auch fixe Layouts mit YAML kein Problem darstellen.
Zu diesem Zweck brauchts ebenfalls nur wenige Handgriffe. Einfach
...
#page { width: 760px; }
...
in die Datei basemod.css geschreiben und schon haben wir wieder die alt ehrwürdige 800x600 Optimierung. Alles klar?