LinkBack URL
About LinkBacks
ZitierenHi,
wenn ich das richtig sehe soll das ein grafisches Menü werden.
Ich geb dir mal ein Beispiel, wie man sowas verwirklicht:
Erstellung eines einfachen, horizontalen, grafischen Menüs, wo der Text auch im Bild ist:
Mit Photoshop wird eine Grafik in der Größe von 120x80px erstellt. Sie beherbergt beide Linkzustände. Der eigentliche Link ist somit 120x40px groß und enthält jeweils auch den Linktext in Form z.B. einer schönen Schreibschrift.
Normalzustand ist oben in der Grafik, der Hoverzustand darunter.
Doctype ist "strict" um immer im Standardmodus zu sein.
Beim Link der gerade aktuellen Seite wird <a> gegen <strong> ausgetauscht, damit er nicht auf sich selber zeigt.
Ein leeres <span> wird vor dem Linktext eingefügt, es bekommt später die HG-Grafik zugewiesen.
Die HG-Grafik soll per CSS den Linktext verdecken. Die dafür benötigte Technik ist eine Image-Replacement-Technik nach Gilder/Levin
XHTML:
Die Abstände werden erstmal auf null gesetzt. Die <ul> bekommt eine Breite und wird zentriert. <li> floatet , bekommt eine Breite und das Listenzeichen ausgeschaltet:Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Grafisches Menü</title> </head> <body> <ul> <li id="navi01"><strong><span></span>Startseite</strong></li> <li id="navi02"><a href="#"><span></span>Kontakt</a></li> <li id="navi03"><a href="#"><span></span>Galerie</a></li> </ul> </body> </html>
<a> und <strong> bekommen position:relative; damit sich das später absolut positionierte <span> mit der HG-Grafik daran orientieren kann.Code:* { padding:0; margin:0; } ul { width:400px; margin:2em auto; } li { float:left; width:120px; list-style-type:none; }
overflow:hidden ist dafür damit bei Schriftvergrößerung der Linktext des Markup's nicht darunter hervorlugen kann.
Es wird zum Blockelement erhoben und kriegt die Breite von <li> und die Höhe der halben Grafik (ein Zustand halt!):
Der Normalzustand und der hervorgehobene Zustand der gerade aktuellen Seite wird definiert. Mit position:absolute verdeckt die Grafik den Linktext:Code:a, strong { position:relative; overflow:hidden; display:block; width:100%; height:40px; }
Der untere Teil der Grafik wird durch das "hovern" per background-position ins Bild geschoben:Code:#navi01 a span { position:absolute; width:100%; height:40px; top:0; left:0; background:url(startseite.jpg) no-repeat 0 0; } #navi01 strong span { position:absolute; width:100%; height:40px; top:0; left:0; background:url(startseite.jpg) no-repeat 0 -40px; } #navi02 a span { position:absolute; width:100%; height:40px; top:0; left:0; background:url(kontakt.jpg) no-repeat 0 0; } #navi02 strong span { position:absolute; width:100%; height:40px; top:0; left:0; background:url(kontakt.jpg) no-repeat 0 -40px; } #navi03 a span { position:absolute; width:100%; height:40px; top:0; left:0; background:url(galerie.jpg) no-repeat 0 0; } #navi03 strong span { position:absolute; width:100%; height:40px; top:0; left:0; background:url(galerie.jpg) no-repeat 0 -40px; }
Mmh..., und damit ist auch der IE einverstanden??Code:#navi01 a:hover span, #navi01 a:focus span, #navi02 a:hover span, #navi02 a:focus span, #navi03 a:hover span, #navi03 a:focus span { background-position:0 -40px; }
Nicht ganz:
Er hat aber plötzlich vergessen wie es geht, das beim überfahren des Links aus dem Pfeil eine Hand werden muss.
Das wird ihm per CC wieder beigebracht.
Außerdem bleibt die Grafik des gerade gehoverten Menüpunktes im IE6 nach dem hovern oft in der hover-position stehen
und springt nicht zurück auf die "Normal-Position".
Der dafür definierte Hack mit background-position mutet unsinnig und absurd an, hilft aber.
Es ist evtl. darauf zu achten, das die Regel nur auf das betreffende Menü beschränkt werden sollte.Code:<!--[if lte IE 7]> <style type="text/css"> ul a span { cursor:hand; } * html a:hover { background-position:0 0; } </style> <![endif]-->
Das kann sichergestellt werden, indem die ul eine id bekommt und die Regel per Nachfahrenselektor
auf das betroffene Menü angewendet wird.
Hoffe es ist verständlich beschrieben.
koslowski
