Flexbox Präfixe

Mavis88 · #1 (**permalink**) 07.11.2013, 20:23

Hallo Community

Das ist mein erster Eintrag im Forum. Leider meldet man sicher ja nur, wenn man ein Problem hat...

Ich habe ein typisches Problem, welcher viele von euch sicher schon kennen. Die Seite wird nicht bei allen Browser gleich angezeigt. Ich glaube, das Problem zu kennen, komme aber trotzdem nicht weiter. Google und die SuFu konnte mir auch nicht helfen. Ich bin auf eure Hilfe angewiesen. Ich programmiere meine Seite mit Adobe Brackets. Die Live-View-Funktion geht nur mit Chrome, daher ist die Seite für Chrome optimiert.

Mein Problem: FireFox und IE zeigen die Seite schlecht an. Opera habe ich gar nicht getestet.

Höchstwahrscheinlich liegt es an der Flex Box. Leider finde ich nicht alle Präfixe... =S Folgend findet ihr alle meine Infos. Ich hoffe, ich habe nichts vergessen

http://www.bilder-hochladen.net/file...8e2-1-c4ca.png

http://www.bilder-hochladen.net/file...8e2-2-c81e.png

http://www.bilder-hochladen.net/file...8e2-3-eccb.png

HTML-Code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> Kyokushin Karate Bern </title>
        <link rel="stylesheet" type="text/css" href="Stammseite_css.css">
        <link rel="shortcut icon" href="Bilder/favicon.ico" type="image/x-icon">
        <link rel="icon" href="Bilder/favicon.ico" type="image/x-icon">
    </head>    
    <body>
        <div id="container">
            <div id="kopf">
                <img src="Bilder/kyokushinbernlogo.png" width="250px">
                <p id="spruch">"The only secret is sweat", Masutatsu Oyama.</p>
                
                <div class="login">
                    <form>
                    <input type="text" placeholder="Benutzername">
                    <input type="password" placeholder="Passwort">
                    <input type="submit"><br>
                    <a href="#">jetzt registrieren</a>
                    </form>
                </div>
            </div>
        
            <div id="navigation">
                    <ul>
                        <li><a href="#">Aktuell</a></li>
                        <li><a href="#">Kyokushin</a>
                            <ul>
                                <li><a href="#">Geschichte</a></li>
                                <li><a href="#">Masutatsu Oyama</a></li>
                                <li><a href="#">Andy Hug</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Standort</a>
                            <ul>
                                <li><a href="#">Sportcenter Nippon-Bern</a></li>
                                <li><a href="#">Sportcenter Titan</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Das sind wir!</a></li>
                        <li><a href="#">Partner</a></li>
                        <li><a href="#">Events</a>
                            <ul>
                                <li><a href="#">Winticup 2012</a></li>
                                <li><a href="#">Meisterschaft 2013</a></li>
                                <li><a href="#">Winticup 2013</a></li>
                                <li><a href="#">Trainings-Weekend in Wolhusen</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Gästebuch</a></li>
                        <li><a href="#">Kontakt</a></li>
                        <li><a href="#">Mein Profil</a></li>
                    </ul>
                
                <div id="werbung">
                   
                </div>
               
            </div>            
           
    
            <div id="text">
                <img src="Bilder/andyhug.jpg" width="100%">
                
                <h1>Titel </h1>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </div>                   
        </div>
    </body>
</html>

Code:

* {
    font-family: Calibri;
}

body {
    background-image:url(Bilder/hintergrund.jpg);

}

div {
    margin: 5px 0px;
}

#container {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction:row;
    flex-wrap:wrap; 
    max-width: 950px;
    min-width: 600px;
    margin: 0 auto;
}

#kopf {
    padding: 0px;
    width: 100%;
    position: relative;
}

#spruch {
    font-size: large;
    font-weight: bold;
    position: absolute;
    bottom: 0px;
    left: 100px;
}

.login {
    position:absolute;
    top:0px;
    right:0px;
    text-align:right;
}

#navigation {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1; 
    margin-right: 10px;
}

#text {
    -webkit-box-flex: 5;
    -moz-box-flex: 5;
    -webkit-flex: 5;
    -ms-flex: 5;
    flex: 5; 
}

#navigation ul{
    margin:0px;
    padding:0px;
    list-style-type:none;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction:column;
    justify-content:flex-start;
}

#navigation li{
    margin:8px 0px;
    margin-top:0px;
    padding:5px 5px;
    line-height:20px;
    list-style-type:none;
    background-color:blue;
    position:relative;
}

#navigation li a{
    display:block;
    color:white;
    font-weight:bold;
    font-family: Calibri;
    text-decoration:none;
}

#navigation li:hover {
    background-color: red;
}


#navigation ul ul {
    visibility:hidden;
    position:absolute;
}

#navigation ul ul li{
    background-color:rgb(9, 230, 0);
}

#navigation ul li {
    position:relative;
}

#navigation ul li:hover ul{
    visibility:visible;
    width: 150px;
    left:100%;
    top:0%;
}

#werbung {
    background-color:black;
    width:100%;
    height:100px;
}

explanator · #2 (**permalink**) 07.11.2013, 20:32

Flexbox hat, glaube ich, zwei mal die Syntax gewechselt, entsprechend schwierig wird das mit der Umsetzung inbesondere IE9 oder 10, bin mir da nicht ganz sicher.

Du brauchst also einen elend langen Rattenschwanz um alle Varianten abzudecken. Hinzu kommt dass nicht alle Browser alle Eigenschaften von Flexbox unterstützen.

Siehe Can I use Flexible Box Layout Module

Einigermassen gut erstellen kann man sich Flexboxen mit Flexy Boxes ? CSS flexbox playground and code generation tool
Alles andere ist Zeitverschwendung.

Wenn möglich, würde ich zur Zeit sogar noch ganz darauf verzichten.

Mavis88 · #3 (**permalink**) 08.11.2013, 17:32

Danke für die schnelle Antwort.

Die vorgeschlagenen Seiten werden mich bestimmt weiter bringen.! Besten Dank!

Schon schade, dass im Moment eine Flexbox nur so mühsam umsetzbar ist...

Mavis88 · #4 (**permalink**) 08.11.2013, 19:34

Mit den zusätzlichen Flexbox-Codes, welche ich auf den beiden Internetseiten gefunden habe, bin ich nun etwas näher am Ziel. Nebst Chrome wird es jetzt noch in IE richtig angezeigt

FireFox will dagegen immer noch nicht...! Ich habe am Code gelöscht, geschrieben, überschrieben etc., es will einfach nicht.

Kann mal einer von euch mein Code etwas studieren? Ich finde den Fehler nicht.

HTML-Code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> Kyokushin Karate Bern </title>
        <link rel="stylesheet" type="text/css" href="Stammseite_css.css">
        <link rel="shortcut icon" href="Bilder/favicon.ico" type="image/x-icon">
        <link rel="icon" href="Bilder/favicon.ico" type="image/x-icon">
    </head>    
    <body>
        <div id="container">
            <div id="kopf">
                <img src="Bilder/kyokushinbernlogo.png" width="250px">
                <p id="spruch">"The only secret is sweat", Masutatsu Oyama.</p>
                
                <div class="login">
                    <form>
                    <input type="text" placeholder="Benutzername">
                    <input type="password" placeholder="Passwort">
                    <input type="submit"><br>
                    <a href="#">jetzt registrieren</a>
                    </form>
                </div>
            </div>
        
            <div id="navigation">
                    <ul>
                        <li><a href="#">Aktuell</a></li>
                        <li><a href="#">Kyokushin</a>
                            <ul>
                                <li><a href="#">Geschichte</a></li>
                                <li><a href="#">Masutatsu Oyama</a></li>
                                <li><a href="#">Andy Hug</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Standort</a>
                            <ul>
                                <li><a href="#">Sportcenter Nippon-Bern</a></li>
                                <li><a href="#">Sportcenter Titan</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Das sind wir!</a></li>
                        <li><a href="#">Partner</a></li>
                        <li><a href="#">Events</a>
                            <ul>
                                <li><a href="#">Winticup 2012</a></li>
                                <li><a href="#">Meisterschaft 2013</a></li>
                                <li><a href="#">Winticup 2013</a></li>
                                <li><a href="#">Trainings-Weekend in Wolhusen</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Gästebuch</a></li>
                        <li><a href="#">Kontakt</a></li>
                        <li><a href="#">Mein Profil</a></li>
                    </ul>
                
                <div id="werbung">
                   
                </div>
               
            </div>            
           
    
            <div id="text">
                <img src="Bilder/andyhug.jpg" width="100%">
                
                <h1>Titel </h1>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </div>                   
        </div>
    </body>
</html>

Code:

* {
    font-family: Calibri;
}

body {
    background-image:url(Bilder/hintergrund.jpg);

}

div {
    margin: 5px 0px;
}

#container {
    
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    
    
    
    max-width: 950px;
    min-width: 600px;
    margin: 0 auto;
}

#kopf {
    
    -webkit-flex: 100%;
    -moz-flex: 100%;
    -ms-flex: 100%;
    flex: 100%;
    padding: 0px;
    

    
    position: relative;
    float:left;
}

#spruch {
    font-size: large;
    font-weight: bold;
    position: absolute;
    bottom: 0px;
    left: 100px;
}

.login {
    position:absolute;
    top:0px;
    right:0px;
    text-align:right;
}

#navigation {
    

    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;

    
    margin-right: 10px;
}

#text {
    
    -webkit-flex: 5;
    -moz-flex: 5;
    -ms-flex: 5;
    flex: 5;
    
}

#navigation ul{
    margin:0px;
    padding:0px;
    list-style-type:none;
    
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    

    
    -webkit-flex-flow: column;
    -moz-flex-flow: column;
    -ms-flex-flow: column;
    flex-flow: column;
    
    
    
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    -ms-justify-content: flex-start;
    justify-content: flex-start; 
}

#navigation li{
    margin:8px 0px;
    margin-top:0px;
    padding:5px 5px;
    line-height:20px;
    list-style-type:none;
    background-color:blue;
    position:relative;
}

#navigation li a{
    display:block;
    color:white;
    font-weight:bold;
    font-family: Calibri;
    text-decoration:none;
}

#navigation li:hover {
    background-color: red;
}


#navigation ul ul {
    visibility:hidden;
    position:absolute;
}

#navigation ul ul li{
    background-color:rgb(9, 230, 0);
}

#navigation ul li {
    position:relative;
}

#navigation ul li:hover ul{
    visibility:visible;
    width: 150px;
    left:100%;
    top:0%;
}

#werbung {
    background-color:black;
    width:100%;
    height:100px;
}

explanator · #5 (**permalink**) 08.11.2013, 19:44

Was habe ich gesagt:

Zitat:

Hinzu kommt dass nicht alle Browser alle Eigenschaften von Flexbox unterstützen.

Mozilla-Browser konnen kein Flex-flow wie von dir verwendet.

Schau doch auch mal in die LInks die genannt werden, da steht das nämlich unten als Hinweis.
Hier noch mal der Link -> Can I use Flexible Box Layout Module

Mavis88 · #6 (**permalink**) 08.11.2013, 20:05

Uff. Tut mir leid, diesen Teil habe ich verpasst.

Schade, ich habe mich ziemlich mit der Flexbox angefreundet! Ich muss wohl noch darauf verzichten...

Danke für die Unterstützung.