thunderstorm: Abstand v. Button text zum Button rand dynamisch???

Hi Folks,
Ich habe hier viersprapchige Buttons. zum Teil ist da längerer Text als Buttontext. Diese werden (in einer JSP) Page dynamisch aufgebaut, je nach Gebrauch. Also ist auch der Text ganz verschieden Lang.

Stimmt es, dass es davon abhängt wie lange dieser Text ist, wie breit dann der Abstand zwischen Textanfang/-ende und dem Button-Randes (links/rechts) ist?
Also wenn ich nur ein"M" habe hat es fast keinen Rand (ca 5 Pixel) und wenn ich "Dies ist ein MegaKillerMörderText" als Button-Text habe ist der Abstand um ein vielfaches breiter (siehe Image unten)???

Den Tipp mit ...style="width:325px;".... kann ich nicht verwenden weil die Texte dermassen verschieden lang sein können. Dies ist auch mein Problem, denn ich habe z.B. auf einer Page 3 Buttons und beim italienisch werden die Buttons so lange dass sich die GroupBox verlängert und über den Browserrand hinausgeht. Resultat, man muss horizontal scrollen und das geht nicht.

Also müsste es einen Hack geben in dem man diesen Abstand (verlorenen Platz) aendert, egal wielange der Text ist (siehe Image unten).
Bei Tabellen kann man ja z.B. auch ohne width im TD ein right/left-padding:10px eingeben und die TD wir dann so breit wie der Text plus diese 10px beidseitig.
So etwas bräuchte ich dringendst.

Aber mich nimmt ausserdem wunder, ob das in pure HTML wirklich so (sorry) dämlich gelöst wurde, dass je länger der Text desto breiter der Abstand vom Text bis zum Button Anfang/Ende.

Wer weiss da mehr darüber oder hat einen Workaround gefunden?

Thanx im Voraus für Eure Hilfe und...
Gruss aus Basel
thunderstorm

  1. Hallo thunderstorm.

    Ich habe hier viersprapchige Buttons. zum Teil ist da längerer Text als Buttontext. Diese werden (in einer JSP) Page dynamisch aufgebaut, je nach Gebrauch. Also ist auch der Text ganz verschieden Lang.

    Wie sind die Buttons gemacht? Kennst du das hier:
    http://de.selfhtml.org/html/formulare/klickbuttons.htm#modern
    http://www.w3.org/TR/html401/interact/forms.html#edef-BUTTON

    Also müsste es einen Hack geben in dem man diesen Abstand (verlorenen Platz) aendert, egal wielange der Text ist (siehe Image unten).

    Innerhalb der Button-Tags kannst du verschiedenste Elemente verwenden, denen du ggf. auch einen linken bzw. rechten Abstand mitgeben kannst. Also so in etwa:

    <button type="button">
      <span style="margin:0 10px 0 10px">Dynamischer Text</span>
    </button>

    Davon kannst du dann mehrere nebeneinander setzen und das Aussehen des Buttons mittels CSS noch gestalten. Ich hoffe, das war es, was du meintest.

    Freundschaft!
    Siechfred

    --
    Punk's not dead: http://www.siechfreds-welt.de/badreligion.shtml
    Dankbarkeit, man spürt sie ja so selten bei den Menschen, und gerade die Dankbarsten finden nicht den Ausdruck dafür, sie schweigen verwirrt, sie schämen sich und tun manchmal stockig, um ihr Gefühl zu verbergen. (Stefan Zweig)
    1. Yoo Siechfred,

      Innerhalb der Button-Tags kannst du verschiedenste Elemente verwenden, denen du ggf. auch einen linken bzw. rechten Abstand mitgeben kannst. Also so in etwa:

      <button type="button">
        <span style="margin:0 10px 0 10px">Dynamischer Text</span>
      </button>

      Thanx für Deine Antwort.
      Ich kenne diese Dinger alle, aber das nützt leider nichts.

      Ich mach mal schnell ein kleines Beispiel (mit deinem Codebeispiel im ersten Teil und danach 2 INPUT type button. Jeweils ein kürzerer und ein längerer Text drin, OK? Jeweils beide ersten und beide zweiten sind mit denselben Styles ausgestattet. Was im Tag drin ist unter STYLE wird ja an die Styles in der Klasse waButton angehängt.

      (URL mit dem Beispiel siehe oben)

      Thanx und Gruss
      Joel

      1. Hallo thunderstorm,

        (URL mit dem Beispiel siehe oben)

        Jepp, gesehen. Ich verstehe trotzdem noch nicht so richtig, was du haben willst. Sollen die Buttons _immer_ die gleiche Breite haben? Was soll mit Text passieren, der zu lang ist, soll der abgeschnitten werden? Das alles kannst du haben:

        CSS:
        div {
          width:5em;
          height:1em;
          overflow:hidden;
        }

        HTML:
        <button type="button">
          <div>Kurzer Text</div>
        </button>
        <button type="button">
          <div>Ein ganz furchtbar langer nicht italienischer Text</div>
        </button>

        Zu betrachten hier:
        http://www.siechfreds-welt.de/selftest/button.html

        Meinst du das so?

        Freundschaft!
        Siechfred

        --
        Punk's not dead: http://www.siechfreds-welt.de/badreligion.shtml
        Das aktuelle Zitat:
        Dankbarkeit, man spürt sie ja so selten bei den Menschen, und gerade die Dankbarsten finden nicht den Ausdruck dafür, sie schweigen verwirrt, sie schämen sich und tun manchmal stockig, um ihr Gefühl zu verbergen. (Stefan Zweig)