CSS Texfeld "Zeilenumbruch"?

[Flure]

Hallo liebe Community,

Ich habe leider ein kleines Problem bei meinem Kontakt-Formular.

Darstellung:

Ideal Lösung wäre z.B:

Vorname:
(Textfeld)
Nachname:
(Textfeld)
etc.

Ich weis leider nicht wie ich eine "Zeilenumbruch" mit dem Textfeld mache?!

Mit freundlichen Grüßen
Florian

 

[rg88]

<BR>?

 

[Flure]

<BR>?

Danke für deine schnelle Antwort.
Ich komm mir fast bisschen blöd vor, dass ich selbst nicht draufgekommen bin. *facepalm*
Leider hätte ich da noch eine Frage.

Wie kann ich nun in CSS den Abstand hier anpassen. Mit Margin oder ´Padding?

 

[rg88]

Dazu müsste man dein CSS sehen. Aber probiers doch einfach aus? Am Besten lernt man Script/Beschreibungssprache indem man sich durch die Funktionen und Möglichkeiten durchprobiert. Zumal es mit einem anderen Browser schon wieder anders aussehen kann, wegen anderer Rendering-Engine

 

[Flure]

Dazu müsste man dein CSS sehen. Aber probiers doch einfach aus? Am Besten lernt man Script/Beschreibungssprache indem man sich durch die Funktionen und Möglichkeiten durchprobiert. Zumal es mit einem anderen Browser schon wieder anders aussehen kann, wegen anderer Rendering-Engine

Ich bin schon fleißig am probieren, jedoch bringt mich die Syntax zum Verzweifeln. Das Box-Model hab ich schon bisschen durchschaut, jedoch kann ich den Abstand über "Margin-top" nicht weiter minimieren.

Hab es erstmal "nur" mit Vorname probiert


Code:

<fieldset>
<legend>Daten eingaben</legend>
<div >
<p>
Herr: <input type="radio" value="Herr" name="anrede">
Frau: <input type="radio" value="Frau" name="anrede">
</p>
<p>
<label>Vorname:</label>
</p>
<p>
<input type="text" class="position"
</p>
<p>
<label>Nachname</label>
</p>
<p>
<input type="text">
</p>

 

[Emanon]

Schöner ist da (meiner Meinung nach) nur Textfelder und IM Textfeld via placeholder die entsprechende Beschreibung.

<form>
<input type="text" name="vorname" placeholder="Vorname"><br>
<input type="text" name="nachname" placeholder="Nachname"><br>
<input type="text" name="email" placeholder="E-Mail"><br>
<input type="text" name="betreff" placeholder="Betreff"><br>
<textarea placeholder="Schreiben Sie hier ihre Nachricht..."></textarea><br>
<input type="submit" value="Senden">
</form>

Über CSS dann die Breite der Felder "einstellen" und auch den Space zwischen den Feldern verändern.
Unschön aber auch möglich, ein doppeltes <br> hinter den input type....

Viel Spass bei Deinen ersten html-Zeilen

Nachtrag - lasse Deine <p> </p> weg, die verursachen ja gerade Deinen ungewünschten Abstand....

 

[Flure]

Schöner ist da (meiner Meinung nach) nur Textfelder und IM Textfeld via placeholder die entsprechende Beschreibung.

<form>
<input type="text" name="vorname" placeholder="Vorname"><br>
<input type="text" name="nachname" placeholder="Nachname"><br>
<input type="text" name="email" placeholder="E-Mail"><br>
<input type="text" name="betreff" placeholder="Betreff"><br>
<textarea placeholder="Schreiben Sie hier ihre Nachricht..."></textarea><br>
<input type="submit" value="Senden">
</form>

 

[Joshinator]

So für die Zukunft, wenn du im Browser CTRL + SHIFT + I drückst bekommst du die Dev-Tools (oder Rechtsklick -> untersuchen).

Dort kannst du dann die HTML-Nodes untersuchen, dort siehst du dann dass das p-Element 1em an Margin nach oben und unten hat. Kann man auch an dem Box-Model unten rechts gut erkennen, wenn du dir noch nicht 100%ig mit Margin, Padding, Border und Box-Sizing sicher bist.

Kannst dort auch direkt im Browser dann Styles editieren und (de)aktivieren, statt jedes Mal in den Editor, Speichern und F5.

Die Dev-Tools sollten dir in 99% der Probleme zeigen könne was im Dom die Probleme verursacht

 

[Emanon]

<fieldset>
<legend>Daten eingaben</legend>
Herr: <input type="radio" value="Herr" name="anrede">
Frau: <input type="radio" value="Frau" name="anrede"><br>
<label>Vorname:</label><br>
<input type="text" class="position"><br>
<label>Nachname</label><br>
<input type="text">
</fieldset>

 

[Flure]

So für die Zukunft, wenn du im Browser CTRL + SHIFT + I drückst bekommst du die Dev-Tools (oder Rechtsklick -> untersuchen).

Anhang anzeigen 742914

Dort kannst du dann die HTML-Nodes untersuchen, dort siehst du dann dass das p-Element 1em an Margin nach oben und unten hat. Kann man auch an dem Box-Model unten rechts gut erkennen, wenn du dir noch nicht 100%ig mit Margin, Padding, Border und Box-Sizing sicher bist.

Kannst dort auch direkt im Browser dann Styles editieren und (de)aktivieren, statt jedes Mal in den Editor, Speichern und F5.

Die Dev-Tools sollten dir in 99% der Probleme zeigen könne was im Dom die Probleme verursacht

Danke für den Tipp. Du hast mir so viel Zeit erspart
Ich werde jetzt mal fleißig weiter probieren!!

 

[Flure]

So... ich habe fleißig mit CSS herumgespielt und kann leider ein Problem nicht lösen

Problem:
Wie man am Bild erkennen kann, konnte ich die Textfeldbox vergrößern. Leider kann ich die ganze Größe nicht verwenden. Ich habe die Box mit "Padding-right" vergrößert.

Html Code:
<label>Vorname: </label><br>
<input type="text" placeholder= "Vorname" class="position"><br>
<label>Nachname:</label><br>
<input type="text" placeholder= "Nachname" class="position"><br>

CSS:
.position {
margin-top:5px;
margin-bottom: 5px;
padding-right: 40%;
border-width: 4px;
}

lg

 

[Joshinator]

Du hast die Box nicht mit padding-right vergrößert
Du hast mit padding-right der Box mehr padding gegeben, die eigentliche "Box" hat immer noch die gleiche Größe.
Genau das meinte ich mit:

Kann man auch an dem Box-Model unten rechts gut erkennen, wenn du dir noch nicht 100%ig mit Margin, Padding, Border und Box-Sizing sicher bist.

Margin, Padding und Border sind alle relativ ähnlich in dem was die tun, aber unterscheiden sich indem wie sie es tun.

Wenn du die Breite von der Textarea oder Input ändern willst, nutzt du den Befehl "width" mit einer Größenangabe. Am besten benutzt du dafür erst mal Pixel / px, gibt noch eine andere Größen. Aber die würden dich jetzt eher verwirren und nicht helfen.

textarea, input[type="text"] {
    width: 200px;
}

damit werden die Texteingabefelder und die Textarea auf 200px breite gesetzt.


Der blaue Teil in dem Div dort ist der tatsächliche Platz für den Content. Der gelbe/orange Bereich drum herum ist Padding. Padding fügt innerhalb deines Elements einen Abstand hinzu. Es sieht aber so aus als ob das Element größer wird, die eigentliche Fläche für den Inhalt bleibt aber gleich.
Heißt dein Element ist width + padding (in dem Fall ist der Div 200px breit und hat 100px Links und Rechts and Padding. Daher 400px x 400px im Inspector.

 

[Flure]

Du hast die Box nicht mit padding-right vergrößert
Du hast mit padding-right der Box mehr padding gegeben, die eigentliche "Box" hat immer noch die gleiche Größe.
Genau das meinte ich mit:

Margin, Padding und Border sind alle relativ ähnlich in dem was die tun, aber unterscheiden sich indem wie sie es tun.

Wenn du die Breite von der Textarea oder Input ändern willst, nutzt du den Befehl "width" mit einer Größenangabe. Am besten benutzt du dafür erst mal Pixel / px, gibt noch eine andere Größen. Aber die würden dich jetzt eher verwirren und nicht helfen.

textarea, input[type="text"] {
    width: 200px;
}

damit werden die Texteingabefelder und die Textarea auf 200px breite gesetzt.


Der blaue Teil in dem Div dort ist der tatsächliche Platz für den Content. Der gelbe/orange Bereich drum herum ist Padding. Padding fügt innerhalb deines Elements einen Abstand hinzu. Es sieht aber so aus als ob das Element größer wird, die eigentliche Fläche für den Inhalt bleibt aber gleich.
Heißt dein Element ist width + padding (in dem Fall ist der Div 200px breit und hat 100px Links und Rechts and Padding. Daher 400px x 400px im Inspector.

Anhang anzeigen 743043

Danke für die tolle Erklärung