php-homepage.com

CSS Tutorial - Fluid Layout

fluid layout mit Divs

Passend zum Artikel Layout mit Divs oder Tabellen widmet sich dieser Teil des CSS-Tutorials dem Layout, sprich dem Grunddesign einer Homepage.

Ein flexibles "fluid" Layout passt sich dem Bildschirm des Betrachters an, deshalb verwenden wir keine bzw. nur die nötigsten Angaben in Pixeln. Erklärung zum Thema finden Sie hier:"fluid layout"
Größenangaben werden relativ angegeben, zB. in %, em, anstatt fixer Größen, wie man es (noch) sehr häufig findet. Der Vorteil resultiert in einem flexiblen layout der homepage, das heißt, egal wie groß das Anzeigegerät des Besuchers ist, die Seite füllt den ganzen Bildschirm aus. Nun aber zur Praxis:

Erstellen eines mehrspaltigen,fluid layout:

Ob man seine Seite ein-, zwei, oder mehrspaltig ausführt, hängt vom Thema, der Zielgruppe und vom jeweiligen Geschmack ab. Dieses Tutorial geht auf das dreispaltige Layout ein, wie ich es hier auf php-homepage.com einsetze.
Zuerst beschäftigen wir uns mit dem sichtbaren Teil im Browserfenster, dem sogenannten viewport. Verwenden wir das body-tag, spricht dieses den gesamten Inhalt im viewport an. Aus technischen Gründen, die wir bei gegebener Zeit erklären, platzieren wir in den viewport ein Div namens "wrapper" mit maximaler Breite, um den viewport komplett auszufüllen.
Im wrapper platzieren wir dann einen Kopfbereich "header", der später ein Logo, Topmenü, Werbebanner oder ähnliches aufnehmen kann.
unter dem header kommen dann die 3 eigentlichen Container/Module, die sich den horizontalen Platz aufteilen und vertikal automatisch an den Inhalt angepasst werden. Zur Veranschaulichung des gewünschten Ergebnisses folgende Grafik:
Grafik-dreispaltiges-layout

zuerst das "wrapper"-div:

CSS HTML
#wrapper { width: auto;
max-width:1660px;
min-width:780px;
margin: 0 auto;
padding: 0;}
<div id="wrapper">
width:auto; würde schon genügen, aber bei sehr geringen Auflösungen verkleinern sich dann die Module, dass meist zuwenig Platz für längere Wörter bleibt, bzw. diese unschön "zerstückelt" werden. Wir erzwingen deshalb mit min-width eine Minimalbreite des Fensters, was bei kleineren Bildschirmauflösungen (hier 800 Pixel minus 20 Pixel am Rand des Browserfensters) einen horizontalen Scrollbalken erzwingt.
Im umgekehrten Extremfall, sprich Monitore mit mehr als 1680 Bildpunkten (Pixeln) Breite, limitieren wir mit max-width die Breite auf 1660 Pixel, um den Inhalt nicht zu sehr in die Breite gehen zu lassen. margin:0 auto; bewirkt, dass der gesamte Inalt unserer Seite im Browserfenster zentriert wird. Mit padding:0; setzen wir den Innenabstand des gesamten Dokuments auf Null, was Fehlinterpretationen verschiedener Browser von vornherein vermeidet.
Hier könnten wir noch Angaben zu Schriftart und andere Attribute, die auf folgende Elemente vererbt werden sollen, machen.

In diesem "wrapper"-div platzieren wir nun die Divs, die die Module header, content, footer usw. aufnehmen:

CSS HTML
#header {background-color: #f00; width:100%;} <div id="header"></div>
#sidebar1{background-color: #0f0; float:left; width:25%;} <div id="sidebar1"></div>
#content{background-color:#000; float:left;width:50%; <div id="content"></div>
#sidebar2{background-color:#3F3F66; float:left; width:25%;} <div id="sidebar2"></div>
#clear{clear:both;} <div id="clear"></div>
#footer{background-color:#00f; width:100%;} <div id="footer"></div>>
</div> schließt das "wrapper"-div

Somit hätten wir eine mögliche Variante für ein layout in flexiblem Design (fluid layout) mit divs. Das obige Beispiel verwendet nur Attribute, die zur fehlerfreien Positionierung notwendig sind: width, also Breitenangaben der Module und float zur Positionierung, was aber auch durch andere Positionierungsmethoden möglich wäre (position: absolute, relative,...).
background-color dient nur zum besseren Verständnis des tutorials. Die Höhe der Container passt sich dynamisch den Inhalten an, da wir aber mit float arbeiten, müssen wir das Verhalten float:left; mit "clear:both; wieder aufheben, damit der "footer" bei unterschiedlicher Höhe unserer Module nicht irgendwo "reinrutsch", da der Browser versucht den Platz bestmöglich auszufüllen! Wir haben dazu gleich ein div mit der id "clear" erstellt, da wir dieses Attribut (clear:both;) wahrscheinlich später noch mehrmals verwenden werden.
Zu beachten ist natürlich noch das sogenannte "Box Modell", wenn man mit border, padding, margin usw. arbeiten will, da sich sonst die Größe der Module ändern kann und sich die Container dann verschieben. Sehen wir uns nun das Ergebnis an, wie es vom Browser dargestellt wird: Die CSS-Angaben umschließe ich zur schnellen Veranschaulichung einfach mit einem <style>-tag. In der Praxis lagern wir diese natürlich in eine externe .css-Datei aus und binden diese dann in unser html-Dokument ein:-) css-tutorial-fluid-layout
update 02/2015

Mit HTML5,CSS3 und dem Boom mobiler Geräte (Tablets, Smartphones,..) erlebt das Thema Fluid Design eine Frischzellenkur unter dem Namen "Responsive Design".