KS Webdesign – Der Blog

Sehr viele Websites haben einen header mit einer Grafik oder einem Foto, um das Ganze optisch zu verschönern. Ist ja auch kein Problem innerhalb der H1-Überschrift statt eines Textes ein Bild hineinzupflanzen.

Nur eine winzige Kleinigkeit stört dabei: Google kann mit Bildern nix anfangen, d.h. der header schaut zwar toll aus, aber für Google gibt es nichts zu indexieren.

Es wäre doch super wenn das Bild und der Text im header stehen würden.
Euch gefällt der style mit dem Bild und Google hätte auch was zu stöbern.

Eine Möglichkeit wäre die Image Replacement Technik nach Gilder/Levin. Gut, eins nach dem anderen.

Hier findest du die gilder_levin_anfang.htm zum Quelltext rauskopieren.

Die benötigte Grafik kannst du dir hier holen: gilder_levin_grafik.htm

Im Browser schaut es so aus:

Der Quelltext des headers bietet dieses Bild:

Das Bild werden wir als Hintergrundgrafik einem Element zuweisen und dieses Element werden wir absolut positionieren und einfach über den Text schieben.

Das H1-Element kommt nicht in Frage, weil sonst der Text noch zu sehen wäre. Also brauchen wir ein zusätzliches Element das die Hintergrundgrafik bekommt, in diesem Fall ein leeres <span>.

Bitte den Quelltext ergänzen:

Das leere span bekommt die Hintergrundgrafik und wird absolut positioniert. Weil absolute Elemente von allen anderen Elementen komplett ignoriert werden, schwebt es dann praktisch über dem Text.

Damit es im sichtbaren Bereich nicht nach ganz oben links abhaut, braucht es ein Element an dem es sich orientieren kann. Da bietet sich h1 an.

Wenn wir h1 relativ positionieren, orientiert sich sein absolut positioniertes Kind (span!!) daran.

Oder anders gesagt ein absolut positioniertes Element (span) braucht ein relativ positioniertes Elternelement (h1), damit es sich daran orientieren kann.

Bitte CSS ergänzen:

Jetzt sollte es so ausschauen:

Nicht schön aber selten!

Allerdings einer schießt wieder quer. Ratet mal wer??

Der Internet Explorer (Wer auch sonst?!) und zwar der IE6 und der IE7. Beide zeigen oberhalb des Bildes eine kleine Lücke.

Ist aber kein Problem. Eine kleine Anweisung im Conditional Comment eingetragen schafft Abhilfe.

Conditional Comment ergänzen:

Jetzt paßt alles. War doch gar nicht so schwer, oder?

Diese Technik läßt sich nicht nur beim header oder beim footer anwenden. Damit könnt ihr z.B. auch eine Navigation verschönern. Aber das ist dann ein anderer Artikel, den ich bei Interesse eurerseits gerne hier erstellen würde.