nicht angemeldet
* zentrieren mit margin-left: auto, margin-right: auto
* keinen Hintergrund festlegen --> transparent
* einfarbige Grafiken mit border-left und border-right bestimmen
* mehrfarbige Grafiken mit border-image oder ::before und ::after
Die Striche/Grafiken sollen ja horizontal verlaufen (vom Seitenrand bis zur Überschrift), mit border-left / border-right bekomme ich na nur senkrechte Striche. Border-image unterstützen zusätzlich wiederum nicht alle Browser. Mit :before und :after kann ich zwar meine horizontale Grafik einbinden, aber nur mit fester Größe. Manchmal ist der Abstand Seitenrand-Überschrift 100px, manchmal 150px, usw.
HTML:
<h1><span>Überschrift</span></h1>CSS:
h1 { background: #FFFFFF url(ornament.gif) repeat-x 0 50%; }
h1 span { background: #FFFFFF; }
>
> > Ah, danke für die Antwort. Das Ganze klappt aber nur solange der Hintergrund, auf dem sich h1 und span befinden, einfarbig ist.
>
> wie kommst du darauf? Das h1-Element geht, solange man nichts dagegen unternimmt, über die ganze verfügbare Breite und stellt den Hintergrund zur Verfügung. Und das span-Element ist nur so breit ist wie sein Inhalt und überdeckt den h1-Hintergrund mit seiner eigenen Hintergrundfarbe (oder seinem Hintergrundbild). Eventuell möchtest du dem h1-Element noch text-align:center geben, damit sein Inline-Inhalt, also das span-Element, in der Mitte sitzt.
Das span-Element soll aber keinen Hintergrund haben. Die Hintergründe sind nämlich folgendermaßen verteilt:
Seitenhintergrund -> darüber: Wrapper-BG (0.9 Transparenz weiß) -> darüber: H1 mit evtl. Strich/Grafik rechts und links.
Wenn ich dem span-Element nun einen Hintergrund zuweise setzt es sich vom Wrapper ab, da man dort dann keine Transparenz mehr hat. Hier mal zur Verdeutlichung ein Link:
[Beispielseite](http://technosatz.de/download/hwk/index.php?option=com_content&view=article&id=2&Itemid=2)
Gemeint sind hier die h4-Überschriften ("interaktive Animation während des Balls", "Die perfekte musikalische Begleitung
zum „Welcome“ im Foyer",...)
Der Martin