CSS formatierte horizontale Linien
    
HOME
Quellcode ZURÜCK SITEMAP  

 horizontale Linien mit CSS formatieren

Ich habe lange gesucht, viel gelesen und im Web gestöbert. Dabei ist mir eine zufriedestellende Lösung für die Formatierung einer horizontale Linie von nur 1 Pixel Höhe nicht begegnet. 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:



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;
Dabei 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)


a) Ich legte eine CSS-Formatierung für das HTML-Tag <hr> fest:

Farbe: dunkelrot, Höhe: 1 Px, Typ: duchgezogene Linie 
hr {
border:none;
border-top: 1px solid #E00060;
color: #FFFFFF;
background-color: #FFFFFF;
height: 1px;
}
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: duchgezogene Linie, Margins (rechts + Links) 80 Px 
<hr class="linie">

.linie {
border:none;
border-top: 1px solid #0090E0;
background-color:#FFFFFF;
height:1px;
margin:0px 80px 0px 80px;
}
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.

NACH OBEN