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