Titelbild
Username: Passwort:   Bei jedem Besuch automatisch einloggen
  registrieren  Passwort vergessen?

CSS - Tutorial


Inhaltsverzeichnis

  1. Allgemeiner Hinweis
  2. Was sind CSS?
  3. Verwendung und Aufbau von CSS
  1. Definieren von CSS im Kopf
  2. Definieren von CSS innerhalb eines Tags
  3. Definieren von CSS innerhalb einer CSS-Datei
  1. id und class
  2. Formatierungen mit CSS
  1. Schriftarten
  2. Text
  3. Hintergrund
  4. Links
  1. Das CSS Box-Modell ausprobieren!
  1. Rahmen - border
  1. Layouts mit CSS und <div>
  1. "be water my friend" - float
  2. oben Navi - unten Inhalt
  3. zweispaltiges Layout
  4. dreispatiges Layout
  5. dreispaltiges Layout mit Kopf und Fuß


1. Allgemeiner Hinweis

Solltet ihr Fragen zu einem der folgenden Abschnitte haben, scheut euch nicht diese zu stellen. Meine email-Adresse findet ihr unter .kontakt. Ich werde versuchen sie dann so gut ich kann zu beantworten.

zurück zum Inhalt

2. Was sind CSS?

Cascading Style Sheets (CSS) dienen dazu, den Inhalt einer HTML-Datei zu formatieren. So lassen sich mittels CSS Farbe, Ausrichtung, Größe und generell das Aussehen von Textpassagen, Tabellen, Listen, etc. anpassen.
Der große Vorteil von CSS ist dabei, das man diese Formatierung nicht direkt im HTML-Code angeben muss, sondern in eine extra Datei auslagern kann. Außerdem lassen sich so viele Bereiche der Homepage (vor allem auf verschiedenen Seiten) auf die gleiche Art und Weise formatieren, ohne dass man an jeder Stelle wiederholt die gleichen Formatierungen angibt. Man erreicht also mit relativ wenig Aufwand ein durchgängiges Layout für die eigene Homepage.
CSS sind zunächst einmal ein ziemlich ungewohntes Mittel, so dass hier wohl mehr als in HTML das Prinzip learning by doing oder besser try n error gilt. Allerdings sollte diese Erfahrung jeder für sich machen. Ich werde hier versuchen eine gute Einführung in das Thema zu geben, so dass euch hoffentlich einige Fehler-Situationen, in die ich geraten bin, erspart bleiben.
Ich gehe im Folgenden davon aus, dass ihr genügend Vorkenntnisse in HTML mitbringt, also z.B. mein HTML-Tutorial durchgearbeitet habt.

zurück zum Inhalt

3. Verwendung und Aufbau von CSS

CSS lassen sich in HTML auf drei verschiedene Arten einbetten.
Bevor wir jedoch dazu kommen, wollen wir uns den prinzipiellen Aufbau von CSS-Anweisungen anschauen:

selektor{
  eigenschaft:wert;
}

Der Selektor "selektiert" die gewünschten Elemente und weist den eigenschaften jeweils einen wert zu. Der letzte Satz ist natürlich selbsterklärend ;-) , trotzdem werde ich versuchen den Sachverhalt über ein Beispiel näher zu erläutern:

body{
  text-align:center;
  color:#ff0000;
}

Der Selektor ist hier also body. Wir haben außerdem zwei Eigenschaften (text-align und color) definiert, denen wir die Werte center bzw. #ff0000 zuweisen. Abgeschlossen werden diese Zuweisungen mit einem Semikolon (;).

Wie bereits oben erwähnt gibt es drei Möglichkeiten CSS in HTML einzubinden. Diese wollen wir uns nun genauer angucken.

zurück zum Inhalt

a) Definieren von CSS im Kopf

Man kann innerhalb des <head>-Tags CSS-Formate definieren. Folgendes Beispiel zeigt wie's geht:

<html>
<head>
<style type="text/css">
  body{
    text-align:center;
    color:#ff0000;
  }
</style>
</head>
<body>
  <p> mittig und rot </p>
</body>
</html>

Hierbei wird also im <style>-Tag das CSS-Format definiert.
So sieht es dann aus klick mich!

zurück zum Inhalt

b) Definieren von CSS innerhalb eines Tags

Man kann CSS-Angaben auch direkt innerhalb eines Tags angeben:

<html>
<head>
</head>
<body style="text-align:center; color:#ff0000";>
  <p> mittig und rot </p>
</body>
</html>

Hierbei wird also einfach ein Attribut style in das entsprechende Tag eingefügt und mit den gewünschten Eigenschaften und Werten belegt.
So sieht es dann aus klick mich!

zurück zum Inhalt

c) Definieren von CSS innerhalb einer CSS-Datei

Man kann die CSS-Formatierungen auch in eine eigene Datei auslagern:

<html>
<head>
<link rel="stylesheet" type="text/css" href="./bspFormat.css">
</head>
<body>
  <p> mittig und rot </p>
</body>
</html>

Im <head>-Tag wird also nur die Position der CSS-Datei angegeben, die die Formatierungsinformationen enthält. Sie befindet sich in diesem Fall im gleichen Ordner wie die aktuelle HTML-Datei (vgl. relative Pfadangaben aus dem HTML-Tutorial). Die CSS-Datei habe ich hier mal bspFormat.css getauft, wobei es, wie bei HTML-Dateien auch, eigentlich nur auf die Endung .css ankommt.
Die Datei bspFormat.css enthält nun folgenden Inhalt:

body{
  text-align:center;
  color:#ff0000;
}

So sieht das ganze das aus klick mich!

Die Variante c) ist besonders dann zu empfehlen, wenn Formatierungen für viele HTML-Dateien gleich sein sollen. Die Auslagerung in eine eigene Datei ermöglicht es dann jeder HTML-Datei per Verweis im <head>-Tag auf diese CSS-Datei zu referenzieren.

Bemerkung: Natürlich fallen bei der Anzeige der drei Varianten (bei Klick auf "klick mich!") keine Unterschiede auf. Allerdings zeigt der Quelltext, der drei Varianten, dass ich mir tatsächlich die Mühe gemacht habe alle drei Möglichkeiten umzusetzen.

zurück zum Inhalt

4. id und class

Das Attribut id haben wir ja bereits im HTML-Tutorium (vgl. das Attribut id) kennen gelernt. Dort habe ich ja bereits erwähnt, dass id in Zusammenhang mit CSS wieder eine Rolle spielen wird - nun ist es soweit. Das Tag in dem id steht, ist über den eindeutigen Namen/Wert "ansprechbar". Wir haben das ja bereits für das Linken auf einer Seite ausgenutzt. Um nun die Elemente unserer Homepage zu Formatieren nutzten wir ebenfalls die Eindeutigkeit des Wertes von id aus. Folgendes Beispiel zeigt wie's geht:

<html>
<head>
<link rel="stylesheet" type="text/css" href="./bspFormat.css">
</head>
<body>
  <p> mittig und rot </p>
  <p> <font id="gruen">mittig</font>, <font id="gross">groß</font> und rot </p>
</body>
</html>

Wie du mit Sicherheit festgestellt hast, verwende ich hier die Variante c), d.h. ich lagere die CSS-Formatierungen in eine eigene Datei aus. Ich verwende dabei wieder die Datei bspFormat.css, die ich um die entsprechenden Einträge erweitere. Die CSS-Datei sieht dann so aus:

body{
  text-align:center;
  color:#ff0000;
}

#gruen{
  color:#00ff00;
}

#gross{
  font-size:1.7em;
}

Wieder ermöglicht uns die vorangestellte Raute # einen Zugriff auf die id.
Das em hinter der 1.7 ist übrigens eine relative Maßeinheit. HTML bietet viele Maßeinheiten an: Absolute Maßeinheiten, wie px (Pixel), pt (points), cm, mm, in (inch) und relative, wie em und %, die vom Nutzer nach seinen Vorlieben angepasst werden können. Ihr könnt ja mal ein bischen mit ihnen rum experimentieren.
So sieht das Ganze dann aus klick mich!

Es fällt auf, dass id nicht ausreicht, um eine Homepage anständig und regelgerecht zu formatieren. Was ist zum Beispiel, wenn man per CSS weitere Wörter grün färben will? Ich müsste wieder <font id="gruen">auch grün<font> schreiben. Da id aber eindeutig sein muss, geht das auf diese Weise nicht!

Hier hilft das Attribut class. Da unsere Überlegung nicht nur für die Farbe, sondern sicherlich auch für die Größe gilt, ändern wir im oberen Beispiel direkt beide Attribute ab:

<html>
<head>
<link rel="stylesheet" type="text/css" href="./bspFormat2.css">
</head>
<body>
  <p> mittig und rot </p>
  <p> <font class="gruen">mittig</font>, <font class="gross">groß</font> und rot </p>
  <p> <font class="gruen">auch grün</font>, <font class="gross">(auch) groß</font> und rot </p>
</body>
</html>

Die CSS-Datei sieht dann so aus:

body{
  text-align:center;
  color:#ff0000;
}

font.gruen{
  color:#00ff00;
}

font.gross{
  font-size:1.7em;
}

So sieht das Ganze dann aus klick mich!

Wir mussten also in der CSS-Datei ebenfalls noch Änderungen vornehmen. Wir verweisen ja nicht mehr auf ein Attribut id (können also nicht mehr die Raute # verwenden), sondern auf ein Attribut class. Das wird dadurch erreicht, in dem man den Namen des Tags, in dem das Attribut class steht, durch einen Punkt getrennt, vor den Wert des jeweiligen class-Attributs schreibt, also beispielsweise font.gruen.
Diese Vorgehensweise ermöglicht es auch für verschiedene Tags gleiche Klassennamen zu verwenden, also z.B.:

<font class="gruen">grüner Text</font>
<h3 class="gruen">grüne Überschrift</h3>

In der entsprechenden CSS-Datei steht dann folgendes:

font.gruen{
  color:#00ff00;
}
h3.gruen{
  color:#00ff00;
}

zurück zum Inhalt

5. Formatierungen mit CSS

Es folgen nun ein paar wichtige Formatierungsmöglichkeiten für Schriftart, Text, Hintergrund und Links.

a) Schriftarten

font-family: mit diesem Attribut lässt sich die Schriftart bzw. als letzte Alternative die generische Familie festelegen. Die Angabe der generischen Familie stellt sicher, dass, wenn keine der angegebenen Schriftarten auf dem PC des Besuchers vorhanden ist, zumindest eine Schriftart aus dieser Familie gewählt wird. Folgendes Beispiel zeigt Schriftarten mit ihren zugehörigen generischen Familien:

<html>
<head>
</head>
<body>
  <font style="font-family:arial, sans-serif;"> Wenn nicht Arial, dann wenigstens sans-serif </font><br><br>
  <font style="font-family: Times New Roman, serif;"> Wenn nicht Times New Roman, dann wenigstens serif </font><br><br>
  <font style="font-family:courier, monospace;"> Wenn nicht Courier, dann wenigstens monospace </font><br><br>
  <font style="font-family: Courier New, monospace;"> Wenn nicht Courier New, dann wenigstens monospace </font><br><br>
  <font style="font-family:verdana, arial, sans-serif;"> Wenn nicht Verdana, oder Arial, dann wenigstens sans-serif </font><br><br>
  <font style="font-family: georgia, Times New Roman, serif;"> Wenn nicht Georgia, oder Times New Roman, dann wenigstens serif </font><br><br>
  <font style="font-family:Courier, Courier New, monospace;"> Wenn nicht Courier, oder Courier New, dann wenigstens monospace </font>
</body>
</html>

So sieht das Ganze dann aus klick mich!

font-weight: mit diesem Attribut lässt sich die Textdicke bestimmen. Es können die Werte normal und bold verwendet werden. Die Codezeilen

<font style="font-weight:normal;">normal gedruckt</font>
<font style="font-weight:bold;">fett gedruckt</font>

sehen auf der Homepage dann so aus:

normal gedruckt
fett gedruckt

font-size: mit diesem Attribut lässt sich, wie bereits erwähnt, die Schriftgröße bestimmen. Als Maß können absolute oder relative Einheiten verwendet werden. Diese haben wir oben ja bereits kennengelernt. Relative Größenangaben erlauben es dem Benutzer die Schriftgröße seinen Anforderungen anzupassen, wenn ihm die Schrift also zu klein vorkommt, kann er sie über die Browseroption Schriftgröße vergrößern. Nun wollen wir damit ein wenig experimentieren:

<html>
<head>
</head>
<body>
  <font style="font-size:1.0em;">relativ normale Schriftgröße ;-)</font><br>
  <font style="font-size:170%;">170% der Größe</font><br>
  <font style="font-size:25px;">25 Pixel groß</font><br>
  <font style="font-size:4cm;">4cm groß</font><br><br> <br><br><br>
  Verändere nun mal in den Browseroptionen die Schriftgröße!! </body>
</html>

So sieht das Ganze dann aus klick mich!
Verändert man in diesem Beispiel unter den Browseroptionen die Schriftgröße, sieht man, dass die absoluten Angaben davon unberührt bleiben.

font-style: mit diesem Attribut kann der Stil der Schrift verändert werden. Es stehen folgende Werte zur Verfügung: normal, italic und oblique. Wieder zeigt ein Beispiel was die einzelnen Werte bewirken:

<font style="font-style:normal;">kein Stil</font>
<font style="font-style:italic;">kursiv gedruckt</font>
<font style="font-style:oblique;">und schräg</font>

Das sieht dann so aus:

kein Stil
kursiv gedruckt
und schräg

zurück zum Inhalt

b) Text

text-align: mit diesem Attribut kann man die horizontale Ausrichtung des Textes steuern. Mögliche Werte sind left, right, center und justify (Blocksatz)
Folgendes Beispiel zeigt u.a. welchen Einfluss die Werte auf Tabellen-Zellen haben:

<table>
  <tr>
    <td style="text-align:right; width:70px;">rechts</td>
    <td style="text-align:center; width:70px;">center</td>
    <td style="text-align:left; width:70px;">links</td>
  </tr>
</table>
<p style="text-align:justify; width:200px">Diese kleine Text- passage erscheint im Blocksatz, d.h. es wird versucht jede Zeile auf die gleiche Länge zu strecken. Das erleichtert das Lesen und sieht einfach besser aus.</p>

Mit der Angabe width:70px legen wir die Breite einer Zelle auf 70 Pixel fest.
Das Ergebnis sieht dann so aus:

rechts center links

Diese kleine Text- passage erscheint im Blocksatz, d.h. es wird versucht jede Zeile auf die gleiche Länge zu strecken. Das erleichtert das Lesen und sieht einfach besser aus.

text-decoration: mit diesem Attribut kann man Textstellen unterstreichen (underline), überstreichen (overline) und durchstreichen (line-through):

<font style="text-decoration:underline;">unterstrichen</font>
<font style="text-decoration:overline;">überstrichen</font>
<font style="text-decoration:line-through;">durchgestrichen</font>

Das sieht dann so aus:

unterstrichen
überstrichen
durchgestrichen

zurück zum Inhalt

c) Hintergrund

background-color: mit diesem Attribut lässt sich die Hintergrundfarbe eines Elements bestimmen. Wir haben bereits das Attribut color kennen gelernt, dass die Farbe für den Vordergrund festlegt. Die Angaben können, wie in HTML, über Hexadezimalwerte (#ff0000, ...) oder Farbnamen (red, ...) angegeben werden. Außerdem ist eine Angabe der Form rgb(255, 0, 0) möglich. Der Wertebereich der einzelnen Farben (rot, grün, blau) liegt auch hier zwischen 0 bis 255 (255 = #ff).

<font style="background-color:red;">rot</font>
<font style="background-color:#00ff00;">grün</font>
<font style="background-color:rgb(0, 0, 255); color:white;"> blau</font>

So sieht das dann aus:

rot
grün
blau

background-image: mit diesem Attribut kann man das Hintergrundbild eines Elements festelegen. Folgende Attribute sind in diesem Zusammenhang ebenfalls interessant: background-repeat, background-attachment und background-position. Folgendes Beispiel zeigt wieder eine Anwendungsmöglichkeit unter Verwendung der oben genannten Attribute:

<table style="border-collapse:collapse">
  <tr>
    <td style="background-image:url(./Bilder/bg2.jpg); background-repeat:repeat-x; width:70px; border: 1px solid black">nur horizontal wiederholtes Hintergrundbild</td>
    <td style="background-image:url(./Bilder/bg2.jpg); background-repeat:repeat-y; width:70px; border: 1px solid black">nur vertikal wiederholtes Hintergrundbild</td>
    <td style="background-image:url(./Bilder/bg2.jpg); background-repeat:no-repeat; width:70px; border: 1px solid black">nicht wiederholt</td>
    <td style="background-image:url(./Bilder/bg2.jpg); background-repeat:repeat; width:70px; border: 1px solid black">Standardfall</td>
  </tr>
  <tr>
    <td style="background-image:url(./Bilder/bg2.jpg); background-repeat:no-repeat; background-position:bottom center; width:70px; border: 1px solid black">Bild befindet sich mitte-unten</td>
    <td style="background-image:url(./Bilder/bg2.jpg); background-repeat:no-repeat; background-position:50% 50%; width:70px; border: 1px solid black">Bild befindet sich mittig</td>
    <td style="background-image:url(./Bilder/bg2.jpg); background-repeat:no-repeat; background-position:20px 60px; width:70px; border: 1px solid black">Bild befindet sich 20px(x-Achse)-60px(y-Achse)</td>
    <td style="background-image:url(./Bilder/bg2.jpg); background-repeat:no-repeat; background-position:top left; width:70px; border: 1px solid black">Bild befindet sich oben-links</td>
  </tr>
</table>

Der Code border: 1px solid black; in den <td>-Tags erzeugt eine 1 Pixel breite, durchgezogenene, schwarze Linie als Rahmen für eine Tabellenzelle. Da der Rahmen zwischen zwei Zellen im Standardfall nicht zusammenfällt, muss dies im <table>-Tag, über das border-collapse-Attribut erzwungen werden.
Das Attribut background-position erhält als Wert ein Koordinaten-Paar, bestehend aus x- und y-Koordinate.
Das Hintergrundbild ist ein blaues Quadrat:

Hintergrundbild

Das Ergebnis sieht dann so aus:

nur horizontal wiederholtes Hintergrundbild nur vertikal wiederholtes Hintergrundbild nicht wiederholt Standardfall
Bild befindet sich mitte-unten Bild befindet sich mittig Bild befindet sich 20px(x-Achse)-60px(y-Achse) Bild befindet sich oben-links

Das Attribut background-attachment wurde in diesem Beispiel nicht verwendet. Es dient dazu das Hintergrundbild auf der Seite zu verankern (fixed) oder scrollbar (scroll) zu machen. Um dies zu verdeutlichen, betrachten wir abschließend die beiden folgenden Beispiele:

<html>
<head>
</head>
<body style="background-image:url(./Bilder/bspBild.jpg); background-attachment:scroll; background-repeat:no-repeat; background-position:100px 100px;">
  anfang<br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> ende
</body>
</html>

So sieht's aus klick mich! Das Hintergrundbild scrollt also nicht mit.
Das zweite Beispiel zeigt die andere Möglichkeit:

<html>
<head>
</head>
<body style="background-image:url(./Bilder/bspBild.jpg); background-attachment:fixed; background-repeat:no-repeat; background-position:100px 100px;">
  anfang<br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> ende
</body>
</html>

So sieht's aus klick mich!

zurück zum Inhalt

d) Links

Ein Link kann schon besucht (visited), noch nicht besucht (link), gerade angeklickt (active) oder fokusiert (focus) worden sein. Außerdem kann der Mauszeiger über einen Link "schweben" (hover). Mit CSS ist es möglich einem Link, für jeden dieser Fälle (Pseudoklassen) ein anderes Aussehen zu verpassen.

<html>
<head>
<style type="text/css">
  a:link { color:blue; text-decoration:underline; }
  a:visited { color:green; text-decoration:none; }
  a:focus { font-weight:bold; color:red; text-decoration:underline; }
  a:hover { font-weight:bold; color:darkblue; text-decoration:underline; }
  a:active { color:black; text-decoration:none; }
</style>
</head>
<body>
  <a href="http://www.vidan.de.vu"> Meine Homepage </a>
</body>
</html>

So sieht's aus klick mich!

Wie euch sicher aufgefallen ist, haben wir in den oberen Beispielen meistens die Variante b), also die Angabe der CSS-Formatierungen in einem Tag, verwendet. Es ist natürlich genau so gut möglich, diese in den Kopf, oder in eine seperate CSS-Datei zu schreiben.

zurück zum Inhalt

6. Das CSS Box-Modell

In diesem Kapitel wollen wir versuchen das CSS Box-Modell zu verstehen. Folgende Grafik soll uns dabei unterstützen:

Box-Modell

Jedes HTML-Element hat eine Höhe (height), eine Breite (width) und vier Seiten oben (top), unten (bottom), links (left) und rechts (right).
Die Gesamthöhe eines HTML-Elements setzt sich dabei zusammen aus dem äußeren Abstand (margin (top und bottom)), der Rahmendicke (boder-width), dem inneren Abstand (padding (top und bottom)), sowie der Höhe (height) des Inhalts. Für die Gesamtbreite eines Elements gilt das entsprechend, wobei width die Breite des Inhalts ist.
Wir wollen nun versuchen ein Beispiel zu erzeugen:

oben steht das
<h1 style="font-size:30px; border: 5px solid red; margin-left:40px; margin-top: 100px; margin-bottom: 20px; padding-left:10px; padding-top: 40px; width:200px;">Inhalt</h1>
unten steht das

Aussehen tut das dann so:

oben steht das

Inhalt

unten steht das

Man kann auch den inneren und äußeren Abstand in alle Richtungen gleich verteilen, indem man einfach die Positionsangaben weglässt, also beispielsweise einfach padding:100px schreibt.
Wenn man für alle Abstände unterschiedliche Werte setzen will, kann man auch die Kurzschform margin/padding:[top][right][bottom][left] verwenden, also besipielsweise:

<h1 style="font-size:30px; border: 5px solid red; padding: 20px 60px 100px 140px;">Inhalt</h1>

Aussehen tut das dann so:

Inhalt

zurück zum Inhalt

a) Rahmen - border

Um einen Rahmen um ein Element zu erhalten gibt es die Attribute border-width, border-style und border-color, diese lassen sich als Kombination im Attribut border zusammenfassen, wobei die Reihenfolge wie folgt gegeben ist:

border: [border-width][border-style][border-color];

Diese Kombintation haben wir oben bereits in einigen Beispielen verwendet.
border-width kann eine Pixelangabe oder einer der Werte thin, medium oder thick zugewiesen werden.
border-style kann die Werte dashed, dotted, double, groove, inset, outset, ridge oder solid erhalten. Folgendes Beispiel zeigt die einzelnen Varianten:

<font style="border-style:dashed">dashed</font><br><br>
<font style="border-style:dotted">dotted</font><br><br>
<font style="border-style:double">double</font><br><br>
<font style="border-style:groove">groove</font><br><br>
<font style="border-style:inset">inset</font><br><br>
<font style="border-style:outset">outset</font><br><br>
<font style="border-style:ridge">ridge</font><br><br>
<font style="border-style:solid">solid</font>

So sieht's dann aus:

dashed

dotted

double

groove

inset

outset

ridge

solid

zurück zum Inhalt

7. Layouts mit CSS und <div>

Bereits im HTML-Tutorial haben wir <div>s kennengelernt, wobei wir festgestellt hatten, dass <div>s hauptsächlich dafür benötigt werden, um mittels CSS ganze Bereiche einer Homepage zu formatieren. Hier werden wir nun lernen, wie man mit Hilfe von <div>s das ganze Layout einer Seite festlegen kann.

a) "be water my friend" - float

Ein in diesem Zusammenhang wichtiges Attribut ist float. Hiermit kann man u.a. einen Bereich von einem anderen Bereich umfliessen lassen. Die Werte left, right und none (Standardwert) sind für float möglich. Um den Unterschied zwischen left und right zu verdeutlichen, schauen wir uns die beiden folgenden Beispiele an.
Der Fall float:left:

<p style="float:left; width: 150px; border:1px solid black;">ich werde von einem anderen Bereich umflossen und stehe links</p>
<p style="border:1px solid red;">ich <br>umfliesse<br> den<br> Bereich<br> ...<br> abc<br> def <br> ghi <br> jkl</p>

Das sieht so aus:

ich werde von einem anderen Bereich umflossen und stehe links

ich
umfliesse
den
Bereich
...
abc
def
ghi
jkl

Der Fall float:right:

<p style="float:right; width: 150px; border:1px solid black; padding-left:20px;">ich werde von einem anderen Bereich umflossen und stehe links</p>
<p style="border:1px solid red;">ich <br>umfliesse<br> den<br> Bereich<br> ...<br> abc<br> def <br> ghi <br> jkl</p>

Das sieht so aus:

ich werde von einem anderen Bereich umflossen und stehe rechts

ich
umfliesse
den
Bereich
...
abc
def
ghi
jkl

clear: Um einen Umfluss abzubrechen und unter dem umflossenden Bereich weiter fortzusetzen gibt es das Attribut clear, das die Werte left, right, both und none (Standardwert) erhalten kann. Wir wollen uns hier nur kurz ein Beispiel anschauen:

<img src="./Bilder/bspBild.jpg" alt="Kühe" style="float:left;">
<p>Das Bild zeigt Kuhärsche :-)</p>
<p style="border:1px solid red; clear:left;"> Die Bildbeschreibung steht also rechts neben dem Text und dieser Text steht darunter. Kopiert den Quelltext mal in euren Editor, löscht dann mal das "clear:left" und schaut was passiert. (Ihr solltet natürlich das Bild auf eurem Rechner speichern und den Pfad entsprechend anpassen.)</p>

Das sieht so aus:

Kühe

Das Bild zeigt Kuhärsche :-)

Die Bildbeschreibung steht also rechts neben dem Bild und dieser Text steht darunter. Kopiert den Quelltext mal in euren Editor, löscht dann mal das "clear:left" und schaut was passiert. (Ihr solltet natürlich das Bild auf eurem Rechner speichern und den Pfad entsprechend anpassen.)

zurück zum Inhalt

b) oben Navi - unten Inhalt

Wir wollen uns nun zunächst eine einfache Möglichkeit des Layouts mit <div>s anschauen und kommen dann in den nächsten Abschnitten auf das Attribut float zurück.
Unsere Aufgabe soll es nun sein eine Homepage zu erstellen, die im oberen Bereich eine Navigation bietet, also die Möglichkeit sämtliche Seiten unserer Homepage anzusteuern, und darunter den Inhalt der Seite anzeigen soll. Wie der Kapitelname schon verrät, wollen wir das mit Hilfe von <div>s erreichen.
Das folgende Beispiel löst diese Aufgabe. Wir erstellen dafür die Dateien seite1.html, seite2.html und die Datei format.css, die den folgenden Inhalt erhalten.

seite1.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="./format.css">
</head>
<body>
  <div id="navigation">
  Navigation<br><br>
  <span class="navi">Seite 1</span>
  <span><a href="./seite2.html">Seite 2</a></span>
  </div>
  <div id="inhalt">
  Hier steht der Inhalt der Seite 1...
  </div>
</body>
</html>

seite2.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="./format.css">
</head>
<body>
  <div id="navigation">
  Navigation<br><br>
  <span class="navi"><a href="./seite1.html">Seite 1</a></span>
  <span>Seite 2</span>
  </div>
  <div id="inhalt">
  Hier steht der Inhalt der Seite 2...
  </div>
</body>
</html>

format.css:
#navigation{
  border: 2px solid red;
  padding: 20px
}

#inhalt{
  border:2px solid blue;
  margin: 20px;
  padding: 20px;
  height:300px;
}
span.navi{
  margin-right:40px;
}

Hier können wir uns das Ergebnis anschauen.

zurück zum Inhalt

c) zweispaltiges Layout

Kommen wir nun auf float zurück. Wir wollen ein Layout erstellen, bei dem der Navigationsbereich auf der linken Seite zu finden ist und der Inahlt auf der rechten Seite steht.
Wieder erstellen wir die drei Dateien seite1.html, seite2.html und format.css, diesmal mit folgendem Inhalt.

seite1.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="./format.css">
</head>
<body>
  <div id="site">
    <div id="navigation">
    Navigation<br><br>
    <span>Seite 1</span><br>
    <span><a href="./seite2.html">Seite 2</a></span>
    </div>
    <div id="inhalt">
    Hier steht der Inhalt der Seite 1...
    </div>
  </div>
</body>
</html>

seite2.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="./format.css">
</head>
<body>
  <div id="site">
    <div id="navigation">
    Navigation<br><br>
    <span><a href="./seite1.html">Seite 1</a></span><br>
    <span>Seite 2</span>
    </div>
    <div id="inhalt">
    Hier steht der Inhalt der Seite 2...
    </div>
  </div>
</body>
</html>

format.css:
body{
  text-align:center;/*Zentrierung für Internet Explorer*/
}

#site{
  text-align:left;/*Zentrierung zurücksetzen*/
  margin:0 auto; /*Zentrierung nach Standard (bleibt beim IE wirkungslos)*/
  border:5px solid green;
  height:350px;
  width:700px;
}

#navigation{
  border:2px solid red;
  width:150px;
  float:left;
  height:300px;
}

#inhalt{
  border:2px solid blue;
  height:300px;
  margin-left:170px;
}

Hier können wir uns das Ergebnis anschauen.

Erklärung: Wie man sieht, haben wir in diesem Beispiel sogar eine Zusatzaufgabe gelöst. Wir haben den Seiteninhalt zentriert. Diese Aufgabe muss auf zwei Arten gelöst werden, da der Internet Explorer die standardkonforme Variante (margin: 0 auto; in site{}) nicht interpretiert. Um im IE den Inhalt zu zentrieren müssen wir im body{} die Text-Ausrichtung zunächst auf center setzen und dann im umschließenden Bereich site zurück auf left.
Das zweispaltige Layout haben wir dadurch erreicht, dass wir zunächst einen umschließenden Bereich (<div>) site definiert haben, der die beiden Spalten navigation und Inhalt aufgenommen hat. site und navigation haben dabei eine fest vorgegebene Breite (width) zugewiesen bekommen. Der inhalt nimmt den Rest des Bereichs (site) ein.
Durch float:left; in der navigation kann der inhalt die Navigation umfließen. Durch die Angabe margin-left:170px; erzwingen wir die Anzeige als Spalten und nicht als sich umfliessende Textbereiche.

Eine weitere Möglichkeit könnt ihr euch hier anschauen klick mich!.

zurück zum Inhalt

d) dreispaltiges Layout

Nun wollen wir ein dreispaltiges Layout erzeugen, wobei links der Navigationsbereich, in der Mitte der Inhalt und rechts eine Spalte mit aktuellen News stehen soll.
Wieder erstellen wir die drei Dateien seite1.html, seite2.html und format.css, diesmal mit folgendem Inhalt.

seite1.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>
<head>
<title>Seite 1</title>
<link rel="stylesheet" type="text/css" href="./format.css">
</head>
<body>
  <div id="navigation">
    Navigation<br><br>
    <span>Seite 1</span><br>
    <span><a href="./seite2.html">Seite 2</a></span>
  </div>
  <div id="news">
    Hier stehen aktuelle News ...
  </div>
  <div id="inhalt">
    Hier steht der Inhalt der Seite 1...
  </div>
</body>
</html>

seite2.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>
<head>
<title>Seite 2</title>
<link rel="stylesheet" type="text/css" href="./format.css">
</head>
<body>
  <div id="navigation">
  Navigation<br><br>
  <span><a href="./seite1.html">Seite 1</a></span><br>
  <span>Seite 2</span>
  </div>
  <div id="news">
  Hier stehen aktuelle News ...
  </div>
  <div id="inhalt">
  Hier steht der Inhalt der Seite 2...
  </div>
</body>
</html>

format.css:
body{
  min-width:600px;
}

#navigation{
  border:2px solid red;
  width:110px;
  float:left;
}

#inhalt{
  border:2px solid blue;
  margin-left:120px;
  margin-right:160px;
}
#news{
  border:2px solid silver;
  height:250px;
  width:150px;
  float:right;
}

Hier können wir uns das Ergebnis anschauen.

Interessant an dieser Variante ist, dass der Inhalt zwar in der Mitte, also vor den News steht, im Quelltext die News aber vor dem Inhalt definiert werden müssen. Die Angaben margin-left und margin-right im inhalt{} dienen dazu den Abstand zur linken und rechten Seite zu erzwingen und so ein umfliessen zu verhindern. Die Werte entsprechen den Breiten-Angaben der Navigation und der News plus ein bißchen Abstand, der zwischen den einzelnen Bereichen bleiben soll. Die Navigation "fliesst" links und die "News" rechts am Inhalt, wobei der Inhalt keine feste Breite erhalten hat, sondern den Platz einnimmt, der noch frei ist.

zurück zum Inhalt

e) dreispaltiges Layout mit Kopf und Fuß

Kopf- und Fußzeile in unserer Layout zu basteln ist nun keine schwere Aufgabe mehr.
Wieder erstellen wir die drei Dateien seite1.html, seite2.html und format.css, diesmal mit folgendem Inhalt.

seite1.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>
<head>
<title>Seite 1</title>
<link rel="stylesheet" type="text/css" href="./format.css">
</head>
<body>
  <div id="kopfzeile">
    Das ist die Kopfzeile!
  </div>
  <div id="navigation">
    Navigation<br><br>
    <span>Seite 1</span><br>
    <span><a href="./seite2.html">Seite 2</a></span>
  </div>
  <div id="news">
    Hier stehen aktuelle News ...
  </div>
  <div id="inhalt">
    Hier steht der Inhalt der Seite 1...
  </div>
  <div id="fusszeile">
    Das ist die Fußzeile!
  </div>
</body>
</html>

seite2.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>
<head>
<title>Seite 2</title>
<link rel="stylesheet" type="text/css" href="./format.css">
</head>
<body>
  <div id="kopfzeile">
    Das ist die Kopfzeile!
  </div>
  <div id="navigation">
    Navigation<br><br>
    <span><a href="./seite1.html">Seite 1</a></span><br>
    <span>Seite 2</span>
  </div>
  <div id="news">
    Hier stehen aktuelle News ...
  </div>
  <div id="inhalt">
    Hier steht der Inhalt der Seite 2...
  </div>
  <div id="fusszeile">
    Das ist die Fußzeile!
  </div>
</body>
</html>

format.css:
body{
  min-width:600px;
}

#kopfzeile{
  border:2px solid darkblue;
  height:100px;
  margin-bottom:10px;
}
#navigation{
  border:2px solid red;
  height:300px;
  width:110px;
  float:left;
}

#inhalt{
  border:2px solid blue;
  margin-left:120px;
  margin-right:160px;
}
#news{
  border:2px solid silver;
  width:150px;   height:300px;
  float:right;
}
#fusszeile{
  border:2px solid green;
  height:100px;
  margin-top:10px;
  clear:both;
}

Hier können wir uns das Ergebnis anschauen.

zurück zum Inhalt

Wenn euch das Tutorial gefallen hat, könnt ihr es gerne weiter

(zuletzt geändert: 21.03.2011 - Link zum CSS-Box-Modell eingefügt)

© 2007-2017 Daniel Pasqua
kontakt inhalt info