dciwam.de / faq / css / css-linie

Linie mit CSS

Um eine Linie unter einen Absatz zu zeichnen weist man dem Absatz die CSS-Eigenschaft border-bottom zu.

Beispiel:

.linie {
  border-bottom-color: black;
  border-bottom-width: 3px;
  border-bottom-style:double;
}

<p class="linie">hello world</p>

Dies bewirkt unter dem Absatz eine doppelte schwarze Linie.

Beachte:
Der Klasse .linie könnte man natürlich noch andere Eigenschaften zuweisen; soll die Linie nur halb so breit sein wie der Bildschirm fügt man noch width:50% ein. Soll auch bei Browsern, die CSS nicht unterstützen, eine Linie angezeigt werden, kann man HR verwenden.

Damit in Browsern, die CSS unterstützen nicht zwei Linien dargestellt werden, weist man dem HR die CSS-Eigenschaft display:none zu:

hr {display:none}

Links

"CSS1 and the Decorative HR" von A.J.Flavell
http://ppewww.ph.gla.ac.uk/~flavell/www/hrstyle.html

Steffi Abel • abel@s.netic.de

Zum Seitenanfang

URL: http://dciwam.de/faq/css/css-linie | Letzte Änderung: 21.05.2009 | G. Schneider | Kontakt