Css – boxenorientiertes Denken
Man erleichtert sich die Arbeit mit CSS wenn man von Anfang an boxenorientiert denkt. Das heißt
man schaut sich die Seitenstruktur an (die man vorher grafisch angelegt hat) und überlegt welche
Elemente man als Boxen zusammenfassen kann. Dabei startet man von grob und wird immer feiner.
Als Beispiel: Unsere Website soll horizontal zentriert werden, Header, Menü und Contentbereich
haben und der Contentbereich soll selbst auch nochmal formatiert werden. Dann gestalten wir als
erstes den Rahmen, der alle Elemente in sich trägt, diesen zentrieren wir, nun setzen wir den
Header usw.
Wichtig bei der ganzen Sache ist die Auslagerung des Css-Codes in einem (oder wenn gewünscht in mehreren)
Stylesheet. Wenn wir irgendwas am Layout ändern wollen muss lediglich diese Seite aufgerufen werden.
Diese Datei sollte strukturiert aufgebaut werden, denn mit der Zeit nimmt die Fülle an Informationen zu
und dann noch Informationen innerhalb des Stylesheets schnell zu finden gestalten sich als schwierig.
Es gibt im Internet einige Quellen wie man diese Dateien am besten aufbaut, für mich hat es sich bewährt,
dass ich als erstes die allgemeinen Tags schreibe, wie body und img usw., danach die Boxen-Formatierungen
und zum Schluss die minimalen Formatierungen für spezielle Überschriften usw.
Nun birgt das Boxenmodell aber einiges an Fummelarbeit und vor allem ungeübte Css-ler werden sich anfangs
fragen warum etwas so und nicht anders dargestellt wird, warum Browser einfach nicht das tun was man will.
Einer der wichtigsten Punkte ist zu wissen, dass das “padding” und das “border”-Element einige Tücken bieten, dadurch
vergrößert sich nämlich die Box und das kann dafür sorgen das das ganze Layout in sich zusammenbricht.
#rahmen {width: 900px;}
#header {height: 100px; width: 898px; border: 1px solid black;}
#menue {float: left; height: 500px; width: 198px; border: 1px solid black;}
#content {float: right; height: 500px; width: 698px; border: 1px solid black; padding: 1px;}
<body>
<div id="rahmen"></div>
<div id="header"></div>
<div id="menue"></div>
<div id="content"></div>
</div>
</body>
Dieses Beispiel verdeutlicht, dass die Breite einer Box nicht nur allein durch “width” gegeben ist, sie wird noch
durch andere Elemente erweitert, die dadurch die Rahmenbreite sprengen können.
Verwandte Artikel
- Css – boxenorientiertes Denken
- Eigenes WordPress Template in wenigen Schritten – Schritt 5
- Eigene Rahmen mit kleinen transparenten Gifs gestalten
- Eigenes WordPress Template in wenigen Schritten – Schritt 6
- Schneller mit Css arbeiten – ein kleiner Trick
2 Kommentare
Tut mir leid, die Kommentarfunktion für diesen Beitrag ist geschlossen.
Hallo,
danke für die kurze Einführung in das Boxenmodell. Ich überarbeite gerade meine Seite und dein Artikel war mir ganz nützlich. Ich glaube aber, du hast einen kleinen Fehler. Im HTML-Beispiel wird vorm schließenden body-Tag ein div-Tag geschlossen. Der öffnende div-Tag fehlt.
Gruß
Micha
Ich nochmal ;)
In der CSS-Angabe ist auch noch ein kleiner Fehler. Die Breite sollte bestimmt 696px anstatt 698px sein. Wie du im Text beschrieben hast, wird eine Box ja sowohl durch den Border als auch durch das Padding je 2 Pixel breiter. Die Gesamtbreite soll 700px sein.
Wenn man den Text dieser Seite gelesen hat, ist aber auf jeden Fall das Prinzip klar. Dann kann man sich alles selbst zusammenreimen.
Gruß
Micha