My name is David Hellmann
I do design & development and I love it.

In Zeiten in denen Browser immernoch nur ein paar wenige Schriften unterstützen ist man doch des öfteren darauf angewiesen, das man gewisse Texte als Grafiken darstellen muss. Ein einfaches Beispiel könnte sein, wenn Headlines in der Hausschrift des Unternehmens dargestellt werden sollen. Aber auch rein ästhetische Gründe können hierbei eine Rolle spielen. Im Grunde scheint ja damit alles geklärt zu sein denkt man aber dem ist nicht so. Auf den ersten Blick schaut zwar alles bestens aus und es scheint auch zu funktionieren doch was ist mit den Leuten die Grafiken deaktiviert haben? Oder den Suchmaschinen, denen gefällt es sicher auch besser zwischen einem h2-Tag einen Text zu finden anstatt einer Grafik.

LIVE DEMO DOWNLOAD

Der HTML Aufbau

Hier der reine HTML Code den wir später mittels CSS formatieren werden und die Überschrift durch ein Bild ersetzen werden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="wrapper">
<h2 class="lorem">
Lorem ipsum
</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nullam commodo pharetra lacus. Suspendisse potenti. ...
</p>
<h2 class="ipsum">
Ipsum dolor sit
</h2>
<p>
Proin risus nisi, auctor non, gravida rhoncus, pellentesque
vitae, nisi. Nulla metus. ...
</p>
</div>

h2

Die Formatierung für den H2-Container in dem die Allgemeinen Sachen festgelegt werden die für jede Headline gleich sind.

1
2
3
4
5
6
7
8

h2 {
width:500px;
height:69px;
text-indent:-9999px;
float:left;
clear:both;
margin:40px 0 0 0;
}

h2.lorem

Die Formatierung für den H2-Container .lorem.

1
2
3

h2.lorem {
background:url(../images/lorem.png) no-repeat;
}

h2.ipsum

Die Formatierung für den H2-Container .ipsum.

1
2
3

h2.ipsum{
background:url(../images/ipsum.png) no-repeat;
}

Nachteile dieser Methode

Nachteil dieser Methode ist, dass man für jede headline eine class festlegen muss.

LIVE DEMO DOWNLOAD