.png Datei als Button (CSS)

[TIMΣ™]

Hi Community, ich bin gerade dabei ein paar Buttons in Adobe Fireworks zu erstellen, welche ich dann nachher per CSS (nicht HTML!) einbetten möchte.

Das ist der Button:

<a id="button_1" href="#"></a>

Der ist die CSS Datei:

#button_1 {
     background-image: url(images/button.png);
}

Der Pfad ist zwar richtig, nur klappt das nicht. Das einzige was bei mir klappt ist es im HTML-Code per Image Tag einzubetten. Gäbe es sonst noch eine andere Möglichkeit, wie ich dass in CSS lösen könnte? Habe mir überlegt vllt. einen kleinen Teil des Buttons zu nehmen und den per CSS selber zu vergrößern und abzurunden bzw. zu bearbeiten.

Wäre echt nett, wenn mir jemand helfen könnte.
Mfg

[PseudoPsycho]

1.) Hast du die CSS-Datei vlt. in einem anderen Verzeichnis liegen? Dann musst du den Pfad aus Sicht der CSS-Datei, statt der HTML-Datei angeben.
2.) Ein Anker-Tag ohne Inhalt hat vermutlich eine äußerst geringe Größe. Versuch' mal im CSS-Code height und width entsprechend der Bildgröße zu definieren.
3.) kA, ob das mit Anker-Tags überhaupt geht. Versuch's notfalls mit einem <button> oder <input type="button">-Tag.

[KoKsPfLaNzE]

du musst dem ganzen auch noch eine höhe bzw breite geben, ebenso solltest du es per classe machen und nicht per id.

PS: wenn ich mich gerade richtig erinnere musst bei einem a tag entweder display block setzen für with un height oder machst es mit padding.

Originally Posted by PseudoPsycho

1.) Hast du die CSS-Datei vlt. in einem anderen Verzeichnis liegen? Dann musst du den Pfad aus Sicht der CSS-Datei, statt der HTML-Datei angeben.
2.) Ein Anker-Tag ohne Inhalt hat vermutlich eine äußerst geringe Größe. Versuch' mal im CSS-Code height und width entsprechend der Bildgröße zu definieren.
3.) kA, ob das mit Anker-Tags überhaupt geht. Versuch's notfalls mit einem <button> oder <input type="button">-Tag.

1, per image gehts doch, somit fehlt es raus

2, blink blink

3, a tag eignet sich besser dafür da es ja auch ein link wo hin ist

[TIMΣ™]

Die ID habe ich benutzt, weil auf meinem Button ein Text steht wie z.B. Home und ich diesen nicht öfter brauche ^^ Allerdings werde ich das wahrscheinlich ändern. Ich probiere eben eure Lösungswege aus.

[KoKsPfLaNzE]

naja die schrift sollte nun net unbedingt auf dem bild sein es ist besser wenn du die in das A tag schreibst un dann per css stylst

[TIMΣ™]

Ja, habe das nur gemacht, weil es davor nur mit dem Image Tag funktionierte. Und wenn man dann einen Text in den A Tag setzt, dann würde er den Text außerhalb, bzw. neben dem Bild setzen.

Danke für die Hilfe, schuld daran war wirklich dieses display: block; (Was tut das überhaupt?)

Hier der gelöste Code:

a.button_1 {
	  display: block;
	  width: 136px;
	  height: 22px;
	  background-image: url(images/button.png);
}

[kissein]

mach aus

<a id="button_1" href="#"></a>

das

<a id="button_1" href="#"><span>Buttontext</span></a>

und in den <span> lade das hintergrundbild anstatt des <a>. Damit ist der Button immer min-width wie der buttoninhalt.

[KoKsPfLaNzE]

Originally Posted by TIMΣ™

Ja, habe das nur gemacht, weil es davor nur mit dem Image Tag funktionierte. Und wenn man dann einen Text in den A Tag setzt, dann würde er den Text außerhalb, bzw. neben dem Bild setzen.

Danke für die Hilfe, schuld daran war wirklich dieses display: block; (Was tut das überhaupt?)

Hier der gelöste Code:

a.button_1 {
	  display: block;
	  width: 136px;
	  height: 22px;
	  background-image: url(images/button.png);
}

block
Das Element wird als Block-Element dargestellt.

[TIMΣ™]

funktioniert zwar, nur möchte ich das der Button etwas größer als der Textinhalt ist ^^
Nur wenn ich span.button_1 eingebe, dann zeigt er nichts an, wenn ich dass span weglasse, dann zeigt er es so an wie du meintest. Trotzdem danke.

[KoKsPfLaNzE]

das span macht och in meinen augen keinen sinn, ein inline element in einem inline element, aber jedem seins, viele wegen führem zum ziel