 horizontale Linien mit CSS formatieren
Ich habe lange gesucht, viel gelesen und im Web gestöbert. Dabei ist mir eine zufriedenstellende Lösung für die Formatierung einer horizontalen Linie von nur 1 Pixel Höhe nicht begegnet.
|
|
<hr> horizontale Linie mit CSS formatieren
Hier sehen Sie eine Standard-Linie, eingefügt mit der HTML-Anweisung
<hr noshade size="1">
Nun könnte man weitere Attribute (z.B. für eine Farbe) eintragen. Das Ergebnis ist allerdings nicht in jedem Browser gleich.
Mal zeigte der Browser einen Kasten statt einer Linie, mal gab es einen zusätzlichen schwarzen Strich oberhalb der Linie. Mal stimmte die Hintergrundfarbe nicht. Das sah ungefähr so aus:
In einem Browser gab es einen Schatten, in dem anderen eine Doppellinie. Schien eine Lösung in einem Browser perfekt, stellte der andere die gewünschte Ein-Pixel-Linie fehlerhaft dar.
Also habe ich ein wenig experimentiert und mir gedacht, ich schalte (obwohl ich einen Rand will) erst einmal alle Ränder (oben, links, unten, rechts) ab, um dann den einzelnen Rand oben wiederum zuzulassen, ... und die Sache mit der Hintergrundfarbe habe ich dann auch noch selbst bestimmt.
border:none;
border-top: 1px solid #E00060;
color: #FFFFFF;
background-color: #FFFFFF;
height: 1px;
Die Experimente mit den Einstellungen haben zwar 2 Stunden meines Lebens gekostet, aber der Erfolg war mein Lohn. Endlich erzielte ich im IE und auch im FF mein gewünschtes Ergebnis.
Die Linienart konnte ich zudem frei bestimmen:
- solid (durchgezogen)
- dashed (gestrichelt)
- dotted (gepunktet)
3 Möglichkeiten
a Ich legte eine CSS-Formatierung für das HTML-Tag <hr> fest:
Farbe: dunkelrot, Höhe: 1 Px, Typ: durchgezogene Linie
<style type="text/css">
<!--
hr {
border:none;
border-top: 1px solid #E00060;
color: #FFFFFF;
background-color: #FFFFFF;
height: 1px;
}
-->
</style>
Das Ergebnis für ein <hr>-Tag mit generellen CSS-Angaben (gilt für alle hr):
b Ich legte eine CSS-Unterklasse für 'linie' fest:
Farbe: blau, Höhe: 1 Px, Typ: durchgezogene Linie, Margins (rechts + links) 80 Px
<hr class="linie">
<style type="text/css">
<!--
.linie {
border:none;
border-top: 1px solid #0090E0;
background-color:#FFFFFF;
height:1px;
margin:0px 80px 0px 80px;
}
-->
</style>
Das Ergebnis für ein <hr>-Tag mit der CSS-Klasse 'linie':
c Ich notierte eine CSS-Inline Formatierung im HTML-Tag <hr>:
Farbe: violett, Höhe: 1 Px, Typ: gepunktete Linie
<hr style=" hier stehen die CSS-Angaben ">
border:none;
border-top: 1px dotted #9000E0;
background-color: #FFFFFF;
height: 1px;
Das Ergebnis für <hr> mit inline-Formatierung:
Beispiel:
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
 Ornament als Trenner
|
Home • CSS • horizontale Linie <hr>
Quellcode