Die Wege zu einem guten Seitenlayout ...
Meine Wunschvorstellung
Dabei wollte ich ein dreispaltiges Layout. Navigation und zusätzliche Hinweise für den Besucher sollten in Spalten stehen mit fester breite und die eigentliche Spalte mit den Beiträgen sollte sich in der Breite an dem orientieren, die durch den Browser vorgegeben wird.
Ein solches Layout war und ist in einer Tabelle in wenigen Minuten erstellt. Problematisch sind aber inzwischen kleinere Lesegeräte und hier ist das div-Layout sinnvoller, da hier die seitlichen Spalten untereinander geschachtet werden (ganz automatisch) und so die Lesbarkeit auch auf diesen Geräten sicher gestellt wird.
Mein Wunsch war ein valides HTML oder XHTML und ein weitgehender Verzicht auf Browserspezifika.
Und dieser Wunsch ist nicht einfach zu realisieren, wie ich sehen konnte.
Die Standardadresse
Die Standardadresse unter den CSS-Seiten ist wohl YAML – Yet Another Multicolumn Layout. Hier lautet es:
“Yet Another Multicolumn Layout“ (kurz: YAML) ist ein (X)HTML/CSS Framework zur Erstellung moderner, flexibler Layouts auf Grundlage von float-Umgebungen. Dabei stehen ein Höchstmaß an Flexibilität für den Webdesigner und Zugänglichkeit für die Nutzer im Vordergrund.
Der Schwerpunkt von YAML ist aber das Fertigtemplate. Und hier geht es weniger um die Technik als um das Aussehen. Man könnte es anders formulieren. Es wird das Layout verkauft. Man kann sich also ansehen, ob das Blau das richtige ist und ob das Rot dazu passt. Man kann aber nicht den Template-Code einsehen und feststellen, ob er funktionieren wird.
Dessen ungeachtet kann man – wenn wirklich was dabei ist, was einem gefällt, diese Dinge dann auch in ein funktionierendes System übernehmen.
Der Klassiker – die Seite Self-HTML
Unter Dreisspaltiges Layout findet man hier kurz und Knapp ein Layout, dass im Body integriert die 1. Spalte anzeigt und dann die beiden weiteren mit separaten <div>s.
<body>
<! ---- Spalte 1 ---!>
<div id="Info">
<! ---- Spalte 3 ---!>
</div>
<div id="Inhalt">
<! ---- Spalte 2 ---!>
</div>
</body>
Natürlich kann man hier noch ein <h1 id=“header”>-Element für eine Kopfzeile oder eine <p id=“footer”> für die Fußzeile hinzufügen. Problematisch wird es bei bestimmten Browsern und bei der Positionierung weiterer <div>-Elemente in der Spalte 1.
Nach meiner Auffassung ist die Self-HTML-Technik bei Dynamic Drive konsequent ausgebaut worden. Die Layout Gala dagegen kennt schon den den <div> um die Spalte 1, der dann auch von einem Wrapper-<div> umgeben sein muss.
Also: Entweder bekommt die Spalte 1 keinen <div> oder (mit Wrapper) zwei.
Der Aufbau eines komplexen <div>-Systems
Wer sich für den theoretischen Aufbau des Framesets interessiert, der wird fündig mit dem Beitrag In Search of the Holy Grail von Matthew Levine. In diesem Beitrag wird sukzessive gegeigt, wie die <div>-s gesetzt werden und welche CSS-Atribute wie zu setzen sind. Zwischenergebnisse zeigen das Erreichte an und er liefert letztendlich ein Layout mit folgenden Eigenschaften:
- ein fluides Layout im Zentralbereich und zwei feste Spalten rechts und links
- der zentrale <div>-Bereich wird als erstes genannt, die anderen folgen
- jede Spalte kann die höchste werden.
- benötig nur ein extra-<div> (der Wrapper)
- benötigt nur ein einfaches CSS mit wenigen Browserhacks
Bezüglich des Punktes 2 – der zentrale <div>-Bereich wird als erstes genannt, so muss man wissen, dass hier zwei Argumente für diese Regelung sprechen.
Zum einen gilt eine suchmaschinentechnische Regelung, das das wichtige einer Seite immer zuerst kommen sollte. Ob diese stimmt oder nicht, dazu kann ich derzeit nichts sagen. Aber diese Theorie ist relativ stark verbreitet. Nach dieser Theorie habe ich die Spalten 1-2-3 und würde mein Content in Spalte 1 stehen, dann hätte ich bessere Suchmaschinenpositionen als würde ich diesen in Spalte 3 schreiben. Man will also nicht nur drei Spalten, man will auch festlegen, was wie wichtig ist.
Neben der Suchmaschine gibt es aber auch Usability-Forderungen und hier braucht man sich nur einen Nutzer vorstellen mit einem Palm oder ähnlichen Gerät (einem Handy), der die Seite besucht. Für ihn ist es auch wichtig, dass der Content-<div> zuerst erscheint und dann erst die Navigation resp. die Zusatzinformationen. Spätestens hier zeigt sich das <div>-Layout einem Tabellenlayout überlegen. Denn ein Tabellenlayout verfügt nicht über eine solche Möglichkeit der Contensteuerung.
Gerade hier setzt auch Rachel Andrew an mit dem Beitrag Everything You Know About CSS Is Wrong . Der Tenor ist der gleiche. Tabellen führen gerade bei Kleingeräten zur Unbrauchbarkeit der Seitendarstellung und <div>-Strukturen sind einfach und leicht auf Kleingeräte umzubrechen.
Eines der bisher besten Wege ist dann das Template, dass ich auch verwendet habe. Matthew James Taylor hat mit seinem Vorschlag The Holy Grail Liquid-Layout, No Quirks Mode die wenigen CSS-Browserhacks im Vorschalg von Matthew Levine auch entfernt und zwar auf eine recht interessante Art und Weise. Er liefert die Seite im XHTML aus und zwar auch an den Internetexplorer. Das demonstriert er recht eindrücklich, in dem er die erste Zeile der XHTML-Datei (<?xml version=“1.0” encoding=“utf-8”?>) auch an denselben ausliefert.
In dem Header der Seite Holy Grail 3 column liquid-layout: No Quirks Mode, No IE Conditional Comments findet sich zwar die Zeile <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /”> und damit die Angabe, dass diese auch mit dem Mime-Typen “application/xhtml+xml” ausgeliefert werden kann. Der Websniffer sagt mir aber, dass diese Seite noch in “text/html” ausgeliefert wird.
Die Umschaltung in den Quirks-Modus wird verhindert durch das XHTML-Attribut xmlns:v=“urn:schemas-microsoft-com:vml”, dass nur der IE entsprechend versteht und bei dem dieser dann eben korrekt arbeitet.
_
— Wolfgang Uhr · Sonntag November 30, 2008
Kommentare
Neueste Artikel
Die Deutschen, die Streitkultur und die Presse
Zur Effizienz von flattr August-2008
iPhone bastelt weiter an der Weltwirtschaftskrise
Realitätsfremde Bewerbungsstrategien
Sind UMTS-Richtfunkstrecken ein potenzieller Gesetzesverstoß?
Facharbeitermangellüge - Die nächste Runde
Brigitte Gabriel - zur Definition des terroristischen Moslems
Ein herzliches Willkommen
Mein Name ist Wolfgang Uhr, ich bin Physiker und entwickle Software im Bereich der Erfassung von Messdaten und deren Verarbeitung. Dies ist meine persönliche Hobbyseite.
Kategorie-Tags
Allgemeines · Friedhofsverwaltung · Ideen-Gedanken · Spielerei · Anleitungen · Bloghandel · Buchbeschreibungen · Christentum · Energiesparlampen · Erfahrungsberichte · Finanzen · Funk-uhren · Geld verdienen · Gesundheit · Handy · Handyortung · Heimwerken · Internet · E-Mail-Spam · Sicherheit-Web · Suchmaschinen · Web-Spam · Webdesign · Physik · Elektrosmog · Elektrotechnik · Stevia-Pflanze · Tageslichtlampen · Umwelt · Veranstaltungsberichte
Andere Seiten
— Mario Peischl · Nov 19, 11:25 · #
Ich kann überhaupt nicht verstehen, wie Sie zu so einer Meinung über YAML kommen. Es ist z.Z. das flexibelste Framework am Markt. Es wird kein Layout verkauft, sondern die gesunde Basis darunter. Wieso kann man den Code (es gibt keine “Templates” in YAML) nicht einsehen? Man sollte sich aber schon die Dokumentation anschauen und etwas Zeit zum einarbeiten reservieren.
Ich möchte nicht mehr ohne arbeiten. Erspart mir doch YAML z.B. weitestgehend die Suche nach Fehlern in den schlechtesten Browsern dieses Planeten (IE).