Beiträge von Ardian26

Ardian26 · 21. April 2019

Hallo liebes Forum,

in meinem neuen Projekt habe ich ein LoginDiv in meiner Tabelle, jedoch ist dieses DIV vertikal zentriert, und zwar ungewollt! Ich finden einfach nicht den Fehler, ein Bild wie es gemeint ist findet ihr im Anhang, vielen Dank schon mal.

HTML Code:

HTML

<!DOCTYPE html>
<html lang="de">
        <head>
                <title>PictureBank</title>
                <meta charset="UTF-8" />
                <link href="style.css" type="text/css" rel="stylesheet" />
         </head>
        <body>
            
            <h1>PictureBank</h1>
            <table>
                <tr>
                    <td class="td">
                        
                        <div id="loginDiv">
                        <p class="loginText">Login</p>
                        <form action="..." method="post">
                        <center><input name="benutzername" class="benutzernameInput" type="text" onclick="this.value='';" value="Benutzername"><br></center>
                            
                        <center><input name="passwort" class="passwortInput" type="text" value="Passwort" onclick="this.type='password'; this.value='';"><br></center>
                        <center><input class="absendenInput" type="submit" value="Einloggen"></center>
                        </form>
                        </div>
                    </td>
                    <td>
                    
                    <!-- hier kommt registirerung form hin -->
                        
                    </td>            
                    </tr>
                </table>
          
         </body>
</html>

<script>

function clearBox()
    {
        this.type='password';
        this.value='';
    }
</script>

Alles anzeigen

Code

@font-face { font-family: 'meineSchrift';
             src: url('resources/Avenir-Book.otf') format('truetype'); }


body
{
    background-size: cover;
    background-image: url(resources/hintergrund.jpg);
    height: 100%;
    width: 100%;
    font-family: meineSchrift;
   
}
#loginDiv
{
    

    
    width:     30%;
    height: 50%;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: rgba(68,79,188,0.7);    
    top: 0px;
}

.benutzernameInput
{
    border: none;
    padding: 10px;
    margin-top: 3%; 
    height:20%;
    
    background-color: rgba(255,255,255,0.7);
        border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    width: 50%;
    transition: padding 0.5s ease-in-out;
    
    
    
}
.passwortInput
{
    
    border: none;
    padding: 10px;
    margin-top: 5%;
    height:20%;
    background-color: rgba(255,255,255,0.7);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    width: 50%;
    transition: padding 0.5s ease-in-out;
    
}

.absendenInput
{
    
    border: none;
    margin-top: 15px;
    background-color:rgba(140, 176, 234,0.7);
    color: #ffffff;
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    width: 50%;
    font-size: 18px;
    transition: padding 0.5s ease-in-out;
}

h1{
    text-align: center;
    color:rgba(255,255,255,0.7);
    margin-top: 1%;
    transition: font-size 0.5s ease-in-out,color 0.5s ease-in-out;
    
    
    
}

h1:hover
{
    font-size: 36px;
    color: rgb(255,255,255,1);
}
.loginText{
    color:rgba(255,255,255,0.7);
    text-align: center;
    font-size: 25px;

}

.benutzernameInput:hover{
    padding: 15px;
}
.passwortInput:hover{
    padding: 15px;
}
.absendenInput:hover{
    padding: 15px;
}

td
{
    width:50%;
    border: 2px solid black;
    
    
}

table{
    position: absolute;
    width:100%;
    height: 500px;
    left:0px;
    margin-left:0px;
    padding: 0px;
    
    
}

Alles anzeigen