Label-Text soll direkt über Textfeld erscheinen

[darton]

Hallo!
Ich habe hier mal was für die CSS-Gurus unter euch. Ich habe hier ein Formular erstellt, bei dem an manchen Stellen der Text über dem input-Feld an der falschen Stelle steht. Zum Beispiel das Wort "Vorname" müsste weiter nach rechts gerückt werden. Ich könnte natürlich dem label einfach einen margin-Wert verpassen, aber dann müsste ich das auch für den Ort und die Schule machen. Gibt es dafür auch eine allgemeine Lösung?

[AmicaNoctis]

Hallo,

du könntest die label-Elemente zu Blockelementen machen, links floaten und den Text in ein span-Element packen welches ebenfalls als Blockelement gestylt wird. Dann sollte das klappen.

Poste aber vorsichtshalber mal einen HTML-Code-Ausschnitt, denn ich kann ja nur raten, wie du das aufgebaut hast.

Gruß,

Amica

[wahsaga]

Poste aber vorsichtshalber mal einen HTML-Code-Ausschnitt, denn ich kann ja nur raten, wie du das aufgebaut hast.

„Quelltext anzeigen“ in deinem Browser defekt?

Zum Beispiel das Wort "Vorname" müsste weiter nach rechts gerückt werden.

Ich würde das Inputfeld einfach ins Label packen* – und dann die Labels floaten, und mit einer Breitenangabe für die Inputfelder dafür sorgen, dass sie auf die nächste Zeile unter den Text rutschen.

* dann kann man sich die for-Attribute übrigens auch sparen.

[AmicaNoctis]

„Quelltext anzeigen“ in deinem Browser defekt?

Bin auf die Seite gegangen, hab Funpic gelesen und gedacht, dass es nur ein Bild ist, die Werbung weggeklickt, das zweite Werbefenster geschlossen, still geflucht, dass die mich so nerven und die Seite schnellstmöglich wieder geschlossen. Und nein, in meinem Browser ist nichts defekt, höchstens in meinem Kopf.

[darton]

„Quelltext anzeigen“ in deinem Browser defekt?


Ich würde das Inputfeld einfach ins Label packen* – und dann die Labels floaten, und mit einer Breitenangabe für die Inputfelder dafür sorgen, dass sie auf die nächste Zeile unter den Text rutschen.

* dann kann man sich die for-Attribute übrigens auch sparen.

Naja, sieht auch nicht viel besser aus. Ich möchte ja nicht, dass die input-Felder noch breiter werden. Außerdem stehen so ja zwei Textfelder nicht nebeneinander. Link

[Quetschi]

@darton

Könntest du mal eine kleine Skizze oder so erstellen, wie das am Ende aussehen soll? Aus deinem Ausgangspost gepaart mit dem verlinkten Form werde ich nicht ganz schlau, was du eigentlich als Endergebnis haben willst

[darton]

So soll es später aussehen. Also, ich möchte, wie es im Titel steht, dass der Text direkt über den Eingabefeldern steht. Das tut er aber nur, wenn ich spezifisch für jedes Label den Abstand zum linken Element festlege. Ich möchte es aber gerne allgemein halten, da ich mehrere solcher Formular habe. Zur Not lasse ich das eben so, wenn ihr keine Lösung habt.

[wahsaga]

Naja, sieht auch nicht viel besser aus.

Nee, natürlich nicht – wenn du es nicht sinnvoll umsetzt …

Ich möchte ja nicht, dass die input-Felder noch breiter werden.

Deshalb gibst du natürlich den Labels auch eine entsprechende Breite.

Außerdem stehen so ja zwei Textfelder nicht nebeneinander.

Dafür floatest du wie gesagt die Labels, neben denen noch ein weiteres stehen soll.

[darton]

Puh, das ist ja gar nicht so einfach.
Habs zwar etwas besser hinbekommen (siehe Link), aber weiter weiß ich nicht.

[wahsaga]

Jetzt hast du das „Original“, an dem man halbwegs erkennen konnte, wie die Anordnung der Felder sein sollte, mit deinem Gebastel überschrieben
Das solltest du wenigstens unverändert bestehen lassen, und deine weiteren Versuche in neuen Dateien machen.

Für die Boxen, die du nicht neben einer anderen gefloateten haben willst, vergibst du ein clear:left.
Und die Inputfelder können auch einfach display:block bekommen, damit sie unter den Text des Labels rutschen.
Und die Absätze schmeiß’ raus, die ergeben layouttechnisch weniger Sinn, wenn du ihre Inhalte dann sowieso floatest.

[darton]

Ah, das sieht gut aus. Danke für die Hilfe. Hoffe ich hab alles richtig gemacht. Ort und Schule stehen jetzt zwar ein bisschen Abseits, aber das kann man wohl nicht ändern.

[wahsaga]

Ort und Schule stehen jetzt zwar ein bisschen Abseits, aber das kann man wohl nicht ändern.

Doch, natürlich kann man auch das …

Entweder gibst du den Labels von PLZ und Klasse einfach eine geringere Breite … oder du verzichtest komplett auf eine Breitenangabe für die Labels, so dass sie sich jeweils nach der Breite der darin enthaltenen Inputfelder richten, und gibst den Labels dann noch ein bisschen margin-right, damit zwei in einer Zeile nicht direkt aneinander stossen.