wahsaga: Bilder-Link mit Hover-Effekt (CSS-Problem)

Beitrag lesen

SELF-Forum

Bilder-Link mit Hover-Effekt (CSS-Problem)

wahsaga Homepage des Autors
– Informationen zu den Bewertungsregeln

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.)

  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?

Prüfe zunächst, ob das Probleme ohne die überflüssigen blank-Bilder in den Links immer noch besteht.

  1. 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; }
Beitrag melden
–
Informationen zu den Bewertungsregeln