Rahmen & Ränder

Die folgenden Teile des Tutorials beschäftigen sich mit dem Thema “Rahmen & Ränder”. Bislang war es in fast allen Fällen nötig, Tabellen zu verwenden, um einer Webseite ein ansprechendes Layout zu geben. Tabellen werden oft auch für einfache Dinge, wie z.B. eine bestimmte Hintergrundfarbe für einen Absatz oder für einen Rahmen um ein Element, benutzt. Dass dies überflüssig ist und unnötigen Quellcode erzeugt, zeigen die folgenden Seiten.

Um jedes Element einer Webseite gibt es eine rechteckige Box. Diese sog. “Element Box” legt fest, wie viel Platz das Element mit seinen Eigenschaften benötigt und beeinflusst so alle anderen (folgenden) Elemente.

Die folgende Abbildung hilft beim Verständnis der möglichen Beeinflussung der Element Box:

So lässt sich die Breite der inneren Box (Inhalt) mit Hilfe des Befehls width festlegen:

width
Werte <Längenangabe> | <Prozentwert> | auto
Standardwert auto
Vererbung nein
Anwendbar auf Block-level Elemente

Analog dazu die Höhe der Inhalts-Box:

height
Werte <Längenangabe> | auto
Standardwert auto
Vererbung nein
Anwendbar auf Block-level Elemente

Margin und Padding

Es gibt verschiedene Möglichkeiten die Größe der Element Box zu verändern: Es lassen sich die Werte für padding, margin oder beide gleichzeitig verändern.

Margin

Mit Hilfe des Befehls margin lässt sich um den Inhalt zusätzlicher Freiraum schaffen.

margin
Werte [<Längenangabe> | <Prozentwert> | auto]{1,4}
Standardwert nicht definiert
Vererbung nein
Anwendbar auf alle Elemente

Um eine Überschrift könnte so ein Freiraum von 10 Pixeln geschaffen werden:

H3 { margin: 10px; } 

Die obige Überschrift hat einen Freiraum von 10 Pixeln um ihren Inhalt.

Natürlich können Sie nicht nur den Freiraum um das gesamte Element definieren, in der Reihenfolge top, right, bottom und left können Sie in jede Richtung Angaben machen:

H3 { margin: 10px 15px 5px 25px; }

Die obige Überschrift hat einen Freiraum von 10 Pixeln oben, 15 Pixeln rechts, 5 Pixeln unten und 25 Pixel links um ihren Inhalt.

Manchmal ist es ausreichend, wenn nur für einen Margin-Wert eine Angabe gemacht wird.

Dafür stehen vier Befehle zur Verfügung:

margin-top, margin-right, margin-bottom, margin-left
Werte <Längenangabe> | <Prozentwert> | auto
Standardwert 0
Vererbung nein
Anwendbar auf alle Elemente

Obiges Beispiel könnte demnach auch so aussehen:

H3 {
margin-top: 10px;
margin-right: 15px;
margin-bottom: 5px;
margin-left: 25px;
}

Neben positiven Werten lassen sich auch negative Angaben bei margin-Befehlen machen. Damit verkürzt man den Freiraum um den angegeben Wert, was zu Überschneidungen mit anderen Elementboxen führen kann.

Übrigens können Sie diese Freiräume auch für Inline Elemente verwenden, z.B. jedes fett geschriebene Wort durch einen zusätzlichen Freiraum stärker hervorheben.

Ränderstile (border-style)

In HTML können Sie das Aussehen eines Randes z.B. um eine Tabellezelle oder um ein Bild nur wenig verändern. In CSS haben Sie dagegen verschiedene Stile zur Gestaltung von Rändern und Rahmen.

border-style
Werte none | dotted | dashed | solid | double | groove | ridge | inset | outset
Standardwert none
Vererbung nein
Anwendbar auf alle Elemente

Diese Ränder werden leider nicht von allen Browser angezeigt.

Es lassen sich auch für jede Seite der Box um das Element unterschiedliche Stile festlegen:

P.stile { border-style: solid double dashed dotted; }

Dieser Absatz hat oben einen “soliden” Rand, rechts einen “doppelten”, unten einen “gestrichelten” und links einen “gepunkteten”. Die Reihenfolge “oben-rechts-unten-links” dürfte Ihnen schon bekannt sein.

Randstärke (border-width)

Nicht nur der Stil des Randes lässt sich verändern, auch die Dicke lässt sich mit den folgenden Befehlen angeben:

border-width
Werte [ thin | medium | thick | <Längenangabe> ]{1,4}
Standardwert nicht definiert
Vererbung nein
Anwendbar auf alle Elemente
border-top-width, border-right-width, border-bottom-width, border-left-width
Werte thin | medium | thick | <Längenangabe>
Standardwert medium
Vererbung nein
Anwendbar auf alle Elemente

Mit Hilfe der obigen Befehle lassen sich also entweder für den gesamten Rand oder auch nur für bestimmte Bereiche die Dicke genau angeben, entweder mit den Schlüsselworten “thin” (dünn), “medium” (normal), “thick” (dick) oder durch eine genaue Längenangabe, z.B. 5 px.

P.rand {
border-style: solid;
border-width: 5px;
} 

Rahmenfarben (border-color)

Bislang waren die Ränder immer grau oder schwarz. Mit Hilfe des folgenden Befehls lässt sich aber auch die Farbe des Randes beeinflussen.

border-color
Werte <Farbe>{1,4}
Standardwert der Farbwert des Elementes
Vererbung nein
Anwendbar auf alle Elemente

Wird nur eine Farbe angegeben, bezieht sich dieser Wert auf den gesamten Rahmen. Mit der Angabe von vier Werten können Sie für jeden Rand eine eigene Farbe definieren.

P.bunt {
border-style: solid;
border-width: thick;
border-color: #00FF00 red rgb(50%,50%,75%) yellow;
}
P.einfarbig {
border-style: solid;
border-color: blue;
}


Kurzdefinition von Rahmen (border)

Es gibt die Möglichkeit mit Hilfe von vier Befehlen die unterschiedlichen Stile von Rahmen schneller zu notieren als mit den einzelnen Befehlen.

border-top, border-right, border-bottom, border-left
Werte <Rahmenbreite> || <Rahmenstil> || <Farbe>
Standardwert der jeweilige Wert der einzelnen Befehle
Vererbung nein
Anwendbar auf alle Elemente

Ein Absatz, der immer einen roten Rand der Stärke 3 Pixel oberhalb des Textes hat, könnte wie folgt erzeugt werden:

P.roterrand { border-top: 3px solid red; }

Es müssen nicht immer alle Werte notiert werden, wie folgendes Beispiel zeigt:

H3 {
border-bottom: 5px solid;
color: green;
}

Noch schneller lassen sich Rahmen mit dem Befehl “border” definieren – sofern alle Ränder die gleiche Breite, Stil und Farbe haben sollen.

border
Werte <Rahmenbreite> || <Rahmenstil> || <Farbe>
Standardwert der jeweilige Wert der einzelnen Befehle
Vererbung nein
Anwendbar auf alle Elemente

So können Sie beispielsweise alle Überschriften mit einem roten Rahmen versehen:

H3 { border: 3px solid red; }

Ränder und Rahmen lassen sich auch für Inline Elemente anwenden, wie folgendes Beispiel zeigt:

I { border: 1px solid blue; }

Ein Text mit einem <I>kursiven Wort</I>.


Padding

Vielleicht erinnern Sie sich noch: zwischen dem Inhalt und den Rändern eines Elementes befindet sich der sog. “Padding-Bereich”. (Siehe Grafik am Anfang des Artikels)

Um diesen Padding-Wert zu beeinflussen, gibt es den folgenden Befehl:

padding
Werte [<Längenangabe> | <Prozentwert>]{1,4}
Standardwert 0
Vererbung nein
Anwendbar auf alle Elemente

Vergrößern Sie nun diesen Wert – z.B. um 10 Pixel – sieht das so aus:

H3 {
padding: 10px;
background-color: gray;
}

Mit der Angabe von vier Werten können Sie in der bekannten Reihenfolge die Padding-Werte für jede Seite exakt festlegen:

H3 {
padding: 5px 0.25em 10mm 1.5cm;
background-color: gray;
}

Der Standardwert ist 0 und Padding-Werte dürfen nicht negativ sein.

Wie bei den Rändern gibt es auch hier wieder einzelne Befehle für jede Seite:

padding-top, padding-right, padding-bottom, padding-left
Werte <Längenangabe> | <Prozentwert>
Standardwert 0
Vererbung nein
Anwendbar auf alle Elemente

Diese Befehle lassen sich z.B. gut dazu einzusetzen, um bestimmte Inline Elemente in einem Text hervorzuheben:

I {
padding-left: 10px;
padding-right: 10px;
background-color: yellow;
}

<P>Lorem ipsum dolor sit amet, consectetueradipiscing elit, sed diam <I>nonummy nibh</I> euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</P>

Die beiden Worte “nonummy nibh” werden durch den extra Raum links und rechts so stärker hervorgehoben.

Zu möglicherweise nicht ganz gewollten Ergebnissen führt die Definition eines zusätzlichen Abstandes oben und/oder unten:

B {
padding-top: 5px;
padding-bottom: 5px;
background-color: yellow;
}

<P>Lorem ipsum dolor sit amet, consectetueradipiscing elit, sed diam nonummy nibh <B>euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrudexercitation ullamcorper suscipit lobortis</B> nisl ut aliquip ex ea commodo consequat.</P>

Textfluss (float)

Bei Bildern ist es schon lange möglich, den Textfluss um das Bild zu steuern. lässt andere Elemente wie z.B. Text links am Bild, welches rechts ausgerichtet wird, vorbeifließen. Bislang war eine solche Steuerung des Textflusses oft nur bei Bildern möglich. Mit Hilfe von CSS bzw. dem folgenden Befehl ist es jetzt möglich, dies für alle Elemente (Tabellen, Auflistungen etc.) zu benutzen.

float
Werte left | right | none
Standardwert none
Vererbung nein
Anwendbar auf alle Elemente

Ein Bild lässt sich nun auch dergestalt im Text ausrichten:

<IMG src="css.gif" style="float: right;">

Lorem ipsum dolor sit amet, consectetueradipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrudexercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetueradipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrudexercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Es lassen sich – wie gesagt – nicht nur Bilder ausrichten, sondern z.B. auch andere Absätze:

P.links {
float: left;
margin: 10px;
width: 150px;
}

Es sollte immer die Breite angegeben werden, entweder absolut oder relativ zum übrigen Text, ansonsten wird der ausgerichtete Absatz möglicherweise zu klein dargestellt.

Textfluss beenden (clear)

In bestimmten Situationen ist es nötig, den Textfluss vorzeitig zu beenden, beispielsweise weil ein neuer Absatz beginnt und dieser nicht um das Bild des vorherigen fließen soll.

Zu diesem Zweck gibt es den folgenden Befehl:

clear
Werte left | right | both | none
Standardwert none
Vererbung nein
Anwendbar auf alle Elemente