Formfelder mit Beschriftung ausrichten

[Matthias Jütte]

Hallo!

Ich stoße gerade zum wiederholten Male auf ein Problem, das ich bis dato noch nicht habe lösen können. Mag recht einfach oder auch gar nicht möglich sein, das würde ich nun endlich mal gerne erfahren.

Es geht darum per CSS Formfelder und deren Beschriftung so auszurichten, wie man es in den guten alten Tabellenzeiten noch ganz einfach machen konnte: die Felder fangen alle an der gleichen x-Koordinate an, davor stehen dann (mit unterschiedlichen Abständen zwischen Text und Feld, je nach Länge des ersteren) die Labels.

Wie schon angedeutet, mit Tabelle ginge das ja wunderbar, aber ich glaube dabei würde sie nicht ganz ihrem Anwendungszweck gerecht (oder doch?).

Besten Dank im Voraus für alle Ideen/Lösungen.

Gruß

Matthias

[Viennamade]

Hallo!

Es geht darum per CSS Formfelder und deren Beschriftung so auszurichten, wie man es in den guten alten Tabellenzeiten noch ganz einfach machen konnte: die Felder fangen alle an der gleichen x-Koordinate an, davor stehen dann (mit unterschiedlichen Abständen zwischen Text und Feld, je nach Länge des ersteren) die Labels.

Ich habe das mal mit %-Werten gemacht, die Labels begannen bei 1%, die Felder bei 20%. Letzte Woche habe ich das über den Haufen geschmissen, da für ein neues, langes Label kein sinnvolles kürzes Wort auffindbar war.
Bin auf die Ergebnisse dieses Threads gespannt.

Beste Grüße
Viennamade

[dbenzhuser]

N'Obend

Wie schon angedeutet, mit Tabelle ginge das ja wunderbar, aber ich glaube dabei würde sie nicht ganz ihrem Anwendungszweck gerecht (oder doch?).

Naja, warum denn nicht?
Links hast du die Bezeichnung der Zeile, Rechts werden die dazugehörigen Daten eingetragen. Hört sich nach Tabelle an.

Wenn du's anders nicht hinbekommst würd ich mir da keinen Kopf machen :)

Andererseits sieht es auch nicht schlecht aus, wenn man den Namen über das jeweilige Feld schreibt:

Name_____________
|________________|

Name2____________
|________________|

oder so ähnlich. Die Bezeichnungen könnte man dann sinnvoll als Überschrift markieren.

Und wenn du es schon semantisch durchziehen willst, denke auch an <label>:
http://de.selfhtml.org/html/formulare/strukturieren.htm#label

Tschö,
dbenzhuser

[Tobias Müller]

Hallo,

Wie schon angedeutet, mit Tabelle ginge das ja wunderbar, aber ich glaube dabei würde sie nicht ganz ihrem Anwendungszweck gerecht (oder doch?).

Naja, warum denn nicht?
Links hast du die Bezeichnung der Zeile, Rechts werden die dazugehörigen Daten eingetragen. Hört sich nach Tabelle an.

Sehe ich ganz genau so. Du verwendest in diesem Fall ja die Tabelle nicht primär zu Layout-Zwecken sondern zur Strukturierung von Daten. Dafür sind Tabellen da. Dass die Daten in den Formular-Feldern erst noch ausgefüllt werden müssen, also nicht von Anfang an da sind, ist dabei vollkommen nebensächlich.

Angenommen du hättest ein Formular oder Fragebogen oder was weiss ich auf einem Blatt Papier zum Ausfüllen. Da würde man in den meisten Fällen doch auch eine Tabellenform wählen. Der Vergleich zwischen Screen und gedrucktem Wort ist zwar oftmals unangebracht oder falsch, bei der Frage nach dem Einsatz von Tabellen aber imho meistens sehr hilfreich.

MfG Mülli

[at]

Hallo.

Dafür sind Tabellen da.

Finde ich nicht -- und verwende daher meist eine <dl>.
MfG, at

[parkbanksitzer]

Hallo zusammen! <img src="http://parkbanksitzer.milten.lima-city.de/smilies/smile.gif" border="0" alt="">

Dieses Problem hatte ich auch schon mal und hab das irgendwann aufgegeben. Nachdem ich die Frage aber wieder gelesen habe hier, hab ich mich erneut damit beschäftigt. Und ich hab die Lösung! <img src="http://parkbanksitzer.milten.lima-city.de/smilies/freu.gif" border="0" alt="">

Zunächst habe ich die labels zu einem Block gemacht und ihnen eine Breite angegeben. Somit waren sie alle gleich breit. Mit einem float:left hab ich es dann geschafft, daß Labels und Eingabefelder schön nebeneinander liegen.

Natürlich haben auch die Eingabefelder eine feste Breite bekommen.

Anschließend ist auch noch das div-Feld, in dem das ganze Formular liegt, formatiert worden.

Ich hab das ganze dann mal validiert und es war valides xhtml 1.0 strict. <img src="http://parkbanksitzer.milten.lima-city.de/smilies/smile.gif" border="0" alt="">

Der nächste Schritt war dann, sämtliche Längenangaben, die ich zunächst mit px gemacht hatte, in em umzuwandeln, damit das Ganze auch schön zu Strecken bzw. Verkleinern ist.

Dann nochmal validiert und mit den aktuellsten Versionen von MS IE, Mozilla, Opera, Netscape Navigator und Firebird getestet.

Das Ergebnis : Ein xhtml 1.0 strict Formular in wunderschönem Design, das in sämtlichen getesteten Browsern zu 99% ident aussieht UND auch noch verkleiner- bzw. vergrößerbar ist. Das Ziel, ein Design wie mit Tabellen zu machen und die Eingabefelder gleich anfangen zu lassen, wurde erreicht. <img src="http://parkbanksitzer.milten.lima-city.de/smilies/freu.gif" border="0" alt="">

Online gestellt habe ich es natürlich auch.

HIER ist das Formular ganz ohne irgend eine CSS Formatierung, also reinstes xhtml ==> http://parkbanksitzer.milten.lima-city.de/selfhtml/formular/formular_plain.html

HIER ist die SELBE Seite mit CSS formatiert, nun auch wunderschön zum Ansehen ==> http://parkbanksitzer.milten.lima-city.de/selfhtml/formular/formular_css.html

Schaut Euch hier mal an, wie man es kleiner bzw. größer machen kann über den Browser!

Und HIER zum Downloaden die CSS-Datei ==> http://parkbanksitzer.milten.lima-city.de/selfhtml/formular/formular.css

So, ich hoffe, ich hab weiterhelfen können. Bin jetzt über eine Stunde dabei gesessen. Ich wünsch Euch ein schönes Wochenende! <img src="http://parkbanksitzer.milten.lima-city.de/smilies/pbs01.gif" border="0" alt="">

Mit lieben Grüßen aus Wien

parkbanksitzer <img src="http://parkbanksitzer.milten.lima-city.de/smilies/pbs02.gif" border="0" alt="">

[dbenzhuser]

N'Obend

Ich habe schon immer gewusst: Wir brauchen endlich Smileys <img src="http://parkbanksitzer.milten.lima-city.de/smilies/pbs01.gif" border="0" alt=""> :)

Interessanter Beitrag übrigns! (Bei Heise gäbs ein Doppelgrün - aber das hat hier zum Glück ähnliche Chancen wie die Smileys...)

Tschö,
dbenzhuser

[Detlef G.]

Hallo parkbanksitzer

Und HIER zum Downloaden die CSS-Datei ==> http://parkbanksitzer.milten.lima-city.de/selfhtml/formular/formular.css

Noch eine kleine Anmerkung von mir:
body
{ ...
 font-size:0.9em;
}

kann bei manchen IE's Probleme machen (Font-Size-Bug, unsinnige Vererbung).
Ich verwende für body üblicherweise font-size:100.01%. (http://www.einfach-fuer-alle.de/artikel/ietext/ und http://news.css-technik.de/comments/335_0_1_0_C/)
Dann werden die wirklich benötigten Größen den jeweiligen Elementen zugeordnet.

Auf Wiederlesen
Detlef