Deko-Linien - CSS statt HTML

[Thomas Luethi]

Hallo Kunert,

Ich habe versucht einen Text zwischen 2 Linien zu stellen
( --- Text --- ).

Diese Linien sind für mich schmückendes Beiwerk.
Darum würde ich in HTML die HR-Elemente weglassen
und die Linie als Hintergrundbild mit CSS einfügen.
Falls es sich beim Text um eine Überschrift handelt,
sollte man ihn als H1, H2 u.s.w. auszeichnen.

HTML:
<h2 class="bsp2"><div>Test 2</div></h2>

CSS:

h2.bsp2 { background:url("linie-horizontal.gif") 0% 50% repeat-x; }  
h2.bsp2 div { width:39%; margin-left:auto; margin-right:auto; padding:0 0.2em; color:#000000; background-color:#ffffff; }

Die erste Regel setzt für das H2-Element als ganzes das Hintergrundbild.
Die zweite Regel setzt für die innere DIV-Box die Breite, die Zentrierung (mit den Margins), etwas Abstand rechts und links (Padding) sowie wieder einen einfarbigen (hier weissen) Hintergrund, damit hinter dem Text selbst kein Hintergrundbild ist.
Die Breite der Box könnte man übrigens auch in px oder em festlegen.

Wenn die Box mit dem Text immer nur so breit sein soll, wie nötig, wäre auch folgendes möglich:

HTML:
<h2 class="bsp3"><span>Test 3</span></h2>

CSS:

h2.bsp3 { text-align:center; background:url("linie-horizontal.gif") 0% 50% repeat-x; }  
h2.bsp3 span { padding:0 0.2em; color:#000000; background-color:#ffffff; }

Siehe Online-Beispiel

Freundliche Grüsse, Thomas