[Gelöst] Bei der Ausgabe von Formularfeldern neue Zeile erzwingen

Hallo Daniela,

wie sich inline-block verhält, weiß ich nicht genau, probier doch erstmal schlichtes inline, siehe display:.

Ansonsten könntest du es auch mal mit clear versuchen.

ich habe schon folgendes versucht, was aber auch nicht funktioniert hat:

4. Feld -> display:block (damit es in eine neue Zeile rutscht)
5. Feld -> display: inline

dann rutscht aber auch das 5. Feld wiederum in eine neue Zeile. Nur bei display:inline-block stehen die Formularfelder tatsächlich nebeneinander.
ich verstehe auch nicht, warum das so ist :-(

Hast du einen Link oder den HTML-Code zum Selberausprobieren?

Und ansonsten mal Resourcen für den Theming-Ninja nutzen, um rumzuspielen und dem Problem auf die Spur zu kommen.

Link habe ich zwar keinen, aber zwei kurze Schnippsel kann ich selbstverständlich posten...

einmal die HTML-Quellcode und das dazugehörige CSS

Es sollen bei dem Beispiel nur Titel, Vorname und Name in einer Zeile stehen..
dann soll umgebrochen werden und in der nächsten Zeile soll Firma und Straße/Nr stehen...

natülich muß das per CSS gemacht werden und nicht mit einem Line-Break in der HTML-Datei :-), aber das versteht sich wohl von selbst.

HTML und CSS Datei im Anhang

Warum packst du sie nicht jeweils in eine Fieldgroup?
Ansonsten ist das ohne differenziertere Klassen als in deinem Quellcode glaube ich nicht so einfach zu machen.

Fieldgroups geht nicht, denn die einzelnen Felder sind bereits in Fieldgroups untergebracht und eine Gruppe in einer Gruppe geht glaube ich nicht....

CSS ist so flexibel, da muß es doch eine Möglichkeit geben, einem Element mitzuteilen, dass es in einer neuen Zeile geschrieben wird und die folgenden einfach dahinter ausgegeben werden.

Ich habe auch schon daran gedacht, dass letzte Feld in der ersten Zeile sooooooo laaanng zu machen, dass ein Umbruch zustande kommt. Aber diese Lösung sagt mir nicht richtig zu.... hängt ja auch von der Fensterbreite auf dem Bildschirm ab.

Da muß es doch noch eine bessere Lösung geben.

Liebe Daniela,
du kannst das Problem lösen, indem du display:table-cell verwendest.

also bei deinem Beispiel: 4. Feld mit display:table-cell in eine neue Zeile bringen und dann die nächsten Felder auch mit display:table-cell anfügen

Wenn du dann wieder eine neue Zeile beginnen willst, geht das wieder mit display:inline-block

(OOOOOhhhh: Ich habe Tabellen in Verbindung mit CSS gebracht, quasi eine CSS-Todsünde, ich sehe Sie schon mit Mistgabeln und brennenden Fackeln dicht hinter mir.)

@torfnase
Super Sache, das mit dem display:table-cell funktioniert genau so, wie ich mir das vorstelle.
Hut ab und vielen Dank....
Es ist in der Tat ein wenig unkonventionell, aber das Ergebnis ist eben klassen. Ich hoffe, du mußt nicht zuviel Prügel einstecken :-)

ich habe mir übrigens einen Teil deiner Videos angeschaut, die sind echte Spitze.
Da kann man was lernen.

Auch die Videos, die du zu CSS gemacht hast, mit diesem WYSIWYG-Editor Komposer sind Klasse.
Ich habe deinen Kanal bei YouTube abonniert, damit icht nichts verpassen.

Gruß
Daniela

Danke für das nett Lob und dass du meinen YouTube Kanal abonniert hast.
Zur Zeit beschäftige ich mich in der Tat ein wenig mehr mit CSS, da gibt es noch so viele Tricks, da könnte ich noch 50 Videos darüber machen.

viel Erfolg mit deinen Formularen :-)

Für alle anderen, die auch neugierig sind: CMS Drupal Video Tutorials