Tipps und Tricks: Farbige Linien mit <hr>
Horizontale Linien mit <hr> müssen nicht in dem voreingestellten Einheitsschwarz dargestellt werden. Auch sie lassen sich mit CSS formatieren.
,
,
,
,
<hr style="border:solid #ff0000 1px;height:1px;"> <hr style="border:dashed #00ff00 1px; background-color:#aa0000;height:15px;"> <hr style="border:solid #00ffff 3px; background-color:#0000ff;height:10px;width:400px; text-align:left;"> <hr style="border:solid #ff0000 1px; background-color:#00ffff;height:4px;margin:30px 0px;">
Voreingestellt für das Für das <hr>-Tag ist ein 3D-Rahmen und ein transparenter Hintergrund.
Mit den border-Eigenschaften kannst du das Aussehen der Rahmen verändern, mit background-color den Hintergrund. Weitere Möglichkeiten sind z.B.:
- die Höhe: height
- die Breite: width
- Ausrichtung, wenn die Breite kleiner als 100% ist.: text-align
- Abstände zu anderen Elementen: margin
Hier findest du weitere Informationen zu <hr>:
W3C
W3Schools
Browser
Opera stellt die Linie grundsätzlich mit einem Rahmen dar. D.h. dass die Höhenangabe von einem Pixel für den Hintergrund verwendet
und dann zusätzlich ein Rahmen gezeichnet wird. Eine Rahmenbreite von 0px nützt nichts, da der Netscape dann keine Linie anzeigt.
Und der Netscape akzeptiert text-align nicht, wenn die Breite kleiner als 100% ist und positioniert
die Linie in dem Fall zentriert.
Schaue Dir also dieses Feature mit den gängigen Browsern an und entscheide, ob die Darstellungsunterschiede
für die Seite relevant sind.