nicht angemeldet
Hallo,
ich habe "versucht" eine Navigationsleiste mit CSS (alle Buttons inkl. Hover-Button sind aus einem GIF erzeugt) zu entwerfen. Mein Problem besteht darin, dass der Mouseover-Effekt nur dann funktioniert, wenn ich bspw. aus
<a class="b1" style="background: url(navi.gif) no-repeat 0px 0px; position:absolute; left:24px; top:25px" href="#"></a>
den Bereich "style="background: url(navi.gif) no-repeat 0px 0p" herausnehme. Jedoch werden dann logischerweise die Ausgangsbuttons nicht positioniert.
Der Quelltext sieht so aus:
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
body { background-color:#0000C6; color:#FFFFFF }
a { background: url(navi.gif) no-repeat; width:120px; height:28px }
a.b1:hover { background: url(navi.gif) no-repeat -120px 0 }
a.b2:hover { background: url(navi.gif) no-repeat -120px -28px }
a.b3:hover { background: url(navi.gif) no-repeat -120px -56px }
</style>
</head>
<body style="background-color:#0000C6; color:#FFFFFF">
<a class="b1" style="background: url(navi.gif) no-repeat 0px 0px; position:absolute; left:24px; top:25px" href="#"></a>
<a class="b2" style="background: url(navi.gif) no-repeat 0px -28px; position:absolute; left:24px; top:56px" href="#"></a>
<a class="b3" style="background: url(navi.gif) no-repeat 0px -56px; position:absolute; left:24px; top:87px" href="#"></a>
</body>
</html>
Aufbau der Datei "navi.gif"
|------------|-------------|
|Button1 |Button1 hover|
|------------|-------------|
|Button2 |Button2 hover|
|------------|-------------|
|Button3 |Button3 hover|
|------------|-------------|
Wie kann ich es am einfachsten realisieren, dass der Mouseover-Effekt richtig funktioniert und das GIF (inkl. des Austauschbildes) richtig positioniert wird?
Vielen Dank im Voraus.