Tutorial für eine elf Jährige

[Thomas Luethi]

Hallo nochmal,

Grundsätzlich bin ich mit Euch einverstanden, dass ein Anfänger heute sauberes, zeitgemässes HTML und CSS lernen sollte und nicht irgendwelche veralteten, "schmutzigen" Techniken.

Ebenso finde ich etwa Layout-Tabellen für Anfänger viel intuitiver und stabiler bzw. erfolgsversprechender als CSS-Layouts, bei denen man ständig irgendwelche Browser-Bugs berücksichtigen muss u.s.w.

Auch das finde ich nicht.

Ich meine so etwas ganz banales wie:
Linke Spalte Navigation, 200 px breit, blauer Hintergrund.
Rechte Spalte Inhalt, 600 px breit, hellgrauer Hintergrund.
Das ganze soll am Bildschirm zentriert sein und einen 3px roten Rahmen drum haben. Restlicher Hintergrund (Umgebung) weiss.
Mal kann die Navigation höher sein, mal der Inhalt, und bei beiden Spalten soll die Hintergrundfarbe immer bis ganz unten gehen.

Mit einer Layout-Tabelle und ein paar Zeilen CSS ist das ein Klacks.
Durch die Tabelle ist die Positionierung (Navigation links, Inhalt rechts) stabil und browserübergreifend gewährleistet, selbst in Netscape 4 oder in Browsern ohne CSS.
(Jaja, es ist mir bewusst, dass diese fixe Anordnung auch Nachteile haben kann, z.B. auf kleinen Bildschirmen u.s.w. - Weitere Argumente pro und kontra Tabellen im Artikel von molily.)

Wenn man ein solch simples Layout mit CSS umsetzen will, muss man extrem viele Dinge *wissen*, die überhaupt nicht intuitiv verständlich oder naheliegend sind.

Wenn man z.B. die Navigation mit float positioniert, und der Inhalt ist weniger hoch ist als die Navigation, dann umschliesst der rote Rahmen nur den Inhalt, und die Navigation ragt unten über den roten Rahmen hinaus, wie in diesem Beispiel. Ich höre schon die Gurus hier sagen: "Ja, das ist doch klar, denn float nimmt ein Element aus dem normalen Darstellungs-Fluss" oder so ähnlich. Aber für einen Anfänger ist das unverständlich und eben nicht intuitiv, und er muss zuerst mal das Glück haben, auf eine der Lösungen zu stossen, wie sie z.B. im Abschnitt Einschliessen von float-Boxen im hervorragenden Artikel Grundlagen für Spaltenlayout mit CSS von molily oder im Abschnitt Floats umschliessen mit Clearance im Wiki beschrieben sind.

Und wenn die Navigation weniger hoch ist als der Inhalt, aber die Hintergrundfarbe der Navigation trotzdem bis unten durchgehen soll, braucht es "Krücken" wie Faux Columns, also zusätzlich noch ein Hintergrundbild, (siehe z.B. <http://de.selfhtml.org/css/layouts/anzeige/hintergrund.htm@title=letztes Beispiel> zum SelfHTML-Artikel http://de.selfhtml.org/css/layouts/mehrspaltige.htm#kopf_fuss@title=CSS-Layouts, oder auch wieder Tricks mit clear-(Pseudo-)Elementen, wie im genannten Artikel von molily beschrieben.

_Das_ meine ich damit, dass eine Layout-Tabelle für Kinder und Anfänger viel, viel intuitiver begreifbar und auch praktischer, browser-übergreifend stabiler u.s.w. ist als ein CSS-Layout.

(Jaja, theoretisch gibt es schon in CSS 2.1 Dinge wie display:table, display:table-column u.s.w., aber deren praktische Anwendung ist AFAIK zur Zeit noch nicht empfehlenswert, da viele verbreitete Browser, insbesondere ältere MS IE, sie noch nicht oder nur mangelhaft unterstützen. Und in Zukunft, bei CSS 3, gibt es Dinge wie das Multi-Column Layout Module oder das Template Layout Module. Aber das ist Zukunftsmusik.)

Freundliche Grüsse
Thomas