nicht angemeldet
Hallo Andreas,
Das Hintergrund-Bild brauchst Du nicht x-mal angeben, auch das no-repeat nicht, das reicht einmalig im ersten a {}. Nutze die Kaskade.
Es sollte reichen, die background-position für die einzelnen Klassen und Hoverzustände anzugeben.<a class="b1" style="position:absolute; left:24px; top:25px" href="#"></a>
Wenn Du sowieso jedem Link seine eigene Klasse verpaßt, kannst Du auch die Positionierungs-Angaben in den style-Bereich im head verschieben.
Und dann würde ich statt einmalig verwendeter Klassen eher id-Attribute verwenden.
ich habe den Quelltext etwas optimiert. Mir war es zwar möglich das Hintergrundbild in "a { }" zu notieren. Dennoch muss ich "background-position" in jeder Klasse notieren, was den Quelltext nicht gerade schlanker macht. Daher habe ich den alten Zustand belassen.
Noch eine Frage zu den von dir angesprochenen IDs. Wie könnte dies exemplarisch aussehen? Meinen Überlegungen zufolge wird dadurch den Quelltext nicht kleiner, da die Positionierung für jeden Button einzeln vorgenommen werden muss. Oder habe ich einen Denkfehlen?
Ich habe diese Konstruktion mit dem IE6, Mozilla 1.7.x, Opera 7.5 getestet. Gibt es eventuell mit anderen Browsern/Betriebsystemen (Netscape 4.x kann vernachlässigt werden) Probleme?
<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 }
ul, li { text-indent:-900px; list-style-type:none }
a, a:focus { width:120px; height:28px; -moz-outline:0px }
a.b1 { background:url(navi.gif) 0px 0px; position:absolute; left:24px; top:25px }
a.b1:hover { background:url(navi.gif) -122px 0px }
a.b2 { background:url(navi.gif) 0px -28px; position:absolute; left:24px; top:56px }
a.b2:hover { background:url(navi.gif) -122px -28px }
a.b3 { background:url(navi.gif) 0px -56px; position:absolute; left:24px; top:87px }
a.b3:hover { background:url(navi.gif) -122px -56px }
</style>
</head>
<body>
<ul>
<li><a class="b1" href="#1">Button1</a></li>
<li><a class="b2" href="#2">Button2</a></li>
<li><a class="b3" href="#3">Button3</a></li>
</ul>
</body>
</html>