nicht angemeldet
Bilder-Link mit Hover-Effekt (CSS-Problem)
Hallo,
ich wollte die Textlinks meines Seitenmenüs gegen Bilder-Links mit Hover-Effekt tauschen.
Als beste methode schien mir folgende:
Ich habe in meiner externen CSS-datei definiert:
a.news{height: 18px; width: 150px; border-width: 0;}
a.news img {background: url(http://beta.vega-server.de/pics/menu/news.gif) top left no-repeat;}
a.news:hover img {background: url(http://beta.vega-server.de/pics/menu/news_select.gif) top left no-repeat;}
Auf meiner Hauptseite habe ich dann :
<a class="news" href="index.php"><img src="pics/blank.gif" alt="News"></a>
Soweit, sogut. Ich habe einen Grafik-Button der beim hovern sein Bild ändert.
Nun die Probleme:
1. Ich will(muss) den Button ganz links oben in einem div platzieren.(Wer die HP anschaut, weis wie es dann aussehen soll), aber ich habe einen Abstand von ca. 3-4px nach links und nach oben.
Auch mit margin und padding überall auf 0 gesetzt, habe ich diesen Abstand. Wie bekomme ich den weg?
2. Obwohl ich in der css-klasse "border-width: 0;" definiert habe, habe ich einen Rahmen um den Button. Er verhällt sich wie meine allgemeine definition von <a>, die ich für alle anderen Links auch beibehalten möchte:
a:link {text-decoration: none; color : #0a3c64;}
a:visited {text-decoration: none; color : #0a3c64;}
a:active {text-decoration: none; color : #0a3c64;}
a:hover {text-decoration: underline; color : #DD6900;}
Aber wiso tut er dass. Bindet die Klasse nicht mehr als die allgemeine Definition? Und, wie bekomme ich diesen Rahmen weg?
Die Seite mit dem Problem könnt ihr unter http://beta.vega-server.de anschauen.
Danke schonmal im Voraus,
Slide
-
hi,
Ich habe in meiner externen CSS-datei definiert:
a.news{height: 18px; width: 150px; border-width: 0;}
a.news img {background: url(http://beta.vega-server.de/pics/menu/news.gif) top left no-repeat;}
a.news:hover img {background: url(http://beta.vega-server.de/pics/menu/news_select.gif) top left no-repeat;}Auf meiner Hauptseite habe ich dann :
<a class="news" href="index.php"><img src="pics/blank.gif" alt="News"></a>Wozu hast du überhaupt noch ein Bild in dem Link - wenn es nur als Platzhalter dient? Das ist genauso pfui, wie die alten "spacer.gif" in Tabellenlayouts.
Gebe gleich den Links die Hintergrundbilder.
Achtung: Um Inline-Elementen wie <a> eine Breite/Höhe zuweisen zu können, musst du sie als block formatieren. Also display:block, floaten lassen, oder absolut positionieren. (Ersteres ist vermutlich nicht das gewünschte, wenn Links nebeneinander stehen sollen, letzteres auch oftmals unvernünftig. Bleibt float als vermutlich beste Alternative.)- Ich will(muss) den Button ganz links oben in einem div platzieren.(Wer die HP anschaut, weis wie es dann aussehen soll), aber ich habe einen Abstand von ca. 3-4px nach links und nach oben.
Auch mit margin und padding überall auf 0 gesetzt, habe ich diesen Abstand. Wie bekomme ich den weg?
Prüfe zunächst, ob das Probleme ohne die überflüssigen blank-Bilder in den Links immer noch besteht.
- Obwohl ich in der css-klasse "border-width: 0;" definiert habe, habe ich einen Rahmen um den Button.
Natürlich, weil der für verlinkte Bilder im Default-CSS des Browsers definiert ist. Ohne Bilder sollte sich auch dieses Problem erledigt haben.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo wahsaga.
Wozu hast du überhaupt noch ein Bild in dem Link - wenn es nur als Platzhalter dient? Das ist genauso pfui, wie die alten "spacer.gif" in Tabellenlayouts.
Welche Alternative bleibt, ohne das Bild des :hover-Status ins HTML einzubinden?
Einen schönen Dienstag noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
30 Days to becoming an Opera8 Lover -- Keyboard Shortcuts
Meine Browser: Opera 8.50 | Firefox 1.0.7 | Lynx 2.8.5 | Konqueror 3.3.2 | Netscape 4.7 | IE 6.0
-
hi,
Welche Alternative bleibt, ohne das Bild des :hover-Status ins HTML einzubinden?
a:link { background-image:...; }
a:hover { background-image:...; }gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo wahsaga.
Welche Alternative bleibt, ohne das Bild des :hover-Status ins HTML einzubinden?
a:link { background-image:...; }
a:hover { background-image:...; }Und Ohne CSS sehen wir?
(Anmerkung: der Link soll keinen normalen Text enthalten.
Also kein <a href="foo.bar">Foo</a>)Einen schönen Dienstag noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
30 Days to becoming an Opera8 Lover -- Keyboard Shortcuts
Meine Browser: Opera 8.50 | Firefox 1.0.7 | Lynx 2.8.5 | Konqueror 3.3.2 | Netscape 4.7 | IE 6.0
-
hi,
Und Ohne CSS sehen wir?
Den normalen Textinhalt des Links.
(Anmerkung: der Link soll keinen normalen Text enthalten.
Also kein <a href="foo.bar">Foo</a>)Doch, natürlich soll er.
Alles andere wäre Unfug.gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo wahsaga.
Und Ohne CSS sehen wir?
Den normalen Textinhalt des Links.
[...]
Alles andere wäre Unfug.
In Bezug auf das HTML ja.
Rein optisch lässt sich mit einem Bild aber mehr anfangen, als mit reinem Text, welcher zudem noch den Standardschriften im Web unterliegt.Einen schönen Dienstag noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
30 Days to becoming an Opera8 Lover -- Keyboard Shortcuts
Meine Browser: Opera 8.50 | Firefox 1.0.7 | Lynx 2.8.5 | Konqueror 3.3.2 | Netscape 4.7 | IE 6.0
-
hi,
In Bezug auf das HTML ja.
Rein optisch lässt sich mit einem Bild aber mehr anfangen, als mit reinem Text, welcher zudem noch den Standardschriften im Web unterliegt.Eben, deshalb wird der Text ja, sofern CSS aktiviert ist, durch Hintergrundbilder ersetzt.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo wahsaga.
In Bezug auf das HTML ja.
Rein optisch lässt sich mit einem Bild aber mehr anfangen, als mit reinem Text, welcher zudem noch den Standardschriften im Web unterliegt.Eben, deshalb wird der Text ja, sofern CSS aktiviert ist, durch Hintergrundbilder ersetzt.
Wie das?
Du lässt den Text beim :hover-Status verschwinden, so dass lediglich das Hintergrundbild des :hover-Status sichtbar ist?Einen schönen Dienstag noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
30 Days to becoming an Opera8 Lover -- Keyboard Shortcuts
Meine Browser: Opera 8.50 | Firefox 1.0.7 | Lynx 2.8.5 | Konqueror 3.3.2 | Netscape 4.7 | IE 6.0
-
hi,
Eben, deshalb wird der Text ja, sofern CSS aktiviert ist, durch Hintergrundbilder ersetzt.
Wie das?
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo wahsaga.
Eben, deshalb wird der Text ja, sofern CSS aktiviert ist, durch Hintergrundbilder ersetzt.
Wie das?
Mit zusätzlichem Code, meinetwegen.
Einen schönen Dienstag noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
30 Days to becoming an Opera8 Lover -- Keyboard Shortcuts
Meine Browser: Opera 8.50 | Firefox 1.0.7 | Lynx 2.8.5 | Konqueror 3.3.2 | Netscape 4.7 | IE 6.0
-
-
-
-
-
-
Also kein <a href="foo.bar">Foo</a>)
Doch. Genau das ist die Lösung. Um den Text dann für CSS-Fähige Browser zu verstecken gibt es einen Trick. Ich glaube, man kann z.B. einen riesengroßen negativen text-indent-Wert benutzen oder so.
dem a-Element weißt du dann am besten noch display:block und eine feste breite und höhe zu.
-
Hallo,
Also kein <a href="foo.bar">Foo</a>)
Doch. Genau das ist die Lösung. Um den Text dann für CSS-Fähige Browser zu verstecken gibt es einen Trick. Ich glaube, man kann z.B. einen riesengroßen negativen text-indent-Wert benutzen oder so.
Aua, nein bitte nicht!
a {/*diverses CSS*/; background-image:url(Beispiel.jpg);}
a:hover {background-image:url(Beispiel1.jpg);}
a span {visibility:hidden;}<a href="foo.bar"><span>Foo blah blubb</span></a>
viele Grüße
Axel
-
Hi,
a {/*diverses CSS*/; background-image:url(Beispiel.jpg);}
a:hover {background-image:url(Beispiel1.jpg);}
a span {visibility:hidden;}auch übel. Wenn CSS dargestellt wird aber keine Bilder, dann sieht man *nichts*.
Nur ein img kann über das alt-Attrut diese Nachteile vermeiden; siehe http://www.1ngo.de/web/bildwechsel.html.freundliche Grüße
Ingo-
Hallo,
Nur ein img kann über das alt-Attrut diese Nachteile vermeiden; siehe http://www.1ngo.de/web/bildwechsel.html.
Ja, das ist konsequenter zu Ende gedacht. So erspart man sich auch das semantisch unsinnige SPAN.
viele Grüße
Axel
-
-
-
-
-
-
- Ich will(muss) den Button ganz links oben in einem div platzieren.(Wer die HP anschaut, weis wie es dann aussehen soll), aber ich habe einen Abstand von ca. 3-4px nach links und nach oben.