Diese Seiten sind Teil von Bachsau’s Archiv.
Die hier beschriebenen Praktiken entsprechen nicht mehr dem Stand der Technik!
Bitte nutzen Sie für aktuelle Projekte das fortlaufend aktualisierte SELFHTML-Wiki.

SELFHTML

Trennlinien

Informationsseite

nach unten Trennlinien definieren
nach unten Trennlinien mit HTML gestalten
nach unten Trennlinien mit CSS gestalten
nach unten Weitere Informationen

 nach unten 

HTML 2.0XHTML 1.0MS IE 2.0Netscape 1.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 Trennlinien definieren

Trennlinien dienen der optischen Abgrenzung von nicht unmittelbar zusammengehörigen Textabschnitten oder allgemein zur Auflockerung. Eine Trennlinie erzeugt einen eigenen Absatz.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Trennlinien definieren</title>
</head>
<body>

<p>Hier ist ein Abschnitt zu Ende.</p>
<hr>
<p>Und hier beginnt etwas Neues.</p>

</body>
</html>

Erläuterung:

<hr> fügt eine Trennlinie ein (hr = horizontal rule = Querlinie). Dabei ist es egal, ob das Tag am Ende der Zeile des vorherigen Absatzes steht, oder in einer eigenen Zeile (wie im Beispiel), oder am Anfang des folgenden Absatzes.

Beachten Sie:

Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das hr-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <hr />. Weitere Informationen finden Sie im Kapitel Kapitel XHTML und HTML.

nach obennach unten

HTML 3.2deprecated (missbilligt)XHTML 1.0Netscape 1.1MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 Trennlinien mit HTML gestalten

Mit Hilfe diverser HTML-Attribute im <hr>-Tag können Sie eine Trennlinie auffälliger gestalten. Diese Attribute sind allerdings allesamt als deprecated eingestuft und sollen künftig aus dem HTML-Standard entfallen. Empfohlen wird die Gestaltung von Trennlinien mit CSS.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Trennlinien mit HTML gestalten</title>
</head>
<body>

<p>Hier ist ein Abschnitt zu Ende.</p>
<hr noshade width="300" size="3" align="left">
<p>Hier beginnt etwas Neues.</p>

</body>
</html>

Erläuterung:

Durch das Attribut noshade erreichen Sie, dass der Browser die Trennlinie massiv und durchgezogen, also nicht-schattiert anzeigt (noshade = unschattiert). Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das Attribut in der Form noshade="noshade" notieren, da XML-basierte Sprachen keine Attribute ohne Wertzuweisung erlauben.
Weitere Informationen dazu im Kapitel Kapitel XHTML und HTML.

Durch das Attribut width (width = Breite) erreichen Sie, dass der Browser die Trennlinie so breit anzeigt wie angegeben. Sie können eine Zahl oder einen Prozentwert angeben. Mit einer Zahl, z.B. 300, erzwingen Sie, dass die Trennlinie so viel Pixel breit dargestellt wird wie angegeben. Mit einem Prozentwert erreichen Sie, dass die Trennlinie maximal so viel Breite des Anzeigefensters einnimmt wie angegeben. Für eine prozentuale Angabe notieren Sie hinter der Zahl einfach ein Prozentzeichen (%).

Durch das Attribut size (size = Größe) können Sie die Höhe (Dicke) der Trennlinie bestimmen. Die Voreinstellung beträgt 2 Punkt. Mit dem Wert 1 erzwingen Sie also eine besonders dünne Trennlinie, mit Werten über 2 können Sie dickere als die normalen Trennlinien erzeugen.

Mit align="left" erreichen Sie, dass die Trennlinie linksbündig ausgerichtet wird (align = Ausrichtung, left = links). Mit align="right" wird die Trennlinie rechtsbündig ausgerichtet (right = rechts) und mit align="center" zentriert (Voreinstellung). Das Ausrichten von Trennlinien ist allerdings nur in Verbindung mit dem Attribut width sinnvoll, da die Trennlinie ansonsten stets über die gesamte verfügbare Breite geht.

Der Internet Explorer interpretiert darüber hinaus noch das Attribut color. Erlaubt ist dabei eine Seite Farbangabe. Dieses Attribut hat jedoch nie zum HTML-Standard gehört.

nach obennach unten

HTML 4.0XHTML 1.0Netscape 6.0MS IE 5.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 Trennlinien mit CSS gestalten

Das <hr>-Tag können Sie auch mit CSS gestalten. Das ist strikt HTML-Standard-konform und Sie haben noch deutlich mehr Gestaltungsmöglichkeiten als mit HTML-Attributen.
Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man Kapitel CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang z.B. folgende CSS-Eigenschaften:

Seite Ausrichtung und Absatzkontrolle
Seite Außenrand und Abstand
Seite Rahmen
Seite Positionierung und Anzeige von Elementen

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Trennlinien mit CSS gestalten</title>
</head>
<body>

<p>Hier ist ein Abschnitt zu Ende.</p>

<hr style="width:300px; color:yellow; background-color:yellow; height:5px;
  margin-right:0; text-align:right; border:1px dashed blue;">

<p>Hier beginnt etwas Neues.</p>

</body>
</html>

Erläuterung:

Das hr-Element erhält im Beispiel eine Breite von 300 Pixeln, eine Höhe von 5 Pixeln, wird rechtsbündig ausgerichtet (mittels margin-right:0 und text-align:right für Browser, die ersteres nicht umsetzen), wird in gelber Farbe dargestellt (mittels color und background-color) und erhält noch einen gestrichelten blauen Rahmen drumherum.

Beachten Sie:

Internet Explorer 5.0 stellt den Rahmen nicht dar.

nach obennach unten

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie genaue Angaben darüber, wo Trennlinien vorkommen dürfen, welche Attribute sie haben können und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz für Trennlinien
Seite Attribut-Referenz für Trennlinien

 nach oben
weiter Seite Ältere Elemente zur Schriftformatierung
zurück Seite Allgemeine Elemente für Textbereiche
 

© 2007 Seite Impressum

Originaladresse dieses Dokuments: http://de.selfhtml.org/html/text/trennlinien.htm