Ausrichtung von Inline-Elementen
Tom
- css
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
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
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
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
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
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
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
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
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
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
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