Jetzt wird’s spannend Nachdem die Anfänge mit der Einführung in HTML sowie der Erklärung der Grundlagen von CSS gemacht wurden, gehen wir jetzt einen Schritt weiter. Wir verknüpfen beide Techniken (also HTML und CSS) um ein schönes Website- Design mit CSS und ohne Tabellen zu erzeugen.
Dabei lernen wir noch einige CSS-Tricks
Los geht’s!
1. Schritt: CSS Box- Modell verstehen
Grundlage für das Website- Design ist das sog. CSS Box- Modell. Dabei handelt es sich um einen rechteckigen Bereich innerhalb der Website, der HTML- Code wie z. B. Text oder Bilder enthalten kann.
Eine CSS- Box ist dabei durch 4 Eigenschaften definiert:
- Breite und Höhe des Inhaltsbereichs (width / height)
- Innenabstand (padding)
- Rahmen (border)
- Außenabstand (margin)
Abgesehen von Breite und Höhe des Inhaltsbereiches können die anderen Eigenschaften durch 4 Werte beschrieben werden. Einen Wert für jede Kante. Auf dieser HTML- Seite habe ich das CSS Box Modell verständlich erklärt, hoffe ich zumindest
2. Schritt: Richtiges Layout wählen
Anhand dieses Wissens können wir nun beginnen uns eine Homepage zu basteln. Zunächst sollte man sich überlegen, wie das zukünfte Layout der Website aussehen soll.
- Wo kommt die Navigation hin (links, rechts, oben)?
- Möchte man ein zentriertes Layout mit fester Breite oder geht das Layout über die ganze Seite?
- Gibt es einen Header?
- usw…
Ich möchte mich hier zur Illustration für ein zentriertes Layout entscheiden mit fester Breite (990px), einem linken Navigationsblock und einem Header im oberen Bereich.
3. Schritt: Layout in HTML umsetzen
Kommen wir jetzt zum spannenden Teil – der Umsetzung des gewählten Layouts in HTML. Statt einer Tabelle nutzen wir für die Positionierung der 3 Bereiche aber DIV- Blöcke und CSS.
Hier kannst du das fertige CSS- Layout anschauen.
Da viele CSS- Befehle, dank der Einführung in CSS schon bekannt sein sollten, werde ich hier nur die wichtigsten Codestellen erklären.
Die absolute Größe von 990px wird in Zeile 8 festgelegt. Die Zentrierung bekommt man durch den Befehl in Zeile 9.
Wichtig sind außerdem die Angaben „float:left“ (Zeile 22) und „float: right“ (Zeile 52), die den Navigationsbereich links und den Inhaltsbereich rechts anorden. Außerdem muss eine Breite (Zeile 21 und 50) angegeben werden.
Dem aufmerksamen Leser wird hier (hoffentlich) das Box- Modell ins Auge springen. Denn addiert man alle Breiten und Abstände (in dem Fall nur der Innenabstand=padding) der Navi- und Inhalts- Box zusammen, so sollte man auf 990px kommen.
Die Rechnung geht so:
Breite Navi-Box |
+
|
Innenabstand
Navi-Box(je 10px links und rechts) |
+
|
Breite Inhalts-Box |
+
|
Innenabstand
Navi-Box(je 10px links und rechts) |
=
|
990px
|
180px
|
20px
|
770px
|
20px
|
Der Rest ist nur Beiwerk, um das Design „schöner“ zu gestalten. Wobei das natürlich Geschmackssache ist.
Ressourcen für’s Erstellen von CSS Layouts (ohne Tabellen)
Verschiedene CSS Layouts mit Erklärung.
Gutes Tutorial, um die Positionierung von Boxen mit CSS zu verstehen.
Nicht unbedingt für CSS, aber nützlich, um Fülltexte (lorem lipsum) für eine Website zu erstellen.