2.9.3 Rahmen (border)

1 Allgemein

a) Prinzip

Festlegung folgender Angaben:

• Breite (border-width)
• Art (border-style)
• Farbe (border-color)

b) Beispiel 1: Legt die 3 Attribute in einer Angabe fest

<p style="border:2pt solid #0000ff;">
Ein 2 Punkt starker, durchgezogener, blauer Rahmen </p>

Ein 2 Punkt starker, durchgezogener, blauer Rahmen

• CSS 4 You: Rahmen (border)
  CSS 4 You: Beispiel

c) Beispiel 2: Ebenfalls mit 3 Attributen in einer Angabe

<p style="border: medium double rgb(250,0,255);">
Ein mittelstark, doppelter, roter Rahmen </p>

Ein mittelstark, doppelter, roter Rahmen

• W3Schools: Beispiel: All the border properties in one declaration

• SELFHTML: Allgemeines zu Rahmen

d) Workshops

Grundlagen

• W3Schools: CSS Border
  W3Schools: CSS2-Reference: Border

• W3Schools:
  Beispiel: Set different borders on each side
  Beispiel: All the bottom border properties in one declaration
  Beispiel: All the left border properties in one declaration
  Beispiel: All the right border properties in one declaration
  Beispiel: All the top border properties in one declaration

• Web Design Group: Syntax: Border

Anwendungen

• Homepage-Total.de: Rahmen für Bilder erstellen

2 Rahmenstärke (border-width)

a) Bezeichnungen

• border-with = Rahmenstärke = Rahmendicke

b) Numerische Angaben

• pt = Punkt = 1/72 inch (z.B. font-size:12pt)
• px = Pixel (z.B. border-width:1px)
• em
• % = Prozent.
• etc.

• SELFHTML: Numerische Angaben
  SELFHTML: Punkt/Inch/Millimeter-Umrechner

c) Relative Angaben

• thin = dünn
• medium = mittelstark
• thick = dick

d) Beispiel 1: Numerische Angabe

<p style="border-width:5px;border-style:dotted;">
Ein Rahmen 5px breit</p>

Ein Rahmen 5px breit

e) Beispiel 2: Relative Angabe

<p style="border-width:thin;border-style:dashed;">
Ein dünner, gestrichelter Rahmen</p>

Ein dünner, gestrichelter Rahmen

f) Workshops

• SELFHTML:
  border[-top, -right, -bottom, -left]-width (Rahmendicke)
  Beispiel

• W3Schools:
  Beispiel: Set the width of the bottom border
  Beispiel: Set the width of the left borderborder
  Beispiel: Set the width of the right border
  Beispiel: Set the width of the top border
  Beispiel: All the width of the border properties in one declaration

• Web Design Group: Syntax: border width

• CSS 4 You: Rahmenbreite (border-width)

3 Rahmentyp (border-style)

a) Bezeichnungen

• dotted = punktiert
• dashed = gestrichelt
• solid = durchgezogen
• double = doppelt (Doppellinie)
• groove = gerillt
• ridge = erhöht
• inset = eingelassen
• outset = hervortretend

b) Beispiele

<p style="border-width:medium;border-color:#FF9999;
border-style:dotted;padding:5px;">
Textabsatz mit Rahmendicke medium und Typ dotted.</p>

Textabsatz mit Rahmendicke medium und Typ dotted.

<p style="border-width:medium;border-color:#FF9999;
border-style:double;padding:5px;">
Textabsatz mit Rahmendicke medium und Typ double.</p>

Textabsatz mit Rahmendicke medium und Typ double.

<p style="border-width:8px;border-color:#9999FF;
border-style:groove;padding:5px;">
Textabsatz mit Rahmendicke 8px und Typ groove.</p>

Textabsatz mit Rahmendicke 6px und Typ groove.

<p style="border-width:6px;border-color:#66CC66;
border-style:ridge;padding:5px;">
Textabsatz mit Rahmendicke 6px und Typ ridge.</p>

Textabsatz mit Rahmendicke 6px und Typ ridge.

<p style="border-width:6px;border-color:#FF9999;
border-style:inset;padding:5px;">
Textabsatz mit Rahmendicke 6px und Typ inset.</p>

Textabsatz mit Rahmendicke 6px und Typ inset.

<p style="border-width:6px;border-color:#9999FF;
border-style:outset;padding:5px;">
Textabsatz mit Rahmendicke 6px und Typ outset.</p>

Textabsatz mit Rahmendicke 6px und Typ outset.

c) Workshops

• SELFHTML: border[-top, -right, -bottom, -left]-style (Rahmentyp)
  SELFHTML: Beispiel

• W3Schools: Beispiel: Set the style of the four borders

• Web Design Group: Syntax: border Style

4 Rahmenfarbe (border-color)

a) Bezeichnungen

• border color = Rahmenfarbe

b) Beispiel

<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>

xxxxx xxxxx xxxxx usw.

c) Workshops

• SELFHTML: border[-top, -right, -bottom, -left]-color (Rahmenfarbe)
  SELFHTML: Beispiel

• W3Schools: Beispiel: Set the color of the four borders

• Web Design Group: Border Color

5 Rahmen mit dem Code pre

⇒ Siehe auch "Text-Elemente/Formatierung mit pre"

a) Anwendung von pre class="text-box"

Bemerkungen zur Formatierung:

• Darstellung von ausgerichtetem Text in Normalschrift.
• Die Schrift ist "sans-serif" (und nicht wie bei "pre" standardmässig "monospace".
• Schwarzer Rahmen mit weissem Hintergrund.

1) Im Stylesheet befindet sich folgender Eintrag:

/* Ausgerichteter Text mit schwarzem Rahmen */
pre.text-box {font-family:sans-serif;
border-style:solid;border-width:2px;padding:5px;
border-color:#000000;background:#FFFFFF;color:#000000;}

2) Im Textbereich des Quelltextes wird geschrieben:

<pre class="text-box">
Darstellung von Text in einem schwarzen Rahmen
</pre>

3) Dann wird im HTML-Dokument folgendes dargestellt:

Darstellung von Text in einem schwarzen Rahmen

b) Anwendung von pre class="code"

Bemerkungen zur Formatierung:

• Die Schrift ist standardmässig "monospace".
• Die 4 Rahmen-Farben werden individuell festgelegt und nicht mit "inset" oder "outset" bestimmt.

1) Im Stylesheet befindet sich folgender Eintrag:

/* Darstellung von Codes */
pre.code {
border-style:solid; border-width:3px; padding:5px;
border-left-color:#999999; border-top-color:#999999;
border-right-color:#CCCCCC; border-bottom-color:#CCCCCC;
color:#000000;background:#EEEEEE;}

2) Im Textbereich des Quelltextes wird geschrieben:

<pre class="code">
Darstellung von Codes.
</pre>

3) Dann wird im HTML-Dokument folgendes dargestellt:

Darstellung von Codes.

c) Anwendung von pre class="style"

Bemerkung zur Formatierung:

• Schriftart "monospace"

1) Im Stylesheet befindet sich folgender Eintrag:

/* Darstellung Stylesheet */
pre.style {
border-style:inset; border-width:3px; padding:5px;
border-color:#FF9999;color:#000000;background:#FFFACD;}

2) Im Textbereich des Quelltextes wird geschrieben:

<pre class="style">
Darstellung von Text wie er im Stylesheet steht
</pre>

3) Dann wird im HTML-Dokument folgendes dargestellt:

Darstellung von Text wie er im Stylesheet steht

d) Anwendung pre class="quell"

Bemerkung zur Formatierung:

• Schriftart "monospace"

1) Im Stylesheet befindet sich folgender Eintrag:

/* Darstellung Quelltext */
pre.quell {
border-style:inset; border-width:3px; padding:5px;
border-color:#FF9999; background:#FAEBD7; color:#000000;}

2) Im Textbereich des Quelltextes wird geschrieben:

<pre class="quell">
Darstellung von Text wie er im Quelltext steht
</pre>

3) Dann wird im HTML-Dokument folgendes dargestellt:

Darstellung von Text wie er im Quelltext steht

e) Anwendung von pre class="php"

Bemerkung zur Formatierung:

• Schriftart "monospace"

1) Ansicht des Eintrages im Stylesheet:

/* Darstellung PHP */
pre.php {
border-style:inset; border-width:3px;  padding:5px;
border-color:#6666FF; background:#EFEFFF; color:#000000;}

2) Im Quelltext steht im Textbereich:

<pre class="php">
Darstellung der PHP-Angaben
</pre>

3) Im HTML-Dokument erscheint folgendes:

Darstellung der PHP-Angaben

6 Rahmen mit dem Code div

⇒ Siehe auch "Block-Element div"

a) Anwendung von div class="box-schwarz"

Bemerkungen zur Formatierung:

• Der Rahmen ist schwarz und der Hintergrund ist weiss.

1) Ansicht des Eintrages im Stylesheet:

/* Schwarzer Rahmen */
.box-schwarz {
border-style:solid; border-width:2px; 
padding:1em;
border-color:#000000 background:#FFFFFF; 
color:#000000;}

2) Im Quelltext steht im Textbereich:

<div class="box-schwarz">
<span style="font-size:1.2em; font-weight:bold; 
color:red">Titel</span><br>
Mitteilung
</div>

3) Im HTML-Dokument erscheint folgendes:

b) Anwendung von div class="box-rot"

Bemerkungen zur Formatierung:

• Der Rahmen ist rot und der Hintergrund ist weiss.

1) Ansicht des Eintrages im Stylesheet:

/* Roter Rahmen (vorne=outset) */
.box-rot {
border-style:solid; border-width:5px; padding:1em;
border-left-color:#FF3300; border-top-color:#FF3300;
border-right-color:#DB2122; border-bottom-color:#DB2122;
background:#FFFFFF; color:#000000;
text-align:center;

2) Im Quelltext steht im Textbereich:

<div class="box-rot"p>
<span style="font-size:1.2em; font-weight: bold; 
color:red">Titel</span><br>
Mitteilung
</div>

3) Im HTML-Dokument erscheint folgendes:

c) Anwendung von div class="box-blau"

Bemerkungen zur Formatierung:

• Der Rahmen ist blau und der Hintergrund ist hellblau.

1) Ansicht des Eintrages im Stylesheet:

/* Blauer Hintergrund und Rahmen (vorne=outset)*/
.box-blau {
padding:0.5em;
border-style:solid; border-width:3px;
border-left-color:#CCE3FF; border-top-color:#CCE3FF;
border-right-color:#99BBFF; border-bottom-color:#99BBFF;
background:#CCEEFF; color:#000000;
}

2) Im Quelltext steht im Textbereich:

<div class="box-blau">
<span style="font-size:1.2em; font-weight: bold; 
color:red">Titel</span><br>
Mitteilung
</div>

3) Im HTML-Dokument erscheint folgendes:

d) Anwendung von div class="box-gruen"

Bemerkungen zur Formatierung:

• Der Rahmen ist grün und der Hintergrund ist hellgrün.

1) Ansicht des Eintrages im Stylesheet:

/* Gruener Hintergurund und Rahmen (vorne=outset)*/
.box-gruen {
padding:0.5em;
display:block; border-style:outset; border-width:3px;
border-color:#99CC66; background:#CCFFCC; color:#000000;}

2) Im Quelltext steht im Textbereich:

<div class="box-gruen">
<span style="font-size:1.2em; font-weight: 
bold; color:red">Titel</span><br>
Mitteilung
</div>

3) Im HTML-Dokument erscheint folgendes:

e) Rahmen für Posteingang mit Code div class="box-gelb"

Bemerkungen zur Formatierung:

• Der Hintergrund ist gelb und der Rahmen ist rot.
• Die Rahmenbreite ist 70% von der Bildschirmbreite.

1) Ansicht des Eintrages im Stylesheet:

/* Gelber Hintergurund und roter Rahmen 
fuer Posteingang (vorne=outset)*/
.box-gelb {
width:70%;
display:block; border-style:outset; 
border-width:3px; padding:0.5em;
border-color:red; background:yellow; color:#000000;
}

2) Im Quelltext steht im Textbereich:

<div class="box-gelb">
<span style="font-size:1.2em; 
font-weight:bold; color:red">
Posteingang</span><br>
Name: Der Benutzer<br>
Betrifft: Testeingabe<br>
Mitteilung: Bla bla
</div>

3) Im HTML-Dokument erscheint folgendes:

7 Rahmen mit dem Code code

a) Beispiel 1: Rahmen mit code class="box-grau"

Bemerkungen zur Formatierung:

• Der Rahmen ist grau und der Hintergrund ist ebenfalls grau.
• Da die Schrift von code übernommen wird ist sie "monospace".
• Die Schrift ist mit "Fett" (bold) formatiert, weil der Code so formatiert ist, obwohl die "Box" nicht mit fett formatiert ist.

1) Ansicht des Eintrages im Stylesheet:

/* Grauer Hintergrund und Rahmen (vorne=outset)*/
.box-grau {
display:block; border:3px solid; padding:5px;
border-left-color:#CCCCCC; border-top-color:#CCCCCC;
border-right-color:#999999; border-bottom-color:#999999;
background:#EEEEEE; color:#000000;}

2) Im Quelltext steht im Textbereich:

<code class="code class="box-grau"p>
Dies ist ein Code
</div>

3) Im HTML-Dokument erscheint folgendes:

Dies ist ein Code

b) Beispiel 2: Rahmen mitten im Satz mit code class="box-grau"

Bemerkungen zur Formatierung:

• Der Rahmen ist mitten im Satz.

⇒ Siehe auch "Kasten/Rahmen"

Bemerkungen zur Formatierung:

1) Ansicht des Eintrages im Stylesheet:

/* Grauer Hintergrund und Rahmen (vorne=outset)*/
.box-grau {
display:block; border:3px solid; padding:5px;
border-left-color:#CCCCCC; border-top-color:#CCCCCC;
border-right-color:#999999; border-bottom-color:#999999;
background:#EEEEEE; color:#000000;}

2) Im Quelltext steht im Textbereich:

<p>Dies ist ein <code class="box-grau">
Text mit einem eingefügten Rahmen</code>
mitten im Satz.</p>

3) Im HTML-Dokument erscheint folgendes:

Dies ist ein Text mit einem eingefügten Rahmen mitten im Satz.

↑