Hi,
das Problem mit dem verschieben der HG-Grafik per background-position und das der Linktext dann oft zu weit oben ist kenne ich.
Eine mögliche Lösung ist:
Das ist ein einfaches Beispiel eines grafischen Menüs. In diesem Fall ohne Gilder/Levin, da der Linktext nicht in der Grafik hockt sondern nur normal im Quelltext steht, d.h. die Grafik bildet nur den Hintergrund zum Linktext.
Das span wird benötigt um den Linktext später auch vertikal per padding in der Grafik richtig zu positionieren.
Quelltext:
<ul id="navigation">
<li id="navi01"><strong><span>Startseite</span><strong></li>
<li id="navi02"><ahref="leistungen.htm"><span>Leistungen</span>
</a></li>
<li id="navi03"><a href="kontakt.htm"><span>Kontakt</span></a></li>
</ul>
a wurde auf der aktuellen Seite durch strong ersetzt, damit der Link der akt. Seite nicht auf sich selber zeigt.
[FONT="][FONT=Arial][SIZE=2]Die Menügrafik ist 190x100px groß und beeinhaltet in der oberen Hälfte den Normalzustand der Links und in der unteren Hälfte den hover/focus-Zustand der Links.
Sollte der active-Zustand auch noch mit drauf, wäre die Grafik 190x150px groß und würde vertikal alle drei Zustände beherbergen.
Dann müsste aber dieser Zustand natürlich auch noch extra deklariert werden[/SIZE][/FONT].
[/FONT]Die ul bekommt eine feste Breite.
#navigation {
width:240px;
Die Listenpunkte bekommen Breite und Höhe entsprechend den Abmessungen der Grafik bezogen auf einen Linkzustand.
#navi01,
#navi02,
#navi03 {
width:190px;
height:50px;
}a und strong bekommen display:block und die volle Größe des Elternelements ( li! ) zugewiesen. Durch text-align:center wird die Schrift horizontal in der Grafik ausgerichtet
#navi01 a,
#navi01 strong,
#navi02 a,
#navi02 strong,
#navi03 a,
#navi03 strong {
display:block;
width:100%;
height:100%;
text-align:center;
}Damit der aktuelle Menüpunkt immer hervorgehoben ist bekommt strong die Deklaration des hover/focus-Zustandes zugewiesen:
#navi01 strong,
#navi02 strong,
#navi03 strong {
background:url(grafik.gif) no-repeat 0px -50px;
}Der Normalzustand der Links wird deklariert:
#navi01 a,
#navi02 a,
#navi03 a {
background:url(grafik.jpg) no-repeat 0 0;
}Deklaration des hover/focus-Zustandes. Der untere Teil der Grafik wird per background-position nach oben geschoben:
#navi01 a:hover,
#navi01 a:focus,
#navi02 a:hover,
#navi02 a:focus,
#navi03 a:hover,
#navi03 a:focus {
width:100%;
height:100%;
color:#2e5c89;
background:url(../images/navi.jpg) no-repeat 0px -50px;
}span bekommt display:block und entsprechendes padding-top damit der Linktext auch vertikal in der Grafik richtig positioniert wird:
#navigation #navi01 a span,
#navigation #navi01 strong span,
#navigation #navi02 a span,
#navigation #navi01 strong span,
#navigation #navi03 a span,
#navigation #navi01 strong span, {
display:block;
padding-top:15px;
}Sollte auch im IE funktionieren, da alles „Layout“ hat.
Werte sind nur Beispielwerte, mußt du noch für dich anpassen.
koslowski
edit. sorry das der Quelltext in einer Reihe steht. Umbrüche hatte ich eingefügt. Sehr seltsam.
