Über mich

Startseite arrow Tipps & Tricks arrow Horizontale Trennlinie mit CSS gestalten

Horizontale Trennlinie mit CSS gestalten

Dienstag, 11. September 2007
Geschrieben von Armin Vieweg
Es gibt viele Mittel und Wege eine horizontale Linie zu erzeugen, doch nur eine ist syntaktisch richtig und von HTML vorgegeben: <hr>

Das Problem an dem <hr>-Tag ist, dass es in manchen Browsern sehr unschön anzusehen ist. Um mit Stylesheet die horizontale Linie von HTML zu gestalten müssen mehrere Faktoren gesetzt werden, damit es in allen gängigen Browsern korrekt angezeigt wird.

hr {
  background-color:#FF0000;
  color:#FF0000;
  border:#FF0000;
  height:1px;
}


Dieser Code gibt in allen gängigen Browsern eine rote horizontale Linie mit einer Breite von 100% (angepasst an den Content in dem sie sich befindet) und einer Höhe von einem Pixel.

So sieht das Ergebnis dann aus:



Es wird nicht empfohlen leere DIVs dafür zu missbrauchen oder das über ein 1x1 Pixel großes Bild zu lösen, was in der Horizontalen gestreckt wird.

HTML bietet die Möglichkeit, warum diese auch nicht nutzen? Und dank CSS, können wir die Linie überall schön aussehen lassen.


  Keine Kommentare vorhanden
Letzte Aktualisierung ( Dienstag, 11. September 2007 )
 
< Zurück   Weiter >