nicht angemeldet
Hallo Andreas,
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.Wieso sollte es logisch sein? Nur weil die Definition des Hintergrunds nicht im Style-Attribut steht, ändert sich doch an der Positionierung nichts.
Daß der :hover-Effekt nicht funktionieren kann, ist logisch - das style-Attribut hat eine wesentlich höhere Specificity als jeder Selektor, also wird es immer gewinnen.
leider habe ich nicht allzu viel Erfahrung mit der Positionierung von Bildern unter CSS.
Ich habe es erstmal damit probiert:
<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 { background:url(navi.gif) no-repeat 0px 0px }
a.b1:hover { background: url(navi.gif) no-repeat -120px 0px }
a.b2 { background:url(navi.gif) no-repeat -0px -28px }
a.b2:hover { background: url(navi.gif) no-repeat -120px -28px }
a.b3 { background:url(navi.gif) no-repeat 0px -56px }
a.b3:hover { background: url(navi.gif) no-repeat -120px -56px }
</style>
</head>
<body style="background-color:#0000C6; color:#FFFFFF">
<a class="b1" style="position:absolute; left:24px; top:25px" href="#"></a>
<a class="b2" style="position:absolute; left:24px; top:56px" href="#"></a>
<a class="b3" style="position:absolute; left:24px; top:87px" href="#"></a>
</body>
</html>
Damit funktioniert es erstmal... Kann man dies noch eleganter (mit weniger Quelltext) lösen? Z.B. die Positionierung des Ausgangsbutton in <a class="b1" ... href="#"></a> vornehmen?
Beim Testen unter Mozilla viel mir darüber hinaus auf, dass der Button nach dem anklicken mit einer gestrichelten Line umrahmt ist. Kann man dies unterdrücken?
Gruß
Daniel