## Rahmen

| Allgemeines zu Rahmen border[-top, -left, -right, -bottom]-width (Rahmendicke) border[-top, -left, -right, -bottom]-color (Rahmenfarbe) border[-top, -left, -right, -bottom]-style (Rahmentyp) border[-top, -left, -right, -bottom] (Rahmen allgemein)

## Allgemeines zu Rahmen

Sinnvoll sind die hier beschriebenen Angaben besonders für HTML-Elemente, die einen eigenen Absatz erzeugen bzw. einen Block bilden, also etwa für `h[1-6]`, `p`, `blockquote`, `address` oder `pre`. Blockelemente sind aber auch `div`, `table`, `tr`, `th` und `td`. So ist es beispielsweise möglich, in HTML eine blinde Tabelle zu notieren, in der aber doch einzelne Zellen einen Rahmen nach Wunsch erhalten - nämlich mit Hilfe von CSS-Rahmeneigenschaften. Auch auf `body` lassen sich die hier aufgelisteten Eigenschaften anwenden - in diesem Fall wird um den gesamten sichtbaren Körper einer HTML-Datei ein Rahmen gezeichnet.

Wenn Sie nichts bei Rahmendefinitionen nichts weiter angeben, kann es sein, dass die Inhalte von Elementen sehr nah an dem sie umgebenden Rahmen kleben. Zu diesem Zweck können Sie Innenabstände definieren. Dadurch schaffen Sie einen Abstand zwischen dem Rahmen und seinem Inhalt.

In der Regel werden Sie mehrere Angaben zu Rahmen kombinieren. so ist es sinnvoll, nicht nur eine Rahmendicke anzugeben, sondern auch die gewünschte Rahmenfarbe. Auch verschiedene Rahmentypen stehen zur Auswahl. Alle Rahmeneigenschaften können Sie wahlweise auf alle vier Seiten eines Elements anwenden, aber auch nur auf eine oder mehrere bestimmte Seiten.

### Beachten Sie:

Bei Rahmen macht sich das Blockelement-Modell von Netscape 4.x sehr negativ bemerkbar. Dieser Browser dehnt Blockelemente in der Breite nur auf die Breite seines Inhalts, sofern dieser weniger Raum einnimmt als die zur Verfügung stehende Gesamtbreite. Nur mit unschöner Trickserei lässt sich Netscape 4.x dazu überlisten, ein Blockelement auf die durch das Anzeigefenster, den Dokumentrand oder das Elternelement zur Verfügung gestellte Breite auszudehnen. Eine einheitlichere Darstellung erreichen Sie mit Angaben zur Breite von Elementen arbeiten, z.B. mit Angaben wie `width:100%` oder `width:500px`. Ein anderer, noch effektiverer Trick, der den 4er-Netscape das Element tatsächlich auf die volle zur Verfügung stehende Breite ziehen lässt, ist die Angabe `margin:0px`.

## boder[-top, -left, -right, -bottom]-width (Rahmendicke)

Sie können für ein Element die Rahmendicke bestimmen. Sinnvollerweise sollten Sie diese Angabe zumindest mit einer zum Rahmentyp kombinieren, gegebenenfalls aber auch mit einer zur Rahmenfarbe.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>border-width</title>
    <style type="text/css">
    #links {
      border-left-width:1cm;
      border-left-style:solid;
      border-color:red;
      padding-left:1cm;
      text-align:justify; }
    #linksrechts {
      border-left-width:1cm;
      border-left-style:solid;
      border-left-color:red;
      padding-left:1cm;
      border-right-width:1cm;
      border-right-style:solid;
      border-right-color:green;
      padding-right:1cm;
      text-align:justify; }
    #rundrum {
      border-width:1px;
      border-style:solid;
      border-color:blue;
      padding:1cm;
      text-align:justify; }
    }
    </style>
    </head><body bgcolor="#FFFFFF" text="#000000">

    <p id="links">xxxxx xxxxx xxxxx usw.</p>
    <p id="linksrechts">xxxxx xxxxx xxxxx usw.</p>
    <p id="rundrum">xxxxx xxxxx xxxxx usw.</p>

    </body></html>

### Erläuterung:

Mit `border-width:` können Sie Dicke des Rahmens um ein Element bestimmen. Erlaubt ist eine numerische Angabe für die Rahmendicke oder einer der folgenden Werte:

`thin` = dünn.
`medium` = mittelstark.
`thick` = dick.

Um für einzelne Seiten des Elements eine unterschiedliche Rahmendicke zu bestimmen, gibt es zwei Möglichkeiten. Die eine ist, bei `border-width` mehrere Angaben zu notieren und diese durch Leerzeichen zu trennen.
zum Beispiel: `border-width:5px 5px;`
Dabei gelten folgende Regeln:

Zwei Angaben: die erste Angabe bedeutet die Rahmendicke für oben und unten, die zweite Angabe die Rahmendicke für rechts und links.
Drei Angaben: die erste Angabe bedeutet die Rahmendicke für oben, die zweite die Rahmendicke für rechts und links und die dritte die Rahmendicke für unten.
Vier Angaben: die erste Angabe bedeutet die Rahmendicke für oben, die zweite die Rahmendicke für rechts, die dritte die Rahmendicke für unten und die vierte die Rahmendicke für links.

Die zweite Möglichkeit besteht darin, die Untereigenschaften von `border-width` zu verwenden:
`border-top-width` definiert die Rahmendicke für oben.
`border-left-width` die Rahmendicke für links.
`border-right-width` die Rahmendicke für rechts.
`border-bottom-width` die Rahmendicke für unten.

### Beachten Sie:

Der MS Internet Explorer interpretiert die Angabe `border-width` nur, wenn außerdem der Rahmentyp (`border-style`) angegeben wird, also etwa:
`<p style="border-style:solid; border-width:thin">`.

## border[-top, -left, -right, -bottom]-color (Rahmenfarbe)

Sie können für ein Element die Rahmenfarbe bestimmen. Die Angabe dazu sollten Sie mit einer zum Rahmentyp und/oder einer zur Rahmendicke kombinieren.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>border-color</title>
    </head><body bgcolor="#000000" text="#E0E0E0">

    <p style="border-color:#FFFF00; border-width:2px; border-style:solid; padding:4px">
    xxxxx xxxxx xxxxx usw.</p>

    <p style="border-top-color:#FF00FF; border-left-color:#00FF00;
    border-right-color:#3333FF; border-bottom-color:#FFFF00; border-width:4px;
    border-style:solid; padding:8px">
    xxxxx xxxxx xxxxx usw.</p>

    <p style="border-color:cyan yellow; border-width:8px; border-style:solid; padding:16px">
    xxxxx xxxxx xxxxx usw.</p>

    </body></html>

### Erläuterung:

Mit `border-color:` können Sie Rahmenfarbe bestimmen. Erlaubt ist eine Farbangabe oder der Wert `transparent` (durchsichtiger Rahmen, interessant bei sich überlappenden Elementen, wie z.B. durch Positionierung möglich).

Um für einzelne Seiten des Elements eine unterschiedliche Rahmenfarbe zu bestimmen, gibt es zwei Möglichkeiten. Die eine ist, bei `border-color` mehrere Angaben zu notieren und diese durch Leerzeichen zu trennen.
zum Beispiel: `border-color:#FFFF00 red;`
Dabei gelten folgende Regeln:

Zwei Angaben: die erste Angabe bedeutet die Rahmenfarbe für oben und unten, die zweite Angabe die Rahmenfarbe für rechts und links.
Drei Angaben: die erste Angabe bedeutet die Rahmenfarbe für oben, die zweite die Rahmenfarbe für rechts und links und die dritte die Rahmenfarbe für unten.
Vier Angaben: die erste Angabe bedeutet die Rahmenfarbe für oben, die zweite die Rahmenfarbe für rechts, die dritte die Rahmenfarbe für unten und die vierte die Rahmenfarbe für links.

Die zweite Möglichkeit besteht darin, die Untereigenschaften von `border-color` zu verwenden:
`border-top-color` definiert die Rahmenfarbe für oben,
`border-left-color` die Rahmenfarbe für links,
`border-right-color` die Rahmenfarbe für rechts, und
`border-bottom-color` die Rahmenfarbe für unten.
Die Untereigenschaften von `border-color` stehen im Gegensatz zu den Untereigenschaften von `border-width` jedoch erst seit CSS 2.0 zur Verfügung und werden von älteren Browsern ignoriert.

### Beachten Sie:

Der MS Internet Explorer interpretiert die Angabe `border-width` nur, wenn außerdem der Rahmentyp (`border-style`) angegeben wird, also etwa:
`<p style="border-style:solid; border-color:red">`.

Netscape 4.x hat mit Angaben zur Rahmenfarbe zum Teil erhebliche Probleme und interpretiert teilweise augenscheinlich unsinniges Zeug. Das obige Beispiel etwa lässt ihn böse straucheln.

## border[-top, -left, -right, -bottom]-style (Rahmentyp)

Mit dem Rahmentyp können Sie verschiedene Schmuckrahmen definieren. Damit die Typen zur Geltung kommen, empfiehlt sich die Kombination mit Angaben zur Rahmendicke und/oder zur Rahmenfarbe.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>border-style</title>
    </head><body bgcolor="#FFFFFF" text="#000000">

    <p style="border-width:medium; border-color:#FF9999; border-style:dotted; padding:5px;">
    Textabsatz mit Rahmendicke medium und Typ dotted.</p>
    <p style="border-width:medium; border-color:#9999FF; border-style:dashed; padding:5px;">
    Textabsatz mit Rahmendicke medium und Typ dashed.</p>
    <p style="border-width:medium; border-color:#66CC66; border-style:solid; padding:5px;">
    Textabsatz mit Rahmendicke medium und Typ solid.</p>
    <p style="border-width:medium; border-color:#FF9999; border-style:double; padding:5px;">
    Textabsatz mit Rahmendicke medium und Typ double.</p>
    <p style="border-width:12px; border-color:#9999FF; border-style:groove; padding:5px;">
    Textabsatz mit Rahmendicke 12px und Typ groove.</p>
    <p style="border-width:12px; border-color:#66CC66; border-style:ridge; padding:5px;">
    Textabsatz mit Rahmendicke 12px und Typ ridge.</p>
    <p style="border-width:12px; border-color:#FF9999; border-style:inset; padding:5px;">
    Textabsatz mit Rahmendicke 12px und Typ inset.</p>
    <p style="border-width:12px; border-color:#9999FF; border-style:outset; padding:5px;">
    Textabsatz mit Rahmendicke 12px und Typ outset.</p>

    </body></html>

### Erläuterung:

Mit `border-style:` können Sie den Rahmentyp festlegen. Erlaubt ist eine der folgenden Angaben.

`none` = kein Rahmen (bzw. unsichtbarer Rahmen).
`hidden` = kein Rahmen (bzw. unsichtbarer Rahmen), siehe .
`dotted` = gepunktet.
`dashed` = gestrichelt.
`solid` = durchgezogen.
`double` = doppelt durchgezogen.
`groove` = 3D-Effekt.
`ridge` = 3D-Effekt.
`inset` = 3D-Effekt.
`outset` = 3D-Effekt.

Um für einzelne Seiten des Elements einen unterschiedlichen Rahmentyp zu bestimmen, gibt es zwei Möglichkeiten. Die eine ist, bei `border-style` mehrere Angaben zu notieren und diese durch Leerzeichen zu trennen.
zum Beispiel: `border-style:solid double;`
Dabei gelten folgende Regeln:

Zwei Angaben: die erste Angabe bedeutet den Rahmentyp für oben und unten, die zweite Angabe den Rahmentyp für rechts und links.
Drei Angaben: die erste Angabe bedeutet den Rahmentyp für oben, die zweite den Rahmentyp für rechts und links und die dritte den Rahmentyp für unten.
Vier Angaben: die erste Angabe bedeutet den Rahmentyp für oben, die zweite den Rahmentyp für rechts, die dritte den Rahmentyp für unten und die vierte den Rahmentyp für links.

Die zweite Möglichkeit besteht darin, die Untereigenschaften von `border-style` zu verwenden:
`border-top-style` definiert den Rahmentyp für oben,
`border-left-style` den Rahmentyp für links,
`border-right-style` den Rahmentyp für rechts, und
`border-bottom-style` den Rahmentyp für unten.
Die Untereigenschaften von `border-style` stehen im Gegensatz zu den Untereigenschaften von `border-width` jedoch erst seit CSS 2.0 zur Verfügung und werden von älteren Browsern ignoriert.

### Beachten Sie:

Die Angabe `hidden` ist vor allem für benachbarte Tabellenzellen gedacht. Während die Angabe `none` nur den Rahmen des Elements unterdrückt, für das sie gilt, bewirkt `hidden`, dass auch Rahmen von Nachbarelementen unterdrückt werden, sofern diese Rahmen besitzen. Voraussetzung dafür ist allerdings, dass für das zugehörige `table`-Element die folgende CSS-Sondereigenschaft notiert ist:
`boder-collapse:collapse`
Dies ist eine neuere CSS-Eigenschaft, die Rahmenregeln für Tabellen erlaubt. Beim Wert `collapse` fallen alle Rahmen der Zellen sauber übereinander, sprich, eine Zelle mit rechtem Rand von 1px und eine Zelle rechts davon mit einem linken Rand von 1px bilden einen gemeinsamen Rahmen von 1px. Der gegenteilige mögliche Wert, der allerdings auch der Voreinstellung entspricht, lautet `separate`. Damit "stoßen" die Rahmen benachbarter Zellen nur aneinander, überlappen sich aber nicht. Im Beispiel der zwei erwähnten Zellen würde also optisch ein Zwischenrahmen von 2px Dicke entstehen.
Die `border-collapse`-Eigenschaft wird bislang nur vom Internet Explorer 5.x und vom Opera-Browser interpretiert.

Netscape 4.x interpretiert `border-style` nur, wenn außerdem die eine Angabe zur Rahmendicke notiert wird, also etwa:
`<p style="border-style:solid; border-width:thin">`.

Beide Browser interpretieren die Angaben zu `border-style` nicht vollständig.

Einige der Effekte (z.B. `groove`) kommen nur zustande, wenn Sie eine Farbe angeben, die sich von schwarz unterscheidet.

## border[-top, -left, -right, -bottom] (Rahmen)

Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:
border-width
border-style
border-color

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>border</title>
    <style type="text/css">
    h1 { border-bottom:4px double blue; padding-bottom:4px; margin:0px; }
    h2 { border-top:1px solid blue; margin:0px; }
    p.info { border:1px solid grey; background-color:#E0E0E0; padding:4px; margin:0px; }
    body { font-family:Tahoma,Helvetica,sans-serif; }
    </style>
    </head><body bgcolor="#FFFFFF" text="#000000">

    <h1>&Uuml;berschrift erster Ordnung</h1>

    <p>xxxxx xxxxx xxxxx usw.</p>

    <h2>&Uuml;berschrift zweiter Ordnung</h2>

    <p>xxxxx xxxxx xxxxx usw.</p>

    <p class="info">xxxxx xxxxx xxxxx usw.</p>

    </body></html>

### Erläuterung:

Mit `border:` können Sie das Aussehen eines Rahmens um ein Element bestimmen. Notieren Sie Angaben zu Linienstärke, Rahmentyp und Farbe mit Leerzeichen dazwischen, so wie in den Beispielen oben. Die Reihenfolge der Einzelangaben ist egal.

Daneben können Sie zusammenhängende Angaben für Rahmendicke, Rahmenfarbe und Rahmentyp auch für einzelne Seiten des Elements machen. Dazu sind die Untereigenschaften von `border` gedacht:
`border-top` definiert eine zusammenhängende Angabe für oben,
`border-left` für links,
`border-right` für rechts, und
`border-bottom` für unten.

| Hintergrundfarben und -bilder
| Innenabstand

© 2001 selfhtml@teamone.de