.png Datei als Button (CSS)

02/04/2013 14:03 TIMΣ™#1
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:

HTML Code:
<a id="button_1" href="#"></a>
Der ist die CSS Datei:

HTML Code:
#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
02/04/2013 14:13 PseudoPsycho#2
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.
02/04/2013 14:16 KoKsPfLaNzE#3
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.

Quote:
Originally Posted by PseudoPsycho View Post
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
02/04/2013 14:25 TIMΣ™#4
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.
02/04/2013 14:30 KoKsPfLaNzE#5
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
02/04/2013 14:34 TIMΣ™#6
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:

HTML Code:
a.button_1 {
	  display: block;
	  width: 136px;
	  height: 22px;
	  background-image: url(images/button.png);
}
02/04/2013 14:39 kissein#7
mach aus
Quote:
<a id="button_1" href="#"></a>
das
Quote:
<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.
02/04/2013 14:43 KoKsPfLaNzE#8
Quote:
Originally Posted by TIMΣ™ View Post
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:

HTML Code:
a.button_1 {
	  display: block;
	  width: 136px;
	  height: 22px;
	  background-image: url(images/button.png);
}
[Only registered and activated users can see links. Click Here To Register...]

block
Das Element wird als Block-Element dargestellt.
02/04/2013 14:44 TIMΣ™#9
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.
02/04/2013 14:49 KoKsPfLaNzE#10
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