[gelöst] Webform: Submit-Button als Bild darstellen
Eingetragen von soezkan (558)am 09.06.2011 - 11:33 Uhr in
Hallo zusammen,
ich würde gerne den Submit-Button meiner Webform als Bild darstellen.
Eigentlich bin ich davon ausgegangen, dass man das per CSS machen
kann, aber der Button lässt sich zwar mit border und so bearbeiten
aber das Bild wird nicht angezeigt.
Mein CSS:
#mainContent .webform-client-form .form-actions input {
border: none;
background: url(images/submit-button.png) 0 0 no-repeat;
width: 77px;
height: 16px;
min-height: 16px;
}Eigentlich funktionert alles, bis auf das er mir nicht das Hintergrundbild
anzeigt. Schlau werde ich daraus nicht.
Hat jemand sowas schonmal gemacht? Ja oder? Bloss hier im Forum
habe ich nichts gefunden.
Vielen Dank für Hilfe!
Liebe Grüße
Selim
- Anmelden oder Registrieren um Kommentare zu schreiben
Schwer zu sagen ohne weitere
am 09.06.2011 - 11:59 Uhr
Schwer zu sagen ohne weitere Infos. Kannst Du einen Link posten? BTW, es muss
border: 0;heißen, nichtnone. :)Die background-color auf
am 09.06.2011 - 12:47 Uhr
Die background-color auf transparent setzen!
C.A.W. Webdesign
Sorry aber Border: 0 und
am 09.06.2011 - 13:04 Uhr
Sorry aber Border: 0 und Border: none ist dasselbe.
caw schrieb Die
am 09.06.2011 - 13:13 Uhr
Die background-color auf transparent setzen!
Also mit transparent habe ich auch probiert aber es passiert nix
(siehe Screenshot).
Anbei auch mal der HTML-Quelltext
<div id="mainContent">
<div id="node-7" class="node">
<h1>Kontakt</h1>
<div class="content clear-block">
<h2>Donec congue rhoncus urna, in luctus mi rutrum vitae</h2>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus faucibus erat at quam dictum commodo. Curabitur aliquet consequat est vel mollis. Nunc sit amet eros dui. Aliquam erat volutpat.</p>
<form action="/content/kontakt" accept-charset="UTF-8" method="post" id="webform-client-form-7" class="webform-client-form" enctype="multipart/form-data">
<div><div class="webform-component webform-component-textfield" id="webform-component-vorname"><div class="form-item" id="edit-submitted-vorname-wrapper">
<label for="edit-submitted-vorname">Vorname: <span class="form-required" title="Diese Angabe wird benötigt.">*</span></label>
<input type="text" maxlength="128" name="submitted[vorname]" id="edit-submitted-vorname" size="60" value="" class="form-text required" />
</div>
</div><div class="webform-component webform-component-textfield" id="webform-component-nachname"><div class="form-item" id="edit-submitted-nachname-wrapper">
<label for="edit-submitted-nachname">Nachname: <span class="form-required" title="Diese Angabe wird benötigt.">*</span></label>
<input type="text" maxlength="128" name="submitted[nachname]" id="edit-submitted-nachname" size="60" value="" class="form-text required" />
</div>
</div><div class="webform-component webform-component-email" id="webform-component-email"><div class="form-item" id="edit-submitted-email-wrapper">
<label for="edit-submitted-email">eMail: <span class="form-required" title="Diese Angabe wird benötigt.">*</span></label>
<input type="text" maxlength="128" name="submitted[email]" id="edit-submitted-email" size="60" value="" class="form-text required email" />
</div>
</div><div class="webform-component webform-component-textfield" id="webform-component-betreff"><div class="form-item" id="edit-submitted-betreff-wrapper">
<label for="edit-submitted-betreff">Betreff: <span class="form-required" title="Diese Angabe wird benötigt.">*</span></label>
<input type="text" maxlength="128" name="submitted[betreff]" id="edit-submitted-betreff" size="60" value="" class="form-text required" />
</div>
</div><div class="webform-component webform-component-textarea" id="webform-component-nachricht"><div class="form-item" id="edit-submitted-nachricht-wrapper">
<label for="edit-submitted-nachricht">Nachricht: <span class="form-required" title="Diese Angabe wird benötigt.">*</span></label>
<textarea cols="60" rows="5" name="submitted[nachricht]" id="edit-submitted-nachricht" class="form-textarea required"></textarea>
</div>
</div><input type="hidden" name="details[sid]" id="edit-details-sid" value="" />
<input type="hidden" name="details[page_num]" id="edit-details-page-num" value="1" />
<input type="hidden" name="details[page_count]" id="edit-details-page-count" value="1" />
<input type="hidden" name="details[finished]" id="edit-details-finished" value="0" />
<input type="hidden" name="form_build_id" id="form-cc589eac864d00a644b0a788fc878343" value="form-cc589eac864d00a644b0a788fc878343" />
<input type="hidden" name="form_id" id="edit-webform-client-form-7" value="webform_client_form_7" />
<div id="edit-actions" class="form-actions form-wrapper"><input type="submit" name="op" id="edit-submit" value="Absenden" class="form-submit" />
</div><div class="bottominfo">Mit einem * versehene Felder sind Pflichtfelder.</div>
</div></form>
</div>
<!-- end #mainContent --></div>
Jemand noch ne Ahnung?
Ich glaube, das none genauso
am 09.06.2011 - 13:14 Uhr
Ich glaube, das none genauso wie 0 funktioniert, ich glaube aber auch das none eher der Initialwert für border-style ist. border benötigt meines Wissens eine numerische Angabe. Aber da none bestimmt in allen Browsern genauso funktioniert wie 0 ist das ja kein Problem. :)
Für mich sieht alles bestens
am 09.06.2011 - 13:17 Uhr
Für mich sieht alles bestens aus. Ggfs. liegt's einfach am Pfad zum Bild? Ganz sicher das der stimmt?
wahrscheinlich mußt alles mal
am 09.06.2011 - 14:20 Uhr
wahrscheinlich mußt alles mal mit important machen, damit die system css überschrieben wird
C.A.W. Webdesign
Pfad zum Bild
am 09.06.2011 - 14:30 Uhr
ich verwette nen Lolli auf den Pfad zum Bild ;)
Nevson schrieb ich verwette
am 09.06.2011 - 15:06 Uhr
ich verwette nen Lolli auf den Pfad zum Bild ;)
Tatsache. Ich glaube jetzt schulde ich dem ganzen Forum einen Lolly. Oh meine Güte.
Mea Culpa. Es lag tatsächlich am Pfad, denn dort hat sich irgendein kryptisches Zeichen
eingemogelt, weiß der Geier wie.
Danke euch allen!!
Übrigens: Firebug hilft bei
am 09.06.2011 - 15:09 Uhr
Übrigens: Firebug hilft bei solchen Sachen ungemein ;) Damit kannst du per MouseOver gleich schauen, ob das Bild unter dem angegebenen Pfad existiert oder nicht.
Ja stimmt, den Firebug
am 13.06.2011 - 10:42 Uhr
Ja stimmt, den Firebug benutze ich schon ewig, aber tritzdem kam ich nicht auf die Idee auch damit mal zu
prüfen was denn das Problem war.
Danke für die Erinnerung.
Viele Grüße
Soezkan