- Hinweise zu den Tutorials:
- Bitte aus dem kopierten Quelltext:
<p class="bitte_loeschen">.....</p>und die Gestaltungsanweisungen dazu entfernen.
Image Replacement nach Gilder/Levin
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:
<div id="kopf"><h1>Überschrift</h1></div>
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:
<div id="kopf"><h1><span></span>Überschrift</h1></div>
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:
h1 {position:relative;width:800px;height:172px;}h1 span {position:absolute;width:100%;height:100%;background:green url(gilder_levin.png) no-repeat left top;}
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:
<!--[if lte IE 8]><style type="text/css">* html h1 { line-height:normal; }*+html h1 { line-height:normal; }</style><![endif]-->
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.
- Kategorien:
- XHTML/CSS
- Tags:
- Gilder Levin, Image Replacement
- Kommentare:
- Kommentare verfolgen oder Kommentar abgeben
[...] Grafiken werden mithilfe der Image Replacement Technik nach Gilder/Levin über den Linktext [...]
[...] [...]
[...] [...]
[...] [...]
[...] [...]
[...] [...]
[...] richtig gesehen habe nicht der Fall. In der CSS-FAQ ist ein Beispiel zu genau diesem Fall, was auf Gilder/Levin basiert, meiner Meinung nach die beste und eleganteste Image Replacement Technik. Das Video habe [...]
[...] <!– navigation Ende –> Wozu die Aktion mit "hidden"? Mach lieber sowas: Image Replacement nach Gilder/Levin Im Fall von Kontakt erkennt Google (falls Du darauf abzielst) beim Kontaktlink das: [...]
[...] Schau dir doch mal an, wie man eine gute grafische Navi macht. Die grundlegende Technik ist eine Image Replacement Technik nach Gilder Levin. Wenn du viel mit Grafiken machst solltest du diese Technik draufhaben. Mit Conditional Comments [...]
[...] [...]
[...] [...]
[...] [...]