Text mit Grafik ersetzen

[G. J. C. Schmöck]

Hi,

ich habe diverse Elemente der Sorte <h1>Meine Überschrift</h1> u.s.w. in meiner Quelle, die mal so
   h1 {font: 500% Impact, sans-serif; font-weight: normal;}

mal so
   h1 {text-transform: lowercase; text-align: right;}

in mehreren alternativen Stylesheets gestylt werden.  Ihr kennt das ja.  Für weitere Stylesheets möchte ich Grafiken einsetzen, weil die CSS-eigenen Mittel hier den Geist aufgeben: mit einer Grafik lässt sich eben gestalterisch viel mehr machen.

Die background-Eigenschaft leistet im Prinzip das, was ich will:
  h1 {background: url("img/schicke_ueberschrift") no-repeat;}

Allerdings klebt dann ja der eigentliche Text noch störend im Vordergrund.  Spiele ich mit display oder visibility rum, dann ist das ganze Element weg bzw. versteckt, nebst Hintergrundgrafik, was ich ja auch nicht will.  Wie löse ich das Problem mit CSS?  Falls das nicht geht, zeigt bitte andere Ansätze auf.

[emu]

Hallo!

h1 {background: url("img/schicke_ueberschrift") no-repeat;}
Wie löse ich das Problem mit CSS? Falls das nicht geht, zeigt
bitte andere Ansätze auf.

Was spricht gegen

<h1><img src="selfforum.png" alt="SELFHTML Forum"></h1>

selbstverständlich mit alt-Text? Das wäre erstens logisch
ausgezeichnet, zweitens einfacher zu lösen und drittens für
Nicht-CSS-Browser lesbar.

emu
[...]

[Thomas Luethi]

... Für weitere Stylesheets möchte ich Grafiken einsetzen, weil die CSS-eigenen Mittel hier den Geist aufgeben: mit einer Grafik lässt sich eben gestalterisch viel mehr machen.

(noch ;-)
=> CSS 3, SVG...

Die background-Eigenschaft leistet im Prinzip das, was ich will:
  h1 {background: url("img/schicke_ueberschrift") no-repeat;}

Finde ich eine schlechte Idee. Was passiert, wenn der Benutzer CSS zwar an hat, aber keine Grafiken laedt?

Allerdings klebt dann ja der eigentliche Text noch störend im Vordergrund.  Spiele ich mit display oder visibility rum, dann ist das ganze Element weg bzw. versteckt, nebst Hintergrundgrafik, was ich ja auch nicht will.  Wie löse ich das Problem mit CSS?

Ich glaube, dass es keine wirklich zuverlaessige Methode gibt, insbesondere fuer den Fall, dass jemand zwar CSS eingeschaltet hat, aber keine Grafiken anzeigen laesst.
(Dieser Fall mag selten sein, aber man sollte ihn trotzdem beruecksichtigen).

Falls das nicht geht, zeigt bitte andere Ansätze auf.

Wenn die Schrift und die Schrifteffekte mir so wichtig sind, dass ich es "unbedingt" so haben will (z.B. fuer ein Logo), mache ich es so:

<h1><img src="schicke_ueberschrift.png" alt="Schicke Ueberschrift"></h1>

Im CSS definiere ich fuer h1 den schicken Stil, so gut das (heute) geht, insbesondere Farben (Vorder- und Hintergrund) und Schriftart.

Resultat:
Mit Grafiken und CSS: Schicke Ueberschrift wie gewuenscht, Hintergrund in der passenden Farbe.

Mit Grafiken und ohne CSS: Schicke Ueberschrift, daneben Hintergrund evtl. in "falscher" Farbe.

Ohne Grafiken, mit CSS: In Opera 5, 6 und 7 wird (auf dem Raum, wo die Grafik waere) der Alt-Text mit dem im CSS definierten Stil angezeigt. In MS IE 5.0/5.5 wird der Alt-Text mit kleiner Schrift angezeigt, wobei immerhin die Farben aus dem CSS uebernommen werden. In Mozilla 1.0 wird leider gar nichts angezeigt (was vermutlich falsch ist - vielleicht verhalten sich neuere Versionen besser).

Ohne Grafiken, ohne CSS:
Der Alt-Text wird als normaler H1 angezeigt.
(Mozilla 1.0 zeigt auch so nichts an)

Auch in Lynx und fuer Suchmaschinen-Robots sollte der Alt-Text somit als H1 angezeigt bzw. indiziert werden.

HTH, mfg
Thomas