SELFHTML Weblog - Ergänzung zur Dokumentation Übersicht

Könnte dieser Ansatz sich als nützlich erweisen wenn man seine Webseite auch für Handybildschirme optimieren möchte? (Vorausgesetzt natürlich der Handybrowser versteht einigermaßen CSS und/oder JavaScript)

Oder werden die Input Felder einfach "zusammengequetscht"?

Matthias, ja, die Input-Felder würden dann einfach zusammengequetscht. Das kann man auch in dem Beispielformular sehen, wenn man das Browserfenster stark zusammenschiebt. Insofern ist der Ansatz aus konzeptioneller Sicht - nicht aus technischer Sicht, wie du schon sagtest - nicht gerade mobiltauglich. Vier Spalten in 240-320px sind vermutlich kaum sinnvoll, aber ab 480px könnte es dann durchaus nett werden.

Wenn also von Anfang an die Absicht besteht, das Ding für Mobiles zu benutzen, würde ich es als Zweispalter verwenden (entsprechend umstricken), nicht als Vierspalter.

Eigenwerbung widerstrebt mir ein wenig, aber da mir mein eigener Layoutansatz mit Floats und prozentualen Breiten deutlich besser gefällt, kann ich's nicht lassen:

http://schuerig.de/michael/blog/index.php/2007/02/22/form-layout/

Eine Kombination aus dem Konzept von Dirk und Michael wäre interessant. Denn Konzeptionell werden ja von beiden unterschiedliche Strategien gefahren. Ich denke ab einer maximalen Stauchung (Dirks Ansatz) würde ein Float (Michaels Ansatz) gut tun, da es sonst zu gequetscht wirkt. Ich bin mir aber nicht sicher ob sich so etwas realisieren lässt...

@Alexander: Wenn du keine Einwände gegen etwas JavaScript hast, dann habe ich ein geeignetes Hilfsmittel im Angebot

http://schuerig.de/michael/blog/index.php/2007/02/22/size-dependent-layout/

Die Idee dabei ist, per Skript das class-Attribut des body-Elements je nach Fenster und Schriftgröße automatisch passend zu setzen. Die größenabhängigen CSS-Regeln müssen dann jeweils mit body.small oder body.large qualifiziert werden.

Michael, ich empfinde es nicht als Eigenwerbung, wenn du einen Link zum gleichen Thema angibst. Im Gegenteil, danke für den Hinweis.

Zu deinem Layoutansatz: Umbrüche aufgrund von floats finde ich innerhalb von Formularen nicht immer sinnvoll. Das typische Kommentar- oder Kontaktformular ist davon sicherlich nicht betroffen, aber bei umfangreicheren Formularen kann es vorteilhaft sein, dass die Positionierung der Eingabefelder und damit die unmittelbare Beziehung erhalten bleiben. Im Gegensatz zu den anderen Contentbereichen einer Seite übrigens, die sich oftmals als eigenständige Elemente verhalten und damit freundlich(er) umgebrochen werden können.

Alexander, man könnte Mindestbreiten für das Formular oder den umschließenden Container verwenden, falls nötig. Die inneren Elemente verhalten sich ja abhängig vom zur Verfügung stehenden Raum, insofern müsste man nur an einer Stelle eine Mindestbreite vorgeben, um ungewollte Quetschungen zu verhindern.

Moin! Das konsistente Styling von Formularen über Browsergrenzen hinweg ist wohl eins der schwierigsten Themen überhaupt. Insofern bin ich immer über neue Gedankenansätze glücklich.

Was ich an diesem Beispiel aber schlicht nicht verstehe ist, warum zuerst gesagt wird, man wolle auf überflüssige DIV-Container verzichten, um dann im nächsten Schritt alles mit SPAN-Elementen zuzupflastern (die dann auch noch erst auf display:block gebracht werden müssen...).

In einem Intranet-Projekt welches nur unter Firefox laufen musste, habe ich kürzlich sehr gute Erfolge mit den Eigenschaften display:table, table-row und table-cell sowie einer entsprechenden Formularstruktur erreichen können. Das Ergebnis war superskalierbar und vertrug (fast) jede beliebige Anzahl von Elementen in einer Reihe, die sich dann automatisch den verfügbaren Platz geteilt haben.

Leider unterstützt der IE die entsprechenden CSS-Eigenschaften nicht, so daß dieser "Ansatz" tatsächlich nur in klar definierten Umgebungen einsetzbar ist :-(

Florian, die spans werden benötigt, um Inhalte ansprechen zu können. Etwa die Titel oder Fehlermeldungen. Außerdem werden umschließende spans innerhalb der labels verwendet, um möglichst unabhängig von paddings und bordern der Eingabefelder zu bleiben (den IEs muss noch ein bisschen mit JS nachgeholfen werden). Dieser Punkt ist übrigens noch nicht richtig rausgekommen im aktuellen Text, habe ich bemerkt: border und paddings, also im Grunde alle wesentlichen Styles, die für Eingabefelder benötigt werden, können beliebig gesetzt werden, ohne an der Grundstruktur des Formulars ansetzen zu müssen -- wie gesagt, bis auf den IE und das bisschen Javascript.

Zurück zu den spans: sie werden deshalb verwendet und als Blockelemente missbraucht, weil die umschließenden labels nur Inlineelemente vertragen. Und umschließende labels waren als Ausgangsbasis gewollt; sie sollten die eigentliche Struktur bilden, ohne dass dafür weitere divs herangezogen werden sollten.

Dein Gedanke mit Tabellenelementen war übrigens gut und sinnvoll, nur bleibt dabei - wie du bereits sagst - der IE auf der Strecke, deshalb musste bei unserem Formular ein anderer Ansatz her.

Hallo Florian,

hast du einmal ein Beispiel für deinen Ansatz, mit dem du "sehr gute Erfolge erreichen konntest"? Würde mich interessieren, wie genau diese "Technik" funktioniert.

Danke! :-)
Felix

Der einzig bisher wirklich funktionierende min-width oder max-widht Ansatz, den ich kenne stammt von der Yaml Fraktion.

Gerade dies ist aber wichtig, wenn sich ein flexibles Layout an IE6 User wendet.