Css – boxenorientiertes Denken
Man erleichtert sich die Arbeit mit CSS wenn man von Anfang an boxen-orientiert 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
- Schneller mit Css arbeiten – ein kleiner Trick
- Struktur einer Css Datei
- Eigene Rahmen mit kleinen transparenten Gifs gestalten
Sei der erste, der einen Kommentar abgibt
Tut mir leid, die Kommentarfunktion für diesen Beitrag ist geschlossen.
