Mehr habe ich nicht
<section class="benutzerLogin">
<figure>
<img src="img/logo.png" alt="Logo">
<figcaption>Beschreibung zum Logo</figcaption>
</figure>
<form action="" method="POST">
<input type="text" placeholder="E-Mail Adresse" name="user_nickname" required>
<input type="password" placeholder="Passwort" name="passwort" required>
<p class="p-vergessen">
<a href="#" title="">Passwort vergessen?</a> <span class="s">|</span>
<a href="#" title="">Account anlegen</a>
</p>
<input type="submit" value="Login" name="einloggen" id="send">
</form>
</section>
Und ja, ich weiß dass ich bei den input Felder kein Label habe, darauf habe ich ganz bewusst verzichtet. Darüber muss erst gar keine Diskussion aufkommen, da dieses mit meinem Problem nichts zu tun hat.
Hier noch das CSS
body, html {
margin:0;
padding:0;
width:100%;
height:100%;
background-color: #efefef;
}
.benutzerLogin {
width:440px;
height:auto;
position:absolute;
top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%);
background:#fff;
}
.benutzerLogin img {
max-width: 60%;
height: auto;
}
.benutzerLogin figcaption {
width: 61%;
position: absolute;
top: 13.6em;
color: #bfbfbf;
left: 9.8em;
}
.benutzerLogin form {
margin-top:3em;
}
.benutzerLogin form input {
margin:4% 10% 0 10%;
width:80%;
padding:5%;
display:block;
border:none;
border:1px solid #dadada;
}
.benutzerLogin input:focus {
outline:none;
background-size:100% 100%;
}
.benutzerLogin #send {
background:#dadada;
border:none;
color:#777;
width:80%;
margin:5% 10% 10% 10%;
cursor:pointer;
}
.benutzerLogin #send:hover {
background:#666;
color:#fff;
}