- Hinweise zu den Tutorials:
- Bitte aus dem kopierten Quelltext:
<p class="bitte_loeschen">.....</p>und die Gestaltungsanweisungen dazu entfernen.
Grafische Navi 1
Ziel dieses Tutorials ist es, ein horizontales Menü zu erstellen, welches komplett aus Hintergrundgrafiken besteht. Damit das Menü bei abgeschalteten Grafiken noch funktioniert, wird der Linktext ganz normal in den Quelltext geschrieben.
Die Grafiken werden mithilfe der Image Replacement Technik nach Gilder/Levin über den Linktext geschoben.
Mit dem Grafikprogramm eurer Wahl erstellt ihr zuerst eine Grafik, welche beide Linkzustände beinhaltet (normal u. hover).
- Ein Linkzustand ist 140x40px groß.
- Die gesamte Grafik hat die Maße 140x80px.
Oben in der Grafik hockt der Normalzustand des Links und darunter der Hoverzustand.
So schaut eine Grafik aus:
Hier findest du die grafischesmenue_anfang.htm zum Quelltext rauskopieren.
Die benötigten Grafiken kannst du dir hier holen: grafischesmenue_grafiken.htm
Im Browser schaut es so aus:
Vor dem Linktext werden wieder leere spans eingesetzt, die später
die Hintergrundgrafik zugewiesen bekommen.
XHTML ergänzen:
<ul id="navi"><li id="navi01"><strong><span></span>Startseite </strong></li><li id="navi02"><a href="#"><span></span>Galerie</a> </li><li id="navi03"><a href="#"><span></span>Kontakt</a> </li></ul>
Bei der aktuellen Seite ist a gegen strong ausgetauscht worden, damit der Link nicht auf sich selber zeigt.
Jetzt geht’s ans gestalten.
CSS ergänzen:
li {float:left;width:140px;}a, strong {position:relative;display:block;width:100%;height:40px;text-decoration:none;font-weight:normal;overflow:hidden;}
a und strong haben position:relative; bekommen, damit sich das später absolut positionierte span mit der HG-Grafik daran orientieren kann.
Sie werden zu Blockelementen erhoben und kriegen die Breite von li und die Höhe der halben Grafik (ein Zustand halt!). overflow:hidden ist dafür, damit der Linktext des Markup’s bei Schriftvergrößerung nicht darunter hervorlugen kann.
Bitte CSS ergänzen:
#navi #navi01 a span {position:absolute;width:100%;height:40px;top:0;left:0;background:url(startseite.png) no-repeat 0 0;}
#navi #navi02 a span {position:absolute;width:100%;height:40px;top:0;left:0;background:url(galerie.png) no-repeat 0 0;}
#navi #navi03 a span {position:absolute;width:100%;height:40px;top:0;left:0;background:url(kontakt.png) no-repeat 0 0;}
Der Normalzustand der Links ist definiert worden. Die obere Hälfte der Grafik mit dem Normalzustand ist sichtbar. Durch position:absolute; verdeckt die Grafik den Linktext.
Bitte CSS ergänzen:
#navi #navi01 strong span {position:absolute;width:100%;height:40px;top:0;left:0;background:url(startseite.png) no-repeat 0 -40px;}
#navi #navi02 strong span {position:absolute;width:100%;height:40px;top:0;left:0;background:url(galerie.png) no-repeat 0 -40px;}
#navi #navi03 strong span {position:absolute;width:100%;height:40px;top:0;left:0;background:url(kontakt.png) no-repeat 0 -40px;}
Da bei dem Link der aktuellen Seite jeweils a durch strong ersetzt wurde, damit der Linktext der aktuellen Seite immer hervorgehoben ist, musste die CSS entsprechend geändert werden. Für strong wird der untere Teil der Grafik ins Bild gehoben.
Bitte CSS ergänzen:
#navi #navi01 a:hover span,#navi #navi01 a:focus span,#navi #navi01 a:active span,#navi #navi02 a:hover span,#navi #navi02 a:focus span,#navi #navi02 a:active span,#navi #navi03 a:hover span,#navi #navi03 a:focus span,#navi #navi03 a:active span {background-position:0 -40px;}
Der untere Teil der Grafik wird durch das hovern per background-position ins Bild geschoben. Jetzt müssen wir den Float noch clearen und schauen ob der IE ein Problem hat.
Bitte im Quelltext direkt vor </div> folgendes notieren:
<hr class="clear" />
Bitte CSS ergänzen:
.clear {clear:both;height:0;width:0;visibility:hidden;border:0;}
Jetzt sollte es so ausschauen:
Mmh.., und damit ist auch der IE einverstanden?
Der IE8 ja, der IE 6 und der IE 7 nö!
Die zwei zeigen unter den Menüpunkten eine Lücke. Außerdem haben sie vergessen beim hovern aus dem Pfeil eine Hand zu machen.
Beim IE 6 bleiben außerdem die Menüpunkte nach dem hovern in der gehoverten Position stehen.
Ein paar kleine Eintragungen im Conditional Comment schaffen da Abhilfe
Bitte den Conditional Comment ergänzen:
<!--[if lte IE 8]><style type="text/css">* html .clear { display:none; }*+html .clear { display:none; }* html li a span { cursor:hand; }*+html li a span { cursor:hand; }* html a:hover { background-position:0 0; }</style><![endif]-- >
Die ersten beiden Anweisungen lassen die Lücke unter den Menüpunkten verschwinden. Die .clear die wir zum Clearen definiert haben, wird für den IE 6/IE 7 aus dem Rennen genommen. Der IE 6/IE 7 schließt die Floats fälschlicherweise automatisch ein, wenn das umgebende Element HasLayout hat. Diesen Umstand machen wir uns hier zunutze.
Die nächsten beiden Anweisungen hängen dem IE 6/IE 7 die Hand beim Hovern an die Backe.
Die letzte Anweisung mutet unsinnig an, sorgt aber dafür, das beim IE6 die Menüpunkte nach dem Hovern wieder in die Ausgangspostion zurückspringen.
Ich hoffe das Tutorial ist so verständlich, das ihr euch von nun an ohne Probleme ein grafisches Menü basteln könnt.
- Kategorien:
- Navigationen, XHTML/CSS
- Tags:
- grafische, grafisches, menü, navi
- Kommentare:
- Kommentare verfolgen oder Kommentar abgeben
2 Kommentare und 7 Trackbacks/Pingbacks
Sprich und fürchte dich nicht:
« Image Replacement nach Gilder/Levin – Der Freelancer am Monitor in einsamen Räumen »
WOW
) !!!
Ich bin echt begeistert! Vielen Dank für die tolle Erklärung.
Was man nicht alles machen kann…tsts
Gruß
Hi cordi,
danke.
Vor allem was man nicht alles ohne Scripten zustandebringen kann!
[...] etwas kompliziertere Fall eines grafischen Menüs habe ich schon [...]
[...] [...]
[...] eine grafische navi solltest du etwas anders angehen. Guckst du hier. __________________ Blog oder [...]
[...] [...]
[...] ich dieses mithilfe von dem hier machen: Grafische Navi 1 oder ganz normal mit dem img-Tag und CSS? http://www.jbcompany.org forum.jbcompany.org Vielen Dank [...]
[...] [...]
[...] [...]