Überschriften mit CSS durch Bilder ersetzen

[Valentin Wirth]

Hallo,

Letztens bin ich durch http://www.csszengarden.com auf eine Methode gestoßen, um Überschriften im HTML Quelltext durch Bilder mittels CSS zu ersetzen. So kann man schöne kantengeglättete, individuelle Schriften mit genauen Buchstabenabstand verwenden ohne den Inhalt der HTML Seite zu verliehren. Das Verfahren ist nocheinmal genauer unter http://www.stopdesign.com/also/articles/replace_text/ beschrieben.

Ich fand den Ansatz sehr interessant und wollte ihn daher mal hier posten aber leider habe ich auch einige Probleme dabei entdeckt:

* Werden Bilder nicht geladen aber CSS interpretiert sieht man gar keine Überschriften

* bei normalen Ausdruck der Seite sind keine Überschriften zu sehen da der IE standartmässig keine Hintergrundbilder ausdruckt.

* es gibt wohl auch Probleme mit einigen Screenreadern die ich aber noch nicht hatte

Habt ihr Erfahrungen mit dem Verfahren? Oder etwas ähnliches bei dem beim Fehlen der Bilder wenigstens noch der HTML Text zu sehen ist?

mfg Valentin

[Jeena Paradies]

Hallo,

Guck dir mal
http://www.mezzoblue.com/tests/revised-image-replacement/
http://mezzoblue.com/archives/2003/12/12/accessible_i/
http://www.digital-web.com/features/feature_2003-08.shtml

Ich mache das auf meiner Seite auch so für den Seitenbanner: http://jeenaparadies.de

HTML:
 <div id="top"><span></span>Jeenas Home</div>
oder auf allen anderen Seiten außer der Startseite besser:
 <div id="top"><a href="/"></a>Jeenas Home</div>

CSS:
/* ----- Seitenkopf ---------------------------------- */
#top {
 height: 208px;
 position: relative;
 overflow: hidden;
}
#top a, #top span {
 background: url(../img/loewe.jpg) no-repeat;
 background-position: 50% 0;
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
}

Darüber haben wir aber auch schon mal diskuttiert siehe: </archiv/2004/3/76205/#m439051> ff

Grüße
Jeena Paradies

[Valentin Wirth]

Danke für die schnelle Antwort,

<div id="top"><span></span>Jeenas Home</div>

Die Variante macht mich schon mal glücklicher, da wenn Bilder nicht angezeigt werden wenigstens noch der Text da ist.

<div id="top"><a href="/"></a>Jeenas Home</div>

Wie hier verwendest du auf deiner Seite:

<div id="top"><a title="Zurück zur Startseite" href="../"></a>Jeenas Home</div>

Bringt der leer Link keine Probleme mit sich? Ist das valide? Oder sollte man wenigstens ein &nsbp; einfügen? Ich komme nur darauf weil ja z.B. leere <td></td> teils ignoriert werden.

Ich hab vorhin noch diese Übersicht gefunden die ich recht interessant fand:
http://levin.grundeis.net/files/20031203/ir.html

[willie.de]

hallö,

eigentlich wollte ich bei dem hier aufhören weiterzulesen: "The original technique (FIR) described in the body of this article is no longer recommended for use, as it makes the hidden text completely inaccessible for certain screen readers." (s. selfcode zu:} )

nungut, die geposteten threads und links und einige lesbarkeitstests haben mich zumindest interessiert aufhorchen lassen...

<div id="top"><span></span>Jeenas Home</div>
Die Variante macht mich schon mal glücklicher, da wenn Bilder nicht angezeigt werden wenigstens noch der Text da ist.

eben!

Bringt der leer Link keine Probleme mit sich?

nö. außer bei validation über seiten wie webmasterplan.de http://validator.w3.org/check?uri=http://webmasterplan.de *rofl*

Ist das valide?

der große validator sagt: ja.

Oder sollte man wenigstens ein &nsbp; einfügen? Ich komme nur darauf weil ja z.B. leere <td></td> teils ignoriert werden.

...nicht angezeigt statt ignoriert...

grüße aus Leipzig
willie.de

[Jeena Paradies]

Hallo,

<div id="top"><span></span>Jeenas Home</div>
Die Variante macht mich schon mal glücklicher, da wenn Bilder nicht angezeigt werden wenigstens noch der Text da ist.

Man hat halt dieses sinnfreie <span> drin. Mit dem <a> bin ich da schon viel zufriedener.

Oder sollte man wenigstens ein &nsbp; einfügen? Ich komme nur darauf weil ja z.B. leere <td></td> teils ignoriert werden.
...nicht angezeigt statt ignoriert...

Also ich habe es auf vielen Browsern ausprobiert und es hat eigentlich immer geklappt, außer IE 4 der zeigt das Bild nicht an und da lässt sich das a auch nicht anklicken, es ist einfach weg. Aber der macht ja noch andere komische Sachen wie float zu ignorieren und so weiter so dass mich das dann eher weniger stört wobei ja der Text dahinter angezeigt wird.

Grüße
Jeena Paradies

[Herbalizer]

Hi!

Weitere, wenn auch nicht so einschränkende Probleme, lassen sich bereits in folgendem Codeschnipsel begutachten:

<h2><span>The Beauty of <acronym title="Cascading Style Sheets">CSS</acronym> Design</span></h2>

1. Damit die Schrift bei aktiviertem CSS nicht sichtbar ist, wird sie in ein semantisch an dieser Stelle nicht sinnvolles span-Element gepackt.
2. Leider ist der zusätzliche Informationgehalt des Acronyms durch das Ausblenden flöten gegangen.

Eine Lösung für das Druckproblem sind evtl. Stylesheets für den Druck (entweder über @media-Regeln im CSS oder über das media-Attribut im link- oder style-Element), in denen die Schrift ein- und der Hintergrund ausgebelendet wird.

Gruß Herbalizer