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.
Pingback: Grafische Navi 2 | KS Webdesign der Blog
Pingback: Grafimen
Pingback: Anonymous
Pingback: Anonymous
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!
Pingback: Blizzing - Bewertung
Pingback: Textabstand nach oben in FF und IE unterschiedlich - XHTMLforum
Pingback: Zwei unterschiedliche Divs umschliessen - XHTMLforum
Hi,
vielen Dank für das praktische tutorial!
Eine Frage kommt nun doch auf – wie kommt es, dass am ende das menü einzeilig ist? ich sehe kein “display: inline” oder ähnliches!?
merci
Hi Julian,
durch Float!
Mit display:inline hat man nicht so viel Kontrolle über die Darstellung.
Schau doch mal hier, ab Punkt 10 werden alle möglichen Arten von Menüs erklärt.
Hier vielleicht noch etwas Grundllagenlektüre, wo man beim Lernen direkt mitbasteln kann.
Pingback: meine Webseite - Seite 2 - XHTMLforum