Tom: Ausrichtung von Inline-Elementen

Hello,

ich bemühe mich krankhaft, diverse <input>-Elemente, die ja Inline-Elemente sind (?) in einem Absatz als Blocksatz auszurichten. Leider macht das der Browser nicht. Ein Text, der ja auch aus Inline-Elementen besteht, wird aber wunschgemäß ausgerichtet.

Wer kann mir eine Erklärung dafür geben?

Harzliche Grüße aus http://www.annerschbarrich.de

Tom

--
Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
Nur selber lernen macht schlau
  1. Hi,

    Ein Text, der ja auch aus Inline-Elementen besteht,

    nein, ein Text besteht aus Text. Andernfalls müsstest Du in der Lage sein, <input>-Felder mittels font-style schräg zu stellen.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hello,

      Ein Text, der ja auch aus Inline-Elementen besteht,

      nein, ein Text besteht aus Text. Andernfalls müsstest Du in der Lage sein, <input>-Felder mittels font-style schräg zu stellen.

      Der text besteht aber aus mehreren Textnodes, an denen der Blocksatz i.d.R. angreift. Warum sollte er das also nicht auch an den Node-Stellen der <input>-Elemente können?

      Welchen Vorschlag machst Du mir, um "saubere Formulare" zu bauen, so typisch deutsch, rundum bündig ausgerichtet. Das ist die Aufgabe.

      Harzliche Grüße aus http://www.annerschbarrich.de

      Tom

      --
      Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
      Nur selber lernen macht schlau
      1. Hi,

        Der text besteht aber aus mehreren Textnodes,

        ja, aber nicht aus Inline-Elementen.

        an denen der Blocksatz i.d.R. angreift. Warum sollte er das also nicht auch an den Node-Stellen der <input>-Elemente können?

        Weil text-align nur den Text betrifft.

        Welchen Vorschlag machst Du mir, um "saubere Formulare" zu bauen, so typisch deutsch, rundum bündig ausgerichtet. Das ist die Aufgabe.

        Geschicktes Floating. Bei "typisch deutschen" Formularen steht die Breite ja sicher fest ;-)

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
        1. Hi,

          an denen der Blocksatz i.d.R. angreift. Warum sollte er das also nicht auch an den Node-Stellen der <input>-Elemente können?
          Weil text-align nur den Text betrifft.

          http://www.w3.org/TR/REC-CSS2/text.html#propdef-text-align sagt:

          'text-align'
              Value:   left | right | center | justify | <string> | inherit
              Initial:   depends on user agent and writing direction
              Applies to:   block-level elements
              Inherited:   yes
              Percentages:   N/A
              Media:   visual
          This property describes how inline content of a block is aligned.

          Es heißt "inline content", nicht "text".
          In CSS 2.1 steht der Satz genauso dort, und auch in CSS 3 Text Module hat sich da nichts dran geändert.

          @Tom: Du solltest eigentlich lange genug hier sein, um zu wissen, daß Beispielcode hilfreich ist ...

          cu,
          Andreas

          --
          Warum nennt sich Andreas hier MudGuard?
          Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
          1. Hello,

            Es heißt "inline content", nicht "text".
            In CSS 2.1 steht der Satz genauso dort, und auch in CSS 3 Text Module hat sich da nichts dran geändert.

            @Tom: Du solltest eigentlich lange genug hier sein, um zu wissen, daß Beispielcode hilfreich ist ...

            Erstmal danke für die Info.

            Ich habe es nun erstmal so angedacht:

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                 "http://www.w3.org/TR/html4/transitional.dtd">
            <HTML>
            <HEAD>
              <TITLE>Input-Positions</TITLE>
            </HEAD>

            <BODY style="font-size:12px;">
              <div style="position:relative;">
                <input type="text" style="position:absolute; left:0;    top:0;     width:30px; height:20px;">
                <input type="text" style="position:absolute; left:40px; top:0;     width:30px; height:20px;">
                <input type="text" style="position:absolute; left:80px; top:0;     width:60px; height:20px;">

            <input type="text" style="position:absolute; left:0;     top:30px;  width:60px; height:20px;">
                <input type="text" style="position:absolute; left:70px;  top:30px;  width:30px; height:20px;">
                <input type="text" style="position:absolute; left:110px; top:30px;  width:30px; height:20px;">
              </div>

            </BODY>
            </HTML>

            Was mich daran stört ist, dass man keine variable Zeichengröße mehr hat. Ich habe bisher auf meinen letzten Seiten immer versucht, den die Fontgröße entweder in pt vorzugeben oder noch besser in %

            Mit der bündigen Ausrichtung bekomme ich das aber dann nicht geregelt.

            Harzliche Grüße aus http://www.annerschbarrich.de

            Tom

            --
            Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
            Nur selber lernen macht schlau
            1. Hi,

              @Tom: Du solltest eigentlich lange genug hier sein, um zu wissen, daß Beispielcode hilfreich ist ...

              Erstmal danke für die Info.

              Wie sah der Code aus, der NICHT funktioniert hat?

              Was mich daran stört ist, dass man keine variable Zeichengröße mehr hat. Ich habe bisher auf meinen letzten Seiten immer versucht, den die Fontgröße entweder in pt vorzugeben oder noch besser in %

              Das verstehe ich jetzt nicht. Nur weil absolut positioniert wird, kann man doch die Fontgröße trotzdem noch in allen möglichen Einheiten angeben.

              cu,
              Andreas

              --
              Warum nennt sich Andreas hier MudGuard?
              Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
              1. Hello,

                Wie sah der Code aus, der NICHT funktioniert hat?

                den habe ich leider schon weggeschmissen.

                aber stell Dir vor, eine Tabelle, die nur aus zwei Spalten besteht.
                Linke Spalte Beschreibung, rechte Spalte immer ein bis drei <input>-Elemente
                Die <input>-Elemetne, die einzeln in einer Zelle stehen, sind die breitesten und bestimmen damit die Breite der rechten Spalte. Die Elmente, die schmaler sind, sollen in dieser Spalte mit text-align:justify; ausgerichtet werden. Dadurch würde, wenn es funktionieren würde, die Tabelle bündig dargestellt werden. Text-align:right; klappt mit <input>s ja auch, wieso sollte dann 'justify' nicht klappen? Zumindest war das meine Idee.

                Was mich daran stört ist, dass man keine variable Zeichengröße mehr hat. Ich habe bisher auf meinen letzten Seiten immer versucht, den die Fontgröße entweder in pt vorzugeben oder noch besser in %

                Das verstehe ich jetzt nicht. Nur weil absolut positioniert wird, kann man doch die Fontgröße trotzdem noch in allen möglichen Einheiten angeben.

                Die optimalen <input>-Elemente passen sich an die Font-Size an, zumindest in der Höhe, damit die Fonts nicht abgeschnitten werden.

                Aber ich sehe gerade, dass sich die Fonts in den input-Elementen sowieso nicht anpassen.

                Da habe ich noch viel aufzuräumen, bis es klappt.

                Es besteht ja uch immer noch das Problem mit den TFT-Displays und 120dpi Auflösung.
                Da sind input type=text und input type=password unterschiedlich breit, obwohl sie die gleiche Size-Angabe und den gleichen Font haben.

                Bei 96dpi oder weniger stimmt es dann wieder.

                Harzliche Grüße aus http://www.annerschbarrich.de

                Tom

                --
                Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
                Nur selber lernen macht schlau
                1. Hi,

                  Die <input>-Elemetne, die einzeln in einer Zelle stehen, sind die breitesten und bestimmen damit die Breite der rechten Spalte. Die Elmente, die schmaler sind, sollen in dieser Spalte mit text-align:justify; ausgerichtet werden. Dadurch würde, wenn es funktionieren würde, die Tabelle bündig dargestellt werden. Text-align:right; klappt mit <input>s ja auch, wieso sollte dann 'justify' nicht klappen? Zumindest war das meine Idee.

                  Hm - weil justify in der letzten Zeile nicht verwendet wird? Wenn also nur eine Zeile pro Zelle vorhanden ist, ist diese die letzte und es wird nicht Blocksatz angewendet.

                  Was mich daran stört ist, dass man keine variable Zeichengröße mehr hat. Ich habe bisher auf meinen letzten Seiten immer versucht, den die Fontgröße entweder in pt vorzugeben oder noch besser in %
                  Das verstehe ich jetzt nicht. Nur weil absolut positioniert wird, kann man doch die Fontgröße trotzdem noch in allen möglichen Einheiten angeben.
                  Die optimalen <input>-Elemente passen sich an die Font-Size an, zumindest in der Höhe, damit die Fonts nicht abgeschnitten werden.

                  Naja, was hält Dich davon ab, die Höhe des inputs in Abhängigkeit von der Fontgröße anzugeben? Dafür gibt es doch die Einheit em.

                  Aber ich sehe gerade, dass sich die Fonts in den input-Elementen sowieso nicht anpassen.

                  Dann gib halt die Fonts direkt für die inputs an, wenn es mit der Vererbung nicht klappt.

                  Es besteht ja uch immer noch das Problem mit den TFT-Displays und 120dpi Auflösung.
                  Da sind input type=text und input type=password unterschiedlich breit, obwohl sie die gleiche Size-Angabe und den gleichen Font haben.

                  Dann gib die Breite per CSS an.

                  cu,
                  Andreas

                  --
                  Warum nennt sich Andreas hier MudGuard?
                  Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
                  1. Hello,

                    Hm - weil justify in der letzten Zeile nicht verwendet wird? Wenn also nur eine Zeile pro Zelle vorhanden ist, ist diese die letzte und es wird nicht Blocksatz angewendet.

                    Du hast es tatsächlich herausgefunden, woran es liegt.
                    Schade, damit scheidet justify für Tabellenzellen mit input-Elementen aus...

                    Für alle, die es interessiert: spielt mal ein bisschen mit den <br /> und mit size oder style=width:

                    <table style="width:420px";>
                      <tr>
                        <td style="text-align:justify;">
                          Hier geht es los und dann schauen wir mal, ob es wirklich einen Umbruch gibt<br />
                          <input name="eins">
                          <input name="zwei" size="4">
                          <input name="drei">
                          <input name="vier">
                          <input name="fünf">
                          <input name="sehs">
                          <input name="sieben"><br />
                          Und der Rest
                        </td>
                      </tr>
                    </table>

                    Harzliche Grüße aus http://www.annerschbarrich.de

                    Tom

                    --
                    Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
                    Nur selber lernen macht schlau
                    1. Hello,

                      die einzige universelle Möglichkeit scheint "table in table" zu sein.
                      Ich werde das nachher so aufbauen.

                      Sollte noch jemandem von Euch was besseres einfallen, wäre ich über eine Info sehr dankbar.
                      Auch das Problem mit der Nicht(v)ererbung der Größe bei den <input>s würde ich gerne noch knacken. Wenn ein User den übrigen Text skaliert, sollte er auch die <input>-Elemente mit skalieren.

                      Ich habe schon darüber nachgedacht, da ja sowieso alle Seiten mit PHP genereiert werden, eine Skalierungsfunktion in die Seiten einzubauen, die tatsächlich _alles_ zoomt, auch Bilder, Inputfelder etc. Bleiben dann eben nur noch die Titelleiste und die übrigen Fesnterelementeim Originalformat.

                      Harzliche Grüße aus http://www.annerschbarrich.de

                      Tom

                      --
                      Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
                      Nur selber lernen macht schlau