Formular größen

[drokai]

Hallo zusammen,

ich arbeite gerade an meinem Formular weiter und bin wieder an einen Punkte gestoßen an dem ich nicht leider weiter komme.

Das Feld E-Mail sollte immer so groß sein wie das Feld First name und Last name.
Über dem E-Mail Feld soll auch wie bei First Name "E-Mail" stehen

Um die Radiobuttons ist ein Kasten, hier kann ich nicht erkennen warum dieser erzeugt wird.
Das gleiche ist bei der Partnumber und Amount der Fall.

Das Feld Amount sollte auch dort anfangen wo die Partnumber anfängt.

 

[Sailor]

Den aktuellen Code (HTML und CSS) solltest du schon posten, sonst wird das ein Rätselraten... und die Kristallkugel hat Hitzefrei!

 

[drokai]

Stimmt, sorry!

Hier ist der Code:
https://jsfiddle.net/Drokai/6y0zphmL/7/

:)

Den aktuellen Code (HTML und CSS) solltest du schon posten, sonst wird das ein Rätselraten... und die Kristallkugel hat Hitzefrei!

 

[Sailor]

Ja... ein paar Zeilen CSS....

/* gib dem div, indem das Formular für die Mail ist, die selbe Breite, wie den Formularen Name und Vorname */
div.formular_mail {
  width: calc(30rem / 2)
}

/* Mache den Input für die Mail so breit, dass es das div ausfüllt */
input#email {
  width: 100%;
}

/* entferne die border um die Fieldsets */
#Beiteilsuche, #persAngaben {
  border: 0
}

/* gebe den labels eine gemeinsame Breite und setze deren Displayeigenschaft auf 'inline-block' */
#persAngaben label {
  display: inline-block;
  width: calc(15rem / 2);
}

Zusätzlich musst du natürlich noch ein '<label> für den E-Mailinput in deinen HTML Code einfügen... wie das bei Name und Vorname ja auch schon gemacht ist.

Kleiner Ratschlag am Rande... du solltest dich mal näher mit den Grundlagen von HTML und CSS beschäftigen. Im Moment sieht mir das eher nach 'Copy&Paste' aus und da ist einiges an unnötigem 'Füllfunk' drin.
Auf Dauer wirst du damit nicht glücklich werden.

 

[drokai]

Vielen Dank!

Ich bin noch am Anfang und versuche das alles gerade zu verstehen.
Deshalb füge ich ein paar Dinge ein und gehe dann durch um es zu verstehen was passiert.

Deshalb auch solche Projekte um es zu lernen, das wird nie irgendwo benutzt. Ich will nur mit dem Formular alles lernen und am Ende soll man es abschicken können. :)

Ja... ein paar Zeilen CSS....

/* gib dem div, indem das Formular für die Mail ist, die selbe Breite, wie den Formularen Name und Vorname */
div.formular_mail {
  width: calc(30rem / 2)
}

/* Mache den Input für die Mail so breit, dass es das div ausfüllt */
input#email {
  width: 100%;
}

/* entferne die border um die Fieldsets */
#Beiteilsuche, #persAngaben {
  border: 0
}

/* gebe den labels eine gemeinsame Breite und setze deren Displayeigenschaft auf 'inline-block' */
#persAngaben label {
  display: inline-block;
  width: calc(15rem / 2);
}

Zusätzlich musst du natürlich noch ein '<label> für den E-Mailinput in deinen HTML Code einfügen... wie das bei Name und Vorname ja auch schon gemacht ist.

Kleiner Ratschlag am Rande... du solltest dich mal näher mit den Grundlagen von HTML und CSS beschäftigen. Im Moment sieht mir das eher nach 'Copy&Paste' aus und da ist einiges an unnötigem 'Füllfunk' drin.
Auf Dauer wirst du damit nicht glücklich werden.

 

[Sailor]

@drokai ... der Ansatz, sich auf diese Weise etwas selbst zu erarbeiten, ist super ok!
Dazu sollte man dann aber auch gleich eine gewisse Kontrollfunktion haben, die einem zeigt, wo man Fehler hat... dazu eignet sich nach meiner Meinung der Validator von W3.org
https://validator.w3.org/
super gut... da kannst du deinen Code per Copy&Paste eingeben und bekommst gleich alle Hinweise, die du brauchst, um deinen Code zu berichtigen.