2.5.8 Trennlinie (horizontal ruler)

1 Allgemein

a) Bezeichnungen

• hr = horizontal ruler = horizontale Trennlinie

b) Workshops

SELFHTML

• SELFHTML: Trennlinien
  SELFHTML: Trennlinien definieren
  SELFHTML: Beispiel
  SELFHTML: Trennlinien mit HTML gestalten
  SELFHTML: Beispiel
  SELFHTML: Trennlinien mit CSS gestalten
  SELFHTML: Beispiel

2 Standard-Trennlinie

a) Beispiel

<p>Text oberhalb </p>
<hr>
<p>Text unterhalb</p>

Text oberhalb

---

Text unterhalb

3 Trennlinien mit bestimmter Stärke (size)

a) Beispiel

<p>Text oberhalb</p>
<hr size="10">
<p>Text unterhalb</p>

Text oberhalb

---

Text unterhalb

4 Trennlinien mit bestimmter Länge (width)

a) Beispiel 1: Feste Trennlinien-Länge

<p>Text oberhalb</p>
<hr width="150">
<p>Text unterhalb</p>

Text oberhalb

---

Text unterhalb

b) Beispiel 2: Relative Trennlinien-Länge

<p>Text oberhalb</p>
<hr width="60%">
<p>Text unterhalb</p>

Text oberhalb (Linienlänge 60%)

---

Text unterhalb

5 Ausrichten von Text und Trennlinien

⇒ Siehe auch "Elemente ausrichten"

a) Beispiel 1: Links

<p>Text und Linie sind links</p>
<hr width="100" align="left">

Text und Linie sind links

---

b) Beispiel 2: Zentriert

<p>Text und Linie sind zentriert>/p>
<hr width="200" align="center">

Text und Linie sind zentriert

---

c) Beispiel 3: Rechts

<p>Text und Linie sind rechts ausgerichtet>/p>
<hr width="350" align="right">

Text und Linie sind rechts ausgerichtet

---

6 Trennlinien mit CSS formatiert

a) Mit class formatiert

• Diese Formatierung wird angewendet, wenn nicht alle Trennlinien mit dieser speziellen Formatierung formatiert werden sollen.
• Dies ist in der vorliegenden Website der Fall.

1) Eintrag im Stylesheet

hr.duenn {
background:#999; /* setzt die Farbe */
height:1px; /* ersetzt size=1  */
border:none; /* ersetzt noshade */
}

2) Angabe im Quelltext

<hr class="duenn">

3) Anzeige im Dokument

---

b) Nur für das Menü formatiert

• Diese Formatierung wird angewendet, wenn zum Beispiel nur im Menü diese Formatierung angewendet werden soll.
• Dies bedingt aber, dass das Menü mit id="menue" eingelesen wird.

1) Eintrag im Stylesheet

#menue hr {
background:#999; /* setzt die Farbe */
height:1px; /* ersetzt size=1  */
border:none; /* ersetzt noshade */
}

2) Angabe im Quelltext des Menüs

<ul id="menue">
<hr>
</ul>

3) Anzeige im Dokument: siehe "Menü"

c) Für den ganzen Inhalt formatiert

• Diese Formatierung wird angewendet, wenn alle Trennstriche im Inhalt so formatiert werden sollen.
• Diese Formatierung wurde in der vorliegenden Website nicht gemacht, da sonst die anderen Formatierungs-Beispiele nicht möglich sind.
• Diese Formatierung ist nur möglich, wenn der ganze Inhalt in einem div mit id="inhalt" steht.

1) Eintrag im Stylesheet

#inhalt hr {
background:#999; /* setzt die Farbe */
height:1px; /* ersetzt size=1  */
border:none; /* ersetzt noshade */
}

2) Angabe im Quelltext

<div id="inhalt">
<hr>
</div>

3) Diese Formatierung wurde in der vorliegenden Website nicht gemacht.

↑