HTML form-input Box verschieben

Wolly300 · 14. September 2017

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.

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 ?

Danke für eure Hilfe

Snooty · 14. September 2017

Etwas Code oder ein Link zur Seite wäre hilfreich - so kann man zig Varianten nennen, die theoretisch möglich sind.

Precide · 14. September 2017

Dann formatierst du das aber komisch, wenn es mit margin nicht geht.
Sind die Benutzername-, Passwort- und Anmelden-Felder jeweils in einem eigenen div-Element?

Wolly300 · 14. September 2017

<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:

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. Habe zudem den Knopf für Quellcode nicht gefunden.

Knito · 14. September 2017

warum geht margin nicht?

.login {
margin-top:12px;
}

"." und px fehlen bei dir.

Suche

HTML form-input Box verschieben

Wolly300

Lieutenant

Snooty

Commodore

Precide

Admiral Pro

Wolly300

Lieutenant

Knito

Commander