Der <hr>-Tag in HTML ist eine unkomplizierte und komfortable Art, Inhalte auf der Webseite durch eine horizontale Linie voneinander abzutrennen. Wer es farbiger beziehungsweise differenzierter mag, kann auch mit einer Alternative aus CSS arbeiten.
Dabei wird ein leerer Div-Container per CSS-Klasse gestaltet. Neben der Höhe und der Breite des Containers, die für die Größe der Trennlinie gebraucht werden, kann durch Farbgebung des Hintergrundes und der Rahmen oben und unten mehrfarbige Trennlinien erzeugen. Eine feine Linie, die aus drei dünnen Linien in blau, gelb und rot gestaltet werden soll, wird mit der folgenden Klasse erstellt:
.trenner{
width:500px;
height:2px;
background-color:yellow;
border-top:2px blue solid;
border-bottom:2px red solid;
font-size:0px;
}
Dabei werden die drei feinen Linien durch die Rahmen oben und unten sowie den Hintergrund des DIV generiert. Die Höhe wird auf einen durch drei teilbaren Wert gesetzt und jeweils ein Drittel der Gesamthöhe entfallen auf die Rahmen des DIVs. Wichtig bei dieser Deklaration ist die Schriftgröße. Sie muss unbedingt auf null gesetzt werden, da sonst die Fläche des Divs automatisch auf die Standardgröße der Schrift gebracht wird. Der Höhenwert wird vom Browser dabei ignoriert.
Um die Linie auf die Webseite zu bekommen, muss folgendes in die HTML-Datei eingetragen werden:
<div class=trenner></div>
