Längere Beiträge sollten für eine bessere Lesbarkeit strukturiert werden. Ich verwende dazu in der Regel Absätze, Bilder oder/und Überschriften. Gelegentlich bietet es sich aber auch an, Artikel durch eine Linie optisch aufzuteilen. Ich gebrauche dieses Stilmittel, z. B. um am Ende eines Beitrages die abschließenden Fragen an die Besucher visuell abzugrenzen (Beispiel). Ein anderes Mal bot sich dieses Trennmittel bei einer eingeschobenen Passage an, um diese als eigenständige Geschichte von dem Rest des Beitrages abzugrenzen. Um zu verdeutlichen, was ich damit meine, schaut einfach mal in diesen Beitrag auf meiner bunten Blogwelt.

Um diese Linie einzufügen, verwende ich den Befehl <hr> in der html-Ansicht des Editors. Vielleicht werdet ihr aber nun feststellen, dass in Eurem Blog gar keine Linie erscheint. Zumindest war das sowohl auf meinen WordPress-Blogs als auch auf meiner Joomla-Seite der Fall. Um diese “erscheinen zu lassen” ist lediglich ein kleiner Zusatz im CSS erforderlich.

Erst einmal habe ich einen grundsätzlichen hr-Befehl eingegeben:

hr{
border:2px;background-color:#DFDFDF;color:#DFDFDF;width:auto;
}

Um speziell die Trennlinie in einem Beitrag zu formatieren zusätzlich:

.post hr{
border:2px;
color:#DFDFDF;
background-color:#D7D7D7;
width:90%;
height:3px;
margin-top:30px;
margin-bottom:30px;
}

oder Beispiel in der bunten Blogwelt

.post hr{
border:2px;
color:#F26521;
background-color:#F26521;
width:100%;
height:3px;
margin-top:30px;
margin-bottom:30px;
}

Das Schöne dabei ist, dass die Abstände der Trennlinie zu den Textpassagen angepasst werden können. Natürlich könnte auch eine Grafik als Trenner ausgewählt werden. Das ist es auch schon und nun dürfte auch bei Euch die Trennlinie sichtbar sein.