[HTML+CSS]: Wie Text auf Butttons ausrichten?

[mf_2]

Hallo,
Ich habe folgenden Submit-Button:

<INPUT type=submit value='Testtext' style="width:180px;height:180px;vertical-align:top;align:left;background:#FFFF55;">


Der Button ist nun viel größer als der Text "Testtext". Wie kann ich nun erreichen, dass der Text nicht in der Mitte des Buttons, sondern oben links beginnt? Ist es evtl. sogar möglich, den Text am Ende des Buttons automatisch umbrechen zu lassen, oder muss ich das immer per Hand einfügen?
So wie es jetzt ist, wird da nämlich garnichts umgebrochen.

[rizzotherat]

Wie kann ich nun erreichen, dass der Text nicht in der Mitte des Buttons, sondern oben links beginnt?

mit padding. die verschiedenen browser haben hier leider unterschiedliche defaultwerte und gegen einige kannst du nix machen. mit safari/mac kannst du das aussehen von input-buttons leider fast garnicht beeinflussen.

um den text oben links in der ecke zu haben z.b.:
padding: 0 15px 5px 0 (oben rechts unten links)


st es evtl. sogar möglich, den Text am Ende des Buttons automatisch umbrechen zu lassen, oder muss ich das immer per Hand einfügen?
keine ahnung. hab ich noch nie ausprobiert. geht das überhaupt den text von einem input-button umzubrechen?

[LordZed]

Gibt es nicht ein CSS-Element, dass sich da text-align oder so nennt? Meine damit hätte ich das mal gemacht...

//EDIT
Nachgereichter Link: http://www.css4you.de/Texteigenschaften/text-align.html
Gibt es das Element "align" überhaupt? ^^ Bin mir grad echt nicht sicher :-D

ok! Wer lesen kann ist klar im Vorteil! Hier ist das Problem wohl das vertical-alignment! ;) Das geht wahrscheinlich wirklich nur mit padding!

[mf_2]

Padding hat absolut keinen Effekt bei mir. Ich verwende den Mozilla Firefox 2.0.0.3.
Das ist das neue INPUT-Tag:
<INPUT type=submit value='".$text."' style=\"width:180px;height:180px;text-align:left;background:#FFFF55;padding: 0 15px 5px 0;\">
Ich habe es auch schon mit padding-top und verschiedenen Werten versucht.

[rizzotherat]

Padding hat absolut keinen Effekt bei mir. Ich verwende den Mozilla Firefox 2.0.0.3.
Das ist das neue INPUT-Tag: ...
Funktioniert doch! Wenn Du nach rechts und unten in den leeren Raum paddest, ist natürlich nicht soo viel zu erkennen. Spiel mit den Padding-Werten rum und sieh selbst :-)

[Gast]

und um den text oben links auszurichten:
<input type=submit value="anderer button" style="width:180px;text-align:left;background:#FFFF55; padding: 0 0 170px 0;"/>

[mf_2]

Perfekt, danke!!!!
Jetzt muss ich nur noch das mit dem Zeilenumbruch irgendwie hinbekommen...

[mapel110]

Perfekt, danke!!!!
Jetzt muss ich nur noch das mit dem Zeilenumbruch irgendwie hinbekommen...
Nach X Anzahl Zeichen innerhalb des Inputfeldes soll ein Umbruch passieren, oder was meinst du genau?
Geht doch mit einem Mehrzeiligen Eingabefeld "<textarea ..." oder so?!

[mf_2]

Nein, denn es sind ja Submit-Buttons. Da gibt man also nichts ein, sondern man kann nur draufdrücken. Aber die Beschriftung soll eben automatisch am Ende des Buttons umbrechen.

[mapel110]

Nein, denn es sind ja Submit-Buttons. Da gibt man also nichts ein, sondern man kann nur draufdrücken. Aber die Beschriftung soll eben automatisch am Ende des Buttons umbrechen.
<button type=submit value="anderer button" style="width:180px;text-align:left;background:#FFFF55; padding: 0 0 170px 0;"/>test<br>test</button>
dat geht. :)

[mf_2]

Kannte ich garned, das Button-Tag *gleich-mal-ausprobier*

EDIT: Klasse, funzt 1A! 3dc rulez :D