nicht angemeldet
Mouseover-Buttons mit CSS
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.
-
Hi,
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.
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
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-
Hi,
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 }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>
<a class="b2" style="position:absolute; left:24px; top:56px" href="#"></a>
<a class="b3" style="position:absolute; left:24px; top:87px" 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.cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
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>
-
-
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?
a:focus, a:focus img {-moz-outline:0px;}
ab MOzilla 1.8a auch:
a:focus, a:focus img {outline:0px;}
MfG
Avalon-
Hi,
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?
a:focus, a:focus img {-moz-outline:0px;}
ab MOzilla 1.8a auch:
a:focus, a:focus img {outline:0px;}Es sollte aber nicht unerwähnt bleiben, daß damit das Navigieren per Tastatur erschwert bis unmöglich gemacht wird.
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
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?
a:focus, a:focus img {-moz-outline:0px;}
ab MOzilla 1.8a auch:
a:focus, a:focus img {outline:0px;}Es sollte aber nicht unerwähnt bleiben, daß damit das Navigieren per Tastatur erschwert bis unmöglich gemacht wird.
Hallo MudGuard,
Deine bisherigen Beiträge hier im Forum waren eigentlich nicht so schlecht, als daß Du nicht wüßtest, daß das so nicht stimmt, was Du hier erzählst. Die Usability wird durch das Unterdrücken der Markierung im MSIE mittels
onfocus="if(this.blur) this.blur;"
behindert. Mit der oben beschriebenen Methode gibt im Vergleich zur Navigation mit der Tastatur keine Unterschiede.MfG
Avalon-
Hi,
Es sollte aber nicht unerwähnt bleiben, daß damit das Navigieren per Tastatur erschwert bis unmöglich gemacht wird.
Deine bisherigen Beiträge hier im Forum waren eigentlich nicht so schlecht, als daß Du nicht wüßtest, daß das so nicht stimmt, was Du hier erzählst.
Nur weil DU das (noch?) nicht verstehst, ist meine Aussage nicht falsch.
Die Usability wird durch das Unterdrücken der Markierung im MSIE mittels
onfocus="if(this.blur) this.blur;"
behindert. Mit der oben beschriebenen Methode gibt im Vergleich zur Navigation mit der Tastatur keine Unterschiede.Ob die Markierung auf die eine oder die andere Art verschwindet, ist doch vollkommen egal - wenn sie weg ist, kann man nicht mehr erkennen, welcher Link gerade den Fokus hat.
Und damit ist die Tastaturnavigation zumindest erschwert, wenn nicht sogar unmöglich.
Es hilft ja u.U. noch nicht mal, mitzuzählen, wie oft man tab gedrückt hat, um zu wissen, welcher Link gerade den Fokus hat, denn es könnte ja anfangs per Javascript z.B. der 17. oder der 42. oder sonst ein Link schon fokussiert worden sein.cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Es hilft ja u.U. noch nicht mal, mitzuzählen, wie oft man tab gedrückt hat, um zu wissen, welcher Link gerade den Fokus hat, denn es könnte ja anfangs per Javascript z.B. der 17. oder der 42. oder sonst ein Link schon fokussiert worden sein.
Mit dem Einwand hatte ich schon gerechnet, aber nun bleib mal schön sachlich, auf die gleiche weise, wie man das outline um den Link verschwinden lassen kann, kann man ihn auch auf andere Weise hervorheben.
An der Methode liegt es dann also nicht, allerhöchsten an den Fähigkeiten oder dem Willen des Webdesigners.
Negativ in diesem Zusammenhang ist nur die von mir erwähnte Methode für den M$IE.
Insofern bist Du mit Deiner Bemerkung am Ziel vorbeigeschossen, ein vernünftiger Beitrag wäre gewesen:"ergänzend sollte man erwähnen, daß der fokusierte Link auf andere Weise hervorgeheben wird, um die usability nicht zu beeinträchtigen"
MfG
Avalon
-
-
-
-
-
-