css (RSS)

CSS: Überschriften durch Bilder ersetzen

February 24, 2008 in css

Die Verwendung von Schriften im Web ist sehr begrenzt. Mit Grafiken als Überschrift kann man zwar diesen Weg umgehen, wobei jedoch einige Nachteile entstehen. CSS bietet nun Möglichkeiten auch die Nachteile von normalen Textüberschriften und Bildüberschriften entgegen zu treten.

Probleme bei Überschriften aus einfachen Text

Das Hauptproblem bei normalen Textüberschriften im Internet ist die begrenzte Auswahl von Schriftarten, die dafür verwendet werden können. Um den Ansprüchen zu genügen und sich von anderen Überschriften abzuheben reichen die wenigen Schriftarten meist nicht mehr unbedingt aus.

Probleme mit grafischen Überschriften

Eine vielfach angewandte Methode um jede Schrift mit Effekten usw. zu verwenden, ist der Gebrauch von Grafiken als Überschriften. Sie ermöglichen eine genaue Kontrolle des Aussehens im Browser und sind nicht so empfindlich gegen die vielen Internet Browser und bleiben immer gleich - egal was kommt.

Doch da sind wir wieder beim Thema Browser! Grafiken können durch den Benutzer im Browser deaktiviert werden und eine einseitige Verwendung von Grafiken als Überschrift kann letztendlich dazu führen, dass der Leser einen unstrukturierten und unübersichtlichen Text vor sich hat. Denn selbst wenn man den “ALT - TAG” (<­img scr=”" alt=”Beschreibung” …> anwendet, bleibt der Leser auf der Strecke.

Ferner sind Überschriften mit Text enorm wichtig für Suchmaschinen, die ihre Internetseite kreuzen und Informationen auflesen. Die Überschriften der Webseite werden mit dem Titel, der Beschreibung und der Schlüsselwörter (Keywords) der Webpage verglichen. Bei den meisten Suchmaschinen wird so und mit anderen Faktoren über ihre Platzierung in der Suchmaschine entschieden.
So nun stehen wir vor der harten Entscheidung, welche Art von Überschrift verwendet werden sollte und kommen zur im weiteren Teil zu einer Lösung. Let’s go!

Image Replacement mit CSS

Mit CSS und ein paar Tricks ist es nun möglich geworden Bildüberschriften ohne Sorge frei zu benutzen. Die “Fahrner Image Replacement” - Technik, kurz FIR, wurde genau für diesen Zweck entwickelt.
Diese Technik beinhaltet die Verwendung von Textüberschriften mittels Eigenschaften vom XHTML Seitenaufbau, und ersetzt die Textüberschriften durch ein Hintergrundbild dank CSS. Die Bilder werden als Hintergrundbild mit CSS definiert. Dazu wird das Hintergrundbild auf “no-repeat” gesetzt. Die Textüberschrift wird mit dem SPAN-Tag versteckt, bei welchem die Anzeigeoption auf nein gesetzt wird (Display: none).

Beispiel:

<­style>
#ersteueberschrift {
background-image: url(ersteueberschrift.jpg);
background-repeat: no-repeat;
height: 50px;
width: 300px;
}
#ersteueberschrift span {
display: none;
}
<­/style>
<­h1 id=”ersteueberschrift”><­span>Großer Überschrift Text<­/span><­/h1>

Probleme mit der Verfahrenstechnik

Natürlich gibt es auch hier wieder einige Probleme die die Technik mit sich bringt. Zum Einen werden Überschriften die auf “display: none” gesetzt werden von manchen Programmen oder Browsern nicht angezeigt.
Zum Anderen passiert der selbe Effekt bei Browsern die zwar CSS unterstützen, aber die Anzeige von Grafiken deaktiviert haben. Besucher bzw. Leser können so weder die normale Textüberschrift, noch die Bildüberschrift sehen.

Anwendung der weiterentwickelten FIR-Technik

Anstatt nun den Span-Tag mit display:none zu benutzen um die Bildüberschrift zu verstecken, verwenden wir einfach den CSS-Befehl text-indent und setzen ihn auf “-100 em“. Dies schiebt nun die Grafik nach Links aus dem Browserfenster hinaus und der Effekt ist im Prinzip der selbe. Gar nicht mal so schwer, oder?

Veränderter-Code:

<­style>
#ersteueberschrift {
background-image: url(ersteueberschrift.jpg);
background-repeat: no-repeat;
height: 50px;
width: 300px;
text-indent: -100em;
}
<­/style>
<­h1 id=”ersteueberschrift”>Großer Überschrift Text<­/h1>

Nun haben auch Programme oder Browser nichts mehr zu meckern. Zwar bleibt immer noch eine geringe Wahrscheinlichkeit das Benutzer in ihrem Browser Grafiken oder CSS deaktiviert haben, aber damit müssen wir bis weitere Lösungen gefunden werden erstmal leben. Sicherlich ist diese Technik noch nicht ganz ausgereift und bedarf einer Verbesserung, jedoch bietet sie auch endlich die Möglichkeit, mit den ganzen Vorteilen, Bildüberschriften zu verwenden und somit die strukturielle Übersicht für den Leser zu erhöen.

Related topics:
Share: Digg | Del.icio.us | Stumble | Reddit | Float | Technorati
Enjoyed post? Please support and buy us a milk
Whatever you want to say!
Leave a Comment »
Leave a comment!
Note: You can also use your free Gravatar avatar on Knowtebook! Please also read our Publishing Policy before posting.

Yes, I would like to receive notification on incoming comments!

Trackbacks/Pings
Trackback-URL

CSS: Überschriften durch Bilder ersetzen | mediaplana
Mar 10, 2008
ID: 1

[…] Eine vielfach angewandte Methode um jede Schrift mit Effekten usw. zu verwenden, ist der Gebrauch von Grafiken als Überschriften. Sie ermöglichen eine genaue Kontrolle des Aussehens im Browser und sind nicht so empfindlich gegen die vielen Internet Browser und bleiben immer gleich - egal was kommt. (more…) […]