• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage HTML form-input Box verschieben

fasheras

Neues Mitglied
Hallo Community,
ich bin ein Neuling in HTML und versuche grad mit einem Buch eine seite zu erstellen. Bin jetzt an einem Punkt angekommen an dem ich nicht weiter weiß und keine Lösung in meinem Buch finde.

unbenannt.png.html

https://picload.org/view/dgrworci/unbenannt.png.html

Wie auf dem Bild zu sehen ist , sind die Benutzername, Passwort und Anmelden Felder am Oberen Rand des Hintergrundes angesiedelt. Ich möchte jetzt das Oberste Feld so 30px nach unten bewegen. Dabei soll sich aber der Abstand zwischen den anderen beiden Feldern nicht ändern. Mit welchem Befehl erreiche ich das. Mit margine-top bzw. bottom ist dies ja nicht möglich aber mit welchem dann ?

Code:
<body>
<div class="container">
<form >
<div class="form-input">
<div class="loginn">
<input type="text" name="Benutzername" maxlength="20" id="username" value class="Benutzername" placeholder="Benutzername" required>
</div>
<br class="clear">
<div class="pass">
<input type="password" name="Passwort" maxlength="20" id="password" value class="Passwort" placeholder="Passwort" required>
</div>
<br>
</div>
<input type="submit" value="Anmelden" style="width: 170px;">

</form>
</div>

</body>

Das ist der HTML Teil

und das der CSS:

Code:
body{
margin: 0 auto;
background-image:url(EFT.png);
background-repeat:no-repeat;
background-position:center;
background-size: 100% 1080px;
}

.container{

width: 300px;
height: 250px;
text-align: center;
background-color: rgba(56, 170, 235, 0.9);
margin: 0 auto;
border-radius: 5px;
margin-top: 150px;
}

input{

height: 40px;
width: 280px;

}

loginn{

margin-top: 170;

}
Mein Problem ist, das wenn ich für jeden input wie oben zusehen ist ein div mache mit margin-top immer noch das ganze Feld (mit Hintergrund) nach unten geschoben wird.

Danke für eure Hilfe
 
Werbung:
Ich schätze du willst es mittig zentrieren sehe ich das richtig?
Wenn dies der Fall sein sollte, dann arbeite dich in Flexboxen rein. Ist auch nicht kompliziert.
Hier das ausführliche Tutorial:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Nur so als Tipp:
Code:
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;

reicht schon, um den blauen Container um das Anmeldefeld UND das form zu zentrieren.
Einfach die Klassen setzen.

form, .form-container {}

Auch wenn ich dir den Code quasi schon gegeben habe, ist es WIRKLICH sinnvoll sich in Flexboxen einzuarbeiten. Es wird dein Leben 100 mal einfacher machen.

Falls ich irgendwas falsch verstanden habe, dann einfach melden
 
Zurück
Oben