° PIXELCHEN

Ich hab mir gedacht, vielleicht interessiert ja den ein oder anderen, wie ich meine Seite(n) zu baue. Ich bin ein Freund von kleinen, statischen Seiten. Diese Art von Layout erreicht man am besten mit verschieden Divs.

Ich habe mein aktuelles Layout mal sehr vereinfacht nachgebaut, so dass man den Aufbau

Klick: Beispiel-Layout

Im Folgenden werden unterschiedlichen farblich gekennzeichneten Divs erläutert. Ich arbeite gerne mit Divs so, als würde ich ein Bild bearbeiten, sprich ich arbeite mit Ebenen…

Ebene 1 (Hauptrahmen) (grün):
Dieses Div dient nur dazu, damit ich mein alles andere zentriert (vertikal und horizental) bekomme. Es hat daher die Attribute:
width: 96% und height: 96%
Warum nicht 100%? Ganz einfach, das erzeugt in einigen Browsern Scollbalken, die ich nicht will…

Ebene 2 (Begrenzung der Seite) (rot):
Das zweite Div legt die Größe und Breite der Seite fest und läd sie mittig. Dabei ist wichtig, dass die es die Attribute:
position: fixed, top: 50% und left: 50%
erhält. So wird allerding nur die linke, obere Ecke des Divs zentriert. Doch mit margin (Abstand des Divs nach außen) kann man etwas tricksen. Man rückt das Div einfach um die Hälfe sein Höhe und Breite jeweils nach oben und links.
height: 400px
sprich
margin-top: -200px
und
width: 600px
sprich
margin-left: -300px

Ebene 3 (Textfeld) (blau):
Bei dem Textfeld legen mir mit
overflow: auto
fest, dass automatisch ein Scrollbalken kommt, wenn die Textmenge die Größe des Divs überschreitet. Ansonsten müssen man nur die Größe an Ebene anpassen und die Breite so einstellen, dass rechts noch Platz für ein Menu (Ebene 4) ist. Nun kommt Float (Fließrichtung) ins Spiel. Wir wollen ja, dass das Menu direkt an das Textfeld geladen wird.
float: left
Wichtig ist, dass diese Ebene (genau wie die nächste) innerhalb von Ebene 1 aufgerufen wird

Ebene 4 (Menu) (gelb):
Hier stellen wir einfach die selbe Größe ein wie vom Textfeld und passen auf, dass die Größe nicht größer ist, als von Ebene 2.

Ebene 4 (Banner) (schwarz):
Der Banner ist im Grunde nichts anderes als Ebene 1. Mit
position: fixed
sorgt man dafür, dass es nicht verschiebbar ist. Dann wird die Ebene wieder mit
top: 50% und left: 50%
zentriert und mit margin an die richtige Stelle positioniert…

Ich hoffe diese kleine Aufstellung erklärt ein wenig, wie man schnell eine statische Seite bauen kann…

Technorati Tags: DIV, CSS, Layout, Grundgerüst