Frage Firefox reagiert nicht auf CSS Befehl : display: flex;

fasheras · 15 September 2017

Hallo Community,
ich habe das Problem das FireFox nicht auf den oben genannten Befehl reagiert. Hier das Bild Beispiel:

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

Und in Chrome:

https://picload.org/view/dgdglaoa/unbenannt2.png.html

https://picload.org/view/dgdglaol/unbenannt3.png.html

Hier mal der CSS Teil.

Muss dazu sagen das ich noch ein Neuling bin und noch nicht weiß wie ich das hässliche "form, .form-container" weg bekomme.

Code:

body{
    margin: 0 auto;         
    background-image:url(EFT.png);
    background-repeat:no-repeat;
    background-position:center;
}
 
h1{
    
    color: rgba(232,190,107,0.8);
    font-family: cursive;
}
 
form, .form-container {
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
 
.container{
    
    width: 300px;
    height: 270px;
    text-align: center;
    background-color: black;
    margin: 0 auto;
    border-radius: 7px;
    margin-top: 200px;
}
 
input{
    
    height: 40px;
    width: 280px;
    
}
 
.button1{
    
    background-color:rgba(232,190,107,0.8);
    border-color: black;
    font-family: cursive;
    font-size: 1.4em;
    border: 1px;
}

Der HTML Teil:

Code:

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

Komischerweiße sieht auch der Hintergrund bei Firefox ander aus.

Danke für eure Hilfe

Aaron3219 · 15 September 2017

Du brauchst z.B. kein margin bei deiner .container Klasse.
Desweiteren kannst du die Klasse .form-container im CSS wegnehmen, da diese im Code gar nicht verwendet wird.
Du brauchst im Prinzip 2 mal eine Flexbox.
Einmal, um deinen schwarzen Container mittig des Bildschirms zu zentrieren und
zweitens, um das Form im schwarzen Container zu zentrieren.

also:

Code:

body
     main (hier dann die erste Flexbox, um den Container zu zentrieren)
         .container (2. Flexbox um das form zu zentrieren)
             form (hier muss keine Flexbox hin, kann aber)

Edit:
ich verzichte auch immer auf h1 und so weiter. Verwende lieber <p> und setze dann eine font-size

2. Edit:
Ich glaube der Grund für deine margins ist, dass du noch dieses Papierdenken hast. Nur weil es bei dir mit dem margin zentriert ist, heißt es nicht, dass es bei anderen Auflösungen auch zentriert ist.

Frage Firefox reagiert nicht auf CSS Befehl : display: flex;

fasheras

Neues Mitglied

Aaron3219

Senior HTML'ler

Neueste Beiträge