Zum Inhalt springen

Formular formatierung mit CSS funktioniert nicht ganz

Erstellt am 15. Mai 2006 · 5 Antworten · letzte Antwort am 15. Mai 2006

Tags: HTML & CSS, Frage

leibnitz ·

Hallo
bin gerade dabei ein Formular per CSS zu formatieren.
Allerdings gibt es da ein paar Probleme.
Das Formular wird auf einmal ziemlich verzogen (siehe bild).
Der erste teil des Formulars passt ja noch aber der rest!?!

Bild: die-eigene-homepage.de/form.gif

das CSS sieht so aus.

.csc-mailform {
        border: 0px;
}

.csc-mailform-field label {
float:left;
  width:25%;
  margin-right:0.5em;
  padding-top:0.2em;
  text-align:right;
  font-weight:bold;
}

.csc-mailform-submit {
        margin-left: 5.5em;
}

kann mir da jemand sagen /erklären warum ein Teil so verzogen ist? Wie bekomm ich das hin das alles schön sauber erscheint?
Hab schon das forum und diverse CSS Seiten durchforstet bin aber auf keine Lösung gestoßen.

Kann mir jemand helfen?

MfG Leibnitz

miwolfram ·

jup - durch dein float:left

Wenn mehrere floats aufeinandertreffen mit derselben Richtung werden diese wenn es sich ausgeht nebeneinander angezeigt.

Setz auf deine input-felder ein clear:both dann bricht er nach jedem eingabefeld um.

Vielleicht auch davor, wie das beeinflusst vergesse ich immer, in dem Fall müsstest du das clear:both zuätzlich zum float:left den labels zuweisen - so oder so müsste es funktionieren.

leibnitz ·

ja das wars danke!!!!!

nur noch eine frage, die eingabefelder sind so nah aneinander gesetzt!
wie bring ich das fertig, dass noch 1-2 pixel platz dazwischen sind!?

und die radiobuttons passen leider auch noch nicht! genauso das Kaufdatum dahinter wird die box nicht angezeigt :-(

weiß du dazu noch was?

Bild: die-eigene-homepage.de/form2.gif

MfG Leibnitz

leibnitz ·

das ist das css wo ich jetzt benutze!

.csc-mailform {
        border: 0px;
}

.csc-mailform-field label {
float:left;
clear:both;
  width:25%;
  margin-right:0.5em;
  padding-top:0.2em;
  text-align:right;
  font-weight:bold;
}

.csc-mailform-submit {
        margin-left: 5.5em;
}

nur eben die radiobuttons passen noch nicht leider!!!

pst ·

Hi, danke schonmal, mein Formular sieht jetzt schon ein wenig angenehmer aus... die Radiobuttons habe ich durch Auswahlfelder erstzt, jetzt bleibt mir allerdings immer noch das Problem, dass die Formularfelder nicht zwingend auf der Selben höhe beginnen wie die Labels, sodass sich das im Laufe des Formulars verschiebt (siehe http://www.lippmann-finanzberatung.de/index.php?id=24.
Hat da jemand noch eine Idee?
Philipp