PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Navigationsbuttons: Bild und Text übereinander


RMC
2004-06-29, 22:40:20
Ich würd gern einen Navigationsbutton machen, bei dem ein Text über ein <img> liegt! Geht sowas?

Button schauen so aus:

<a href="link"><img src="bild.png"></a>

Jetz hätt ich gern ÜBER das bild noch einen Text geschrieben - also den Text der im Button steht klarerweise.


Zuerst hab ichs anders gehabt, nämlich so:

<td background="bild.png"><a href="link">Text</a></td>

aber aus irgendwelchen nicht nachvollziehbaren Gründen schneidet er jedesmal ein Pixel vom Bild am rechten Ende ab...und jetzt wollt ich es mal andersrum probiern


lässt sich das mit dem "Text über Bild" irgendwie lösen?

danke!

clm[k1]
2004-06-29, 23:00:18
in plain html ? ..nicht das ich wüsste (falls doch lass ich mich gerne eines besseren belehren)

mit php müsste man das lösen können. da kann man "on the fly" bilder erzeugen.
(hab ich mich aber noch nicht näher mit auseinander gesetzt)


gruß
clm [k1]

Schiller
2004-06-29, 23:05:18
Original geschrieben von RMC
<td background="bild.png"><a href="link">Text</a></td>

aber aus irgendwelchen nicht nachvollziehbaren Gründen schneidet er jedesmal ein Pixel vom Bild am rechten Ende ab...und jetzt wollt ich es mal andersrum probiern


lässt sich das mit dem "Text über Bild" irgendwie lösen?

danke!

Hä? Wie? :|

Hast du es mit <table border=0 cellpadding=0 cellspacing=0> gemacht?

RMC
2004-06-29, 23:19:22
Original geschrieben von Schiller
Hä? Wie? :|

Hast du es mit <table border=0 cellpadding=0 cellspacing=0> gemacht?

jo genau...weiß aber nicht warum es abgeschnitten wird, denn das bild is genau 100px breit.

bei <td width=100> schneidet er aber rechts einen Pixel weg..is das normal?

MadMan2k
2004-06-29, 23:49:57
<a href="foo.html"><div style="background-image: url('foo.png')">BAR</div></a>

Magnum
2004-06-30, 10:33:56
Original geschrieben von RMC
jo genau...weiß aber nicht warum es abgeschnitten wird, denn das bild is genau 100px breit.

bei <td width=100> schneidet er aber rechts einen Pixel weg..is das normal?
Hast du schonmal dran gedacht, dass dein Rand auch eine gewisse Breite hat? Setz width mal auf 102! :)

RMC
2004-06-30, 19:03:09
Original geschrieben von MadMan2k

<a href="foo.html"><div style="background-image: url('foo.png')">BAR</div></a>

Danke das hat funktioniert - nach einigen CSS Schweinerein mit Höhe und Breite usw. funktionierts jetz auch so wie ich will ;)

Warum das vorher mit 100px nicht gefunzt hat weiß ich wirklich nicht...ich hab die width auf 102, 103, 104 usw. gesetzt aber es blieb gleich. Aus Designgründen is der Button jetz 90px breit *g* und jetz gehts *hm*

Eventuell war das Frame zu klein? Ich weiß nicht...mich gings schon an, deswegen hab ich ihn einfach kleiner gmacht.

Mit JS versuch ich jetz noch die versch. Zustände (MouseOver, onClicked usw.) zu ändern

Da stellt sich mir doch gleich noch eine Frage:
- wenn ich mit onMouseOver und onMouseOut den Zustand eines Buttons ändere (ersetzen des Hintergrundbildes) und mit onClick ebenfalls ein neues Hintergrundbild hinzufügen will...dann bleibt dieses Bild vom onClick Event ja gar nicht bestehen, denn sobald ich den Cursor wieder vom Button nehme, wird erneut die onMouseOut() Funktion aufgerufen - sehr blöd

kann man das umgehen?