Formular 'Submit'-Knopf designen

[devStorm]

Hallo,
ich stehe vor einem kleinen Problem.

Ich habe in PHP einen kleinen Newsletter gebastelt. Mit zwei Feldern für den Namen und der EMailadresse. Diese habe ich per CSS an mein Design angepasst, das war absolut kein Problem. Aber nun habe ich einen Blackout und weiß nicht wie ich das Design des Submit-Knopfes ändere. Und zwar nicht einfach die Rahmenfarbe oder die Schriftfarbe. Sondern den kompletten Knopf.

Ich wollte das statt des Submit-Knopfes dieser Schriftzug erscheint: "Newsletter besstellen". Davor soll noch eine kleine Grafik rein. Habe es schon mit einem <img>-Tag versucht, aber es scheint nicht zu funktionieren.

Kann mir vielleicht jemand helfen ?

Danke im vorraus.

Andrej

 

[Quaese]

Hi,

mein Vorschlag:

Nimm einen BUTTON, setze dort die Hintergrundfarbe auf die Background-Farbe
Deiner Seite (im Bsp. #000000) und entferne den Rahmen. Anschliessend bindest Du Dein Bild und den Text ein.

<button type="submit" style="background: #000000 url(bild.gif) no-repeat; width: 80px; border: 0px solid black; cursor: pointer;" >
    <div style="margin-left: 40px; color: white;">click</div>
</button>

Über das CSS im DIV-Tag kannst Du den Text so weit verschieben, dass er nicht
über dem Bild liegt (margin-left).

Ciao
Quaese

 

[devStorm]

Vielen dank schon mal für den Tipp. Hat super funktioniert, auch wenn Du einen Fehler im Code gemacht hast

Hier mein Code, der auch .

<button type="submit" style="background: #FFFFFF; background-image: url(bild.gif); no-repeat; width: 100%; border: 0px solid #000000; cursor: pointer;"><button>

Aber ein Problem habe ich dennoch. Also die Grafik wird nun angezeigt, wie auf dem Bild zusehen. Aber es wird auch ein Button (rot markiert) angezeigt, den ich nicht weg bekomme. Wie kann ich dies unterbinden ?

Desweiteren wird meine Grafik, welche 30 Pixel hoch ist, leider nich komplett angezeigt. Sie wird einfach abgeschnitten, so das mein Ergebniss nur notdürftig aussieht. Auch hier würde es mich freuen wenn mir bei diesem Problem jemand helfen könnte.

Oder darf die Grafik maximal 24 Pixel hoch sein ?

Gruß & Danke

Andrej

 

[Quaese]

Hi,

mein CSS hat schon gestimmt. Du kannst nach der Eigenschaft background
mehr Werte angeben und somit Deinen Code minimieren. Das no-repeat
war dazu gedacht, dass die Grafik nur einmal angezeigt wird.

Wenn die Grafik abgeschnitten wird, kannst Du die Höhe des Buttons über height angeben.
Height bekommt dabei die Höhe deines Bildes zugewiesen.

style="height: 30px;"

Der Button ganz unten könnte angezeigt werden, da Du den Button mit <button>
abschliesst. Es müsste jedoch </button> heissen.

Der endgültige Code sollte also wie folgt aussehen:

<button type="submit" style="background-color: #FFFFFF; background-image: url(bild.gif); background-repeat: no-repeat; width: 100%; height: 30px; border: 0px solid black; cursor: pointer;" ></button>

Ciao
Quaese

 

[Sven Mintel]

Herrschaften--warum so kompliziert

Es gibt doch schliesslich image-Submit-Buttons:

<input type="image"src="button.gif">

 

[devStorm]

Stimmt, verdammt. Nun habe ich ein Fehler gemacht

Hmm, also dein Code mit dem url(bild.gif) hat leider nicht funktioniert, bei mir jedenfalls nicht. Aber nun funktioniert alles. Besten Dank an euch beide.

Gruß

Andrej