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
Hier der reine HTML Code den wir später mittels CSS formatieren werden und die Überschrift durch ein Bild ersetzen werden.
<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>
Die Formatierung für den H2-Container in dem die Allgemeinen Sachen festgelegt werden die für jede Headline gleich sind.
h2 {
width:500px;
height:69px;
text-indent:-9999px;
float:left;
clear:both;
margin:40px 0 0 0;
}
Die Formatierung für den H2-Container .lorem.
h2.lorem {
background:url(../images/lorem.png) no-repeat;
}
Die Formatierung für den H2-Container .ipsum.
h2.ipsum{
background:url(../images/ipsum.png) no-repeat;
}
Nachteil dieser Methode ist, dass man für jede headline eine class festlegen muss.
LIVE DEMO
DOWNLOAD
Noch keine Kommentare.
MakeBetterWebsites, eine Ansammlung von Webseiten die mit gutem Design und sorgfältiger Umsetzung zu überzeugen wissen.. Eine gute Übersicht wenn man auf der Suche nach Inspiration ist.
www.makebetterwebsites.com
Das unabhängige E-Sports Portal unterstütze ich mit grafischer Arbeit in Form von Bannern und Werbemitteln. Auch bei der weiterentwicklung der Webseite werde ich mit einbezogen.
www.fragster.de
Lang war es getrennt doch unter dem Namen AREA241 ist es zusammen gewachsen - die BMX- und Skateszene Plauen. Hier ist alles zu finden was in der Szene abgeht. Meine Rolle ist die Webseite immer aktuell und ansprechend zu gestalten.
www.area241.com
Der Verein wurde von jungen Skatern und BMXern ins Leben gerufen um hier in Plauen einen Skatepark zu bauen und diesen auch zu betreuen. Als Mitgründer und Vorstandsmitglied fallen hier eine Menge Aufgaben in meinen Bereich.
www.zweiviereins.de
