nicht angemeldet
Formulare mit Tabellen vernünftig layouten
Hi,
ich möchte ein Formular möglichst passend erstellen.
Um die Labels und die Formularelemente zu layouten wird eine Tabelle verwendet. Das ist so festgelegt, da CSS Layout für Formulare bei uns im Team abgelehnt wurden.
Nun kann es vorkommen, dass es mehrere Spalten gibt, also quasi 2 Labels und 2 Formularfelder pro Zeile.
sieht dann etwa so aus:
Label | Input1 | Label2 | Input2 |
Label | langes Input3 |
Das Problem ist, dass das rechte Ende genau auf gleicher Höhe wie das rechte Ende von Input3 sein soll.
Dazu bin ich hingegangen und habe Input3 relativ lang gewählt, und Input2 rechts ausgerichtet. Da die Tabelle dann immernoch unterschiedlich breit dargestellt wird, habe ich noch eine Tabelle drum gelegt und ein <td> mit width:100% von rechts gegen drücken lassen:
<table>
<tr>
<td>
// Hier die Tabelle, die das Formular layoutet.
</td>
<td style="width: 100%"></td>
</tr>
</table>
So funktioniert es ganz gut. Das Formular holt sich seine Mindestbreite, die es braucht (gegeben durch das lange Input3).
Dann das nächste Problem: Ich kann so (wohl durch die 100%) nicht mehr sagen: Spalte1 (also die Labels ganz links) sei bitte 200px breit. Das funktioniert nicht.
Hat da einer einen Rat, oder generell einen Rat, wie man Formular mit Tabellen am besten optisch gut aufbereitet?
wichtig ist, dass es 2 Labels / Input pro Zeile geben dürfen muss und rechts bündig mit den "1Label/Input pro Zeile"-Zeilen sind.
Desweiteren benutze ich <fieldset>s die normal immer die volle Breite einnehmen. Durch die 100% Spalte wird auch das fieldset auf die eigentliche Größe des Formulars zusammengedrückt.
Gruß
Christian
-
Yerf!
Hat da einer einen Rat, oder generell einen Rat, wie man Formular mit Tabellen am besten optisch gut aufbereitet?
Hm, prinzipiell: gar nicht, Tabellen führen ein Eigenleben, das sie für Layouts eigentlich unbrauchbar macht...
Wenn es den sein muss, versuche dem Inhalt und nicht den Zellen die Abmessungen zu geben.
Gruß,
Harlequin
-
"Das ist so festgelegt, da CSS Layout für Formulare bei uns im Team abgelehnt wurden."
- Was für eine Art von Team legt so etwas "fest"?
-
-
Hallo,
Label | Input1 | Label2 | Input2 |
Label | langes Input3 |Warum verwendest du dafür nicht colspan? Es wäre gut möglich, dass sich dadurch auch deine Folgeprobleme in Luft auflösen.
Gruss,
OhneName