Per CSS ein Bild vor und hinter Text

Hallo,

kann ich mit CSS z.B. bei allen Überschriften ein Bild vor und hinter den Text automatisch einfügen?
Das Ergebnis sollte eine Überschrift, die links und rechts mit einer Grafik (z.B. einem Stern) eingerahmt ist.

Gruß

Thomas

Hi,

kann ich mit CSS z.B. bei allen Überschriften ein Bild vor und
hinter den Text automatisch einfügen?

ja, mittels der Pseudo-Elemente :before und :after sowie der content-Eigenschaft. Unnötig zu erwähnen, dass der IE es nicht beherrscht; diese Dinge wurden ja auch erst anno 1998 zum Standard erhoben, also quasi gestern. Alle anderen CSS-fähigen Browser liefern aber die gewünschten Ergebnisse.

Cheatah

Hallo Cheatah,

danke Dir erst einmal für Deine Antwort. Kannst Du mir das noch in einem Beispiel erläutern, wie das genau funktioniert? Ich habe die beiden Pseudo-Elemente leider in keiner meiner Anleitungen gefunden.

Gruß

Thomas

so zum Beispiel

\<!-- 

b:before{content:"Anfang";color:#ff0000; background-image: url('http://www.wer-weiss-was.de/img/logo\_forum.gif');}
b:after{content:"Ende";color:#ff0000; background-image: url('http://www.wer-weiss-was.de/img/logo\_forum.gif');}

--\>**Irgendein Text, eingegrenzt von einem html-tag (oder einem class)**


vor dem und hinter dem ein Wort **steht**
 ...

allerdings musst Du dann evtl noch die höhe und breite des elements bestimmen und evtl sogar festlegen, dass das Bild nicht wiederholt wird…

… und hier noch der obligatoriche Link zu SELFHTML:

http://de.selfhtml.org/css/eigenschaften/pseudoforma…

Anmerkung des Verfassers: toll, was es so alles gibt, was man so alles machen kann - ähm, nein, machen könnte. Aber da gibt es nun mal diesen immer noch so weit verbreiteten IE (Warum? Bequemlichkeit? Nichtwissen? Ignoranz? Dummheit? Oder was?) der es sich anscheinend erlauben kann, Standarts einfach zu ignorieren.

Schade.

Bei ach so vielen anderen Produkten - mochten sie noch so gut sein - war das Nichteinhalten von Standarts letztlich der Todesstoß.

(OT) Re^4: Per CSS ein Bild vor und hinter Text

[…] Aber da gibt
es nun mal diesen immer noch so weit verbreiteten IE (Warum?
Bequemlichkeit? Nichtwissen? Ignoranz? Dummheit? Oder was?)

In vielen Fällen von allem etwas. Wohlgemerkt wird das oft auch von der Dummheit in der Chefetage diktiert (siehe „Peterprinzip“[1]), das sind nicht immer nur die armen User. Das wäre vielleicht mal ein netter Wahlspruch: „Mit Firefox und Opera fängst du dir vielleicht auch Würmer ein, aber es sieht wesentlich besser aus.“

[1] http://wwwstud.fh-zwickau.de/~rz/Reis0695/s4.htm

Hi,

Anmerkung des Verfassers: toll, was es so alles gibt, was man
so alles machen kann - ähm, nein, machen könnte. Aber da gibt
es nun mal diesen immer noch so weit verbreiteten IE

CSS ist für die Empfehlung der Darstellung zuständig. Es vermittelt also per se keinerlei relevante Information (vor Netscape 4 sollte man CSS beispielsweise gleich verstecken - es sieht nur nicht mehr gut aus, verloren geht dadurch aber nichts). Wo ist dann das Problem, wenn einzelne Effekte bei einem veralteten Browser nicht sichtbar sind?

(Warum?
Bequemlichkeit? Nichtwissen? Ignoranz? Dummheit? Oder was?)

Das dürften einige der wesentlichsten Gründe sein, und die Macht der Führungsebene wurde ja ebenfalls bereits genannt.

der es sich anscheinend erlauben kann, Standarts einfach zu
ignorieren.

Nein, die Standar_t_s stammen von Microsoft - im Gegensatz zu den Standar_d_s, die der IE geflissentlich ignoriert :wink:

Schade.

Wenn’s mal nur das wäre. Auch der IE 7, also der MS-Browser, der uns die nächsten ca. 3-5 Jahre allgegenwärtig begleiten wird, kann nicht mehr als der IE 5.6 (Microsoft nannte ihn 6.0). Es wurden zwei Bugs beseitigt, die PNG-Unterstützung um ein Detail erweitert - und das war’s. Der Rest ist GUI und die Verlagerung von Sicherheitsproblemen in andere Ebenen. Dummerweise ist auch nicht mit viel mehr zu rechnen: Von einer Beta zur Final wird nicht das Herzstück der Software neu programmiert. Overpromise, underdeliver. Danke, Microsoft.

Cheatah