Morgen zusammen,
ich habe ein problem. Ich möchte wenn man auf ein verlinktes Bild klickt, dass sich ein Loginbereich öffnet und wenn man dann auf das kreuz klickt dieses wieder schließt.
Ich habe schon einiges ausprobiert aber ich weiß nicht warum das nicht funktioniert..
Anbei meine Dateien:
HTML
<a class="login-open" href="#loginauf" title ="Log-In"><img src="login.jpg"></a>
<div id="loginbereich" class="login">
<form method="post" >
<img src="profile.jpg"><br>
<label for="benutzer">Benutzername:</label>
<input type="text" name="loginname" id="benutzer">
<br><br>
<label for="password">Passwort:</label>
<input type="password" name="loginpassword" id="password">
<br><br><input type="submit" name="logindatensenden" value="Log In!">
<a class="login-close" id="loginzu" href="#loginzu" title="schließen">X</a>
</form>
</div>Code
/*Login-Bereich*/
/*Loginpic*/
a.login-open{
position: absolute;
right: 540px;
top: 0px;
}
a.login-open img
{
height: 42px;
border: 2px solid cyan;
border-top:none;
transition: all 1s ease-in;
}
a.login-open img:hover
{
opacity: 0.7;
}
div.login
{
position: absolute;
top: 100px;
left: 500px;
background-color: white;
height: 500px;
width: 800px;
padding: 10px 10px 10px 10px;
border: 3px solid cyan;
}
div.login img
{
height: 300px;
padding-left: 250px;
}
.login label
{
position: relative;
top: 50px;
left: 230px;
}
.login input[type='text']
{
height: 30px;
border: 2px solid black;
text-indent: 5px;
position: relative;
top: 50px;
left: 230px;
}
.login input[type='password']
{
height: 30px;
border: 2px solid black;
text-indent: 5px;
position: relative;
top: 50px;
left: 267px;
}
.login input[type='submit']
{
padding: 10px 10px 10px 10px;
background-color: aqua;
border: 2px solid black;
position: relative;
top: 60px;
left: 400px;
}
a.login-close
{
position: absolute;
right: 40px;
top: 70px;
font-size: 25pt;
background-color:red;
padding: 5px;
border: 3px solid orange;
text-decoration: none;
color: white;
}
#loginbereich input[type='submit']:hover{
box-shadow: 1px 3px 1px 1px gray;
cursor: pointer;
}
#loginauf:target #loginbereich
{
display: block;
}
#loginzu:target #loginbereich
{
display:none;
}Freue mich auf eure Hilfe!
Stef