Webseitenbau
Home
Site/Index
 
Web Webseitenbau
Google English français  
⬆2. 5. 5 Trennlinie (horizontal ruler)

2.5.5 Trennlinie
en Horizontal ruler
fr Ligne horizontale

-

1 Allgemein

-

a) Bezeichnungen

-

b) Workshops

SELFHTML

-

2 Standard-Trennlinie

-

a) Beispiel

1) Angabe im Quelltext des HTML-Dokumentes:

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

2) Anzeige im HTML-Dokument:

Text oberhalb oberhalb der Trennlinie


Text unterhalb unterhalb der Trennlinie

-

3 Trennlinien mit bestimmter Stärke (size)

-

a) Beispiel

1) Angabe im Quelltext des HTML-Dokumentes:

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

2) Anzeige im HTML-Dokument:

Text oberhalb


Text unterhalb

-

4 Trennlinien mit bestimmter Länge (width)

-

a) Beispiel 1: Feste Trennlinien-Länge

1) Angabe im Quelltext des HTML-Dokumentes:

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

2) Anzeige im HTML-Dokument:

Text oberhalb


Text unterhalb

-

b) Beispiel 2: Relative Trennlinien-Länge

1) Angabe im Quelltext des HTML-Dokumentes:

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

2) Anzeige im HTML-Dokument:

Text oberhalb (Linienlänge 60%)


Text unterhalb

-

5 Ausrichten von Text und Trennlinien

⇒ Siehe auch "Elemente ausrichten"

-

a) Beispiel 1: Links

1) Angabe im Quelltext des HTML-Dokumentes:

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

2) Anzeige im HTML-Dokument:

Text und Linie sind links


-

b) Beispiel 2: Zentriert

1) Angabe im Quelltext des HTML-Dokumentes:

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

2) Anzeige im HTML-Dokument:

Text und Linie sind zentriert


-

c) Beispiel 3: Rechts

1) Angabe im Quelltext des HTML-Dokumentes:

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

2) Anzeige im HTML-Dokument:

Text und Linie sind rechts ausgerichtet


-

6 Trennlinien mit CSS formatiert

-

a) Mit class formatiert

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

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

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.