Kontaktformular Captcha - Darstellung/CSS?

[Anja555]

Hallo zusammen,

ich habe ein "handelsübliches" Kontaktformular - erstellt über den mitgelieferten Formulargenerator mitsamt Sicherheitsabfrage. Nun erscheint das Input-Feld in einer Zeile mit der Frage "Bitte rechnen Sie..." (Schema: Input - Frage). Nun möchte ich die Darstellung dahingehend ändern, dass erst die Frage erscheint und dahinter in einer Zeile das Input-Feld (Schema: Frage - Input).

Ich (als CSS-eher-nicht-so-Experte) dachte mir, dass das doch mit float ziemlich einfach gehen sollte. Diese habe ich über interne stylesheets eingebunden:

#ctrl_6 {
  float: left;
}
.captcha_text {     
float:left;
}

Die Selektoren sollten stimmen, da sich die Darstellung ändert, sofern ich andere Werte ausprobieren. Ich bin mir sicher ich unterliege hier einem CSS Anfänger-Fehler, wenngleich ich das Kapitel in Little Boxes nun mehrfach gelesen habe

Danke Euch!
Viele Grüße
Anja

[eS_IT]

Hallo Anja,
wenn ich Dich richtig verstehe, willst Du die Reihenfolge ändern. Dies wird mit float kaum gehen und auch mit CSS wirst Du da nicht weit kommen. Du musst wohl das Temlate bearbeiten, einen anderen Weg sehe ich nicht.

Viele Grüße,
eS_IT

Gesendet mit Tapatalk 2.

[magicsepp]

so sollte es gehen...

input.captcha{
display: inline;
margin: 0 0 0 12px;
width: 100px;
}
.captcha_text {     
float:left;
} 

[Anja555]

Hallo zusammen,

danke für Eure schnellen Antworten!

@eS_IT
Ja, diese Idee hatte ich auch - funktioniert auch. Dachte aber, dass das mit CSS eleganter wäre

@Magicsepp
Danke für die andere Klasse. Ich habe es so ausprobiert, leider stehen damit beide Felder nicht in einer Linie..:
captcha.jpg

Nun habe ich dem .captcha_text ein margin-bottom von 7px verpasst und beide Felder stehen auf einer Höhe. Aber so ganz sauber (im Sinne von professionell gelöst) scheint mir das nicht zu sein oder?
Das Input-Feld kriege ich mit verschiedenen Margin-Werten nämlich nicht bewegt. Auch scheint er die 12px margin-left zu ignorieren (was ich ja mit margin-right vom .captcha_text lösen könnte). Würde aber gerne verstehen, warum sich das Input-Feld so verhält?

Vielen Dank!
Anja