CSS Layouts

Fängt man an, sich in das Layout von Webseiten mit Hilfe von CSS einzuarbeiten, muß man zunächst das Positionieren von Bereichen verstehen. Hier sind einige Beispiele mit absoluten und relativen Bereichen und den Möglichkeiten der CSS Boxen. Mit der CSS Eigenschaften float ordnen sich die diversen Elemente dynamisch auf dem zur Verfügung stehenden Platz des Bildschirms an.

CSS - Float & Box

Jedes Element kann "floaten": Absätze, <div>s, Listen, Tabellen, Grafiken und selbst Inline-Elemente wie <span> oder <strong>.

Jedes Element, das nicht die Float-Eigenschaft none besitzt, wir dadurch automatisch zu einem Block-Element. Das bedeutet, dass man ihm sowohl eine Breite (width) als auch eine Höhe (height) zuweisen kann.

Gemäß Definition müssen Floats eine zugewiesene Breite haben. Diese wegzulassen, ist ein häufig gemachter Fehler (Apropos Fehler: diese Liste mit kuriosen Windows-Fehlermeldungen ist durchaus lesenswert).
Während das manche Browser verzeihen, stolpern all diejenigen Browser darüber, die die Standards exakter implementiert haben. Ohne die Breitenangabe ist das gefloatete Element entweder so breit wie sein Inhalt oder aber es erbt die Breite von seinem Elternelement.

In den einzelnen Beispielen sind die wesentlichen CSS-Definitionen angegeben. Die vollständigen Styles stehen im Quelltext selber.

Der HTML & CSS Code ist mit dem Tag <pre> ausgezeichnet. Dieses Tag hat ein sehr spezielles Verhalten was die Zeilenbreite angeht. Daher wurde immer noch ein bisschen „Lorem Ipsum“ hinzugefügt, das im <p> Tag steht, und sich eher „normal“ verhält.

Tutorial

Die Verwendung der Größe px (Pixel) statt em hat historische Gründe. Mea Culpa.

Zentrierter fester Block
Man kann Bildschirmbereiche nur mit Tabellen oder dem ausrangierten <center>-Tag zentrieren? Nein, es geht auch mit CSS. [Beispiel Ansehen ]
 

Zentrierter flexibler Block
Der selbe Block wie oben, nur passt er sich in seiner Breite an die Bildschirmgröße an. Die Höhe richtet sich nach dem Inhalt. [Beispiel Ansehen ]
 

Menü absolut positioniert, Inhalt flexibel
SMenü mit fester Breite, Inhaltsbereich mit entsprechendem Rand links passt sich der Bildschirmgröße an. [Beispiel Ansehen ]
 

Menü links, Inhalt rechts, beide floatend
Eine Alternative zu obigen Design: keine absolute Positionierung, beide Blöcke floaten nebeneinander. Der Inhaltsbereich reagiert flexibel. [Beispiel Ansehen ]
 

Menü rechts, Inhalt links, beide floatend
Der HTML-Code ist der gleiche wie im letzten Beispiel, im StyleSheet sind nur vier kleine Änderungen nötig. [Beispiel Ansehen ]
 

Das klassische 3-Spalten-Design
Ein Navigationsmenü ist nicht genug? Kein Problem, machen wir zwei. Die Breite des mittleren Bereichs passt sich dem Bildschirm an. [Beispiel Ansehen ]
 

Drei Spalten mit Kopf-Leiste
So sehen viele Webseiten aus: links das Hauptmenü, in der Mitte der Inhalt, rechts ein Zweitmenü und eine Logo-Leiste obendrüber. [Beispiel Ansehen ]
 

Drei Spalten floatend und alles flexibel
Noch einmal das 3-Spalten-Design, nur passen sich hier alle Bereiche der Bildschirmgröße an. Das geht natürlich auch mit Logo darüber. [Beispiel Ansehen ]

Drei Spalten, Kopf- und Fußleiste, Inhaltspalte flexibel
Das finale Grundgerüst eines sehr flexiblen Designs für eine Standard-Webseite. [Beispiel Ansehen ]


Eine Homepage mit floatenen Boxen zu gestalten (im Zusammenspiel mit der em Angabe früher auch Liquid Design genannt) ist mittlerweile nicht mehr zeitgemäß. CSS3 bietet eine Erweiterung, die insbesondere der Aufgabe gewachsen ist, Webseiten sowohl auf 30 Zoll Computer Bildschirmen als auch auf den kleinen 6 Zoll Screens der mobilen Geräte übersichtlich und lesbar darzustellen: Stichwörter sind „media“ Queries und „order“ , und das ganze nennt sich jetzt Responsive Design.

Auf dieser Seite wird es demnächst weitere Informationen zu dem Thema Layout mit CSS geben. Bis dahin hilft die Suche in den unendlichen Weiten des WWW, und diese speziellen Tipps & Tricks zur Google Suche sind da sicherlich hilfreich.

 

Analog zum Design von Webseiten geht es auch bei der Bildbearbeitung darum, die Farbe, Form und Inhalte der verschiedenen Elemente / Motive möglichst ästhetisch zu kombinieren. Auf einem anderen Projekt von mir gibt es eine Auswahl von Fotokursen (inklusive Seminaren zur Bildbearbeitung). Die Liste umfasst etwa 50 Anbieter und ist nach Bundesländern & Städten sortiert.