Flexboxüberlappt

Tito · 1 September 2018

Hallo Leute

ich bin Anfänger und habe ein Problem, wenn ich auf die Tablet Variante gehe.
Zwischen Flexbox (C,D) und E ist kein Zwischenraum warum.
Für eure Hilfe wäre ich euch dankbar.

MfG
Tino

HTML:

<!DOCTYPE html>

<html>
    
    
    <head>
        <title>Flexboxen</title>
        <meta charset="utf-8">
        
        <style>
        #wrapper {
                max-width: 480px;
                height: 6000px;
                text-align:center;
                font: 15px Arial,sans-serif;
                /*background-color: lightgrey;*/
            }
        div#logo{
                background: black;
                width: 120px;
                collor: white;
                padding: 20px;
        }
        
        figure#Bild {
            width: auto;
            height: 400px;
            background: yellow;
            margin: 0px 0px 20px 0px;
        }
        
        nav {
            width: auto;
            paddig: 20px;
            background: #61c2f0;
        }   
        
        .BannerBlau {
            width: auto;
            height: 400px;
            background: #0000FF;
        
        }
        
        
        
        .ArticlePink {
            width: auto;
            height: 400px;
            background: pink;
        }
        
        footer {
            width: auto;
            height: 600px;
            background: #a9a9a9;
        
        }
        
        .abstandUnten {
        
        margin-bottom: 20px;
        
        }
        
        #E, #F{
            display: none;
            background: pink
        }   
        
        /*######### Tablet 640px ##########*/
        
        @media screen and (min-width: 640px){
        
        
        #wrapper {
            max-width:640px;
        }
        
        
        #FlexArticleABCD{
            display: flex;
            width: 640px;
            height: 420px;
            background: red;
            justify-content: space-between;
            flex-wrap: wrap;
                    
        }
        .ArticlePink{
            width: 300px;
            height: 300px;
        }
        
        #E, #F {
         display: block;
         width: 640px;
        
        
         }
        
        
        #F {
            height: 600px;
            
        }   
        }
        @media screen and (min-width: 1024px) {
        
        
            wrapper {
                max-width: 1024px;
                
                
                
            }
            #FlexArticleABCD{
                width: 1024px;
                height: 260px;   
            }
            .ArticlePink {
                width: 240px;
                height: 240px;
                
            }
            #A {
                order: 3;
            }
        
            #B {
                order: 4;
            }
            
            #C {
                order: 2;
            }
            
            #D {
                order: 1;
            }
            
        </style>
    
    </head>

    <body>
    
    
    <div id="wrapper">
    
        <header><div id="logo" class="abstandUnten">LOGO</div></header>
        <nav class="abstandUnten">Navigation</nav>
        <figure id="Bild">Bild</figure>
        
        
        <section id="bannerA" class="BannerBlau abstandUnten">Banner A</section>
        
        <div id="FlexArticleABCD">
         <article id="A" class="ArticlePink abstandUnten">A</article>
         <article id="B" class="ArticlePink abstandUnten">B</article>
         <article id="C" class="ArticlePink abstandUnten">C</article>
         <article id="D" class="ArticlePink abstandUnten">D</article>
        </div>
        
        
        <article id="E" class="ArticlePink abstandUnten">E</article>
        
        
        <div id="FlexArticleBannerB">
        
         <section id="bannerB" class="BannerBlau abstandUnten">Banner B</section>
        </div>
        <article id="F" class="abstandUnten">F</article>
        
        
        
        <footer>Footer</footer>
    </div>
    
    
    
    </body>





































</html>

Tito · 2 September 2018

Vielen Dank für deine Antwort. Ist schon komisch mit den festen Maßen da dieses Layout zum größten Teil ein web Dozent gegeben hat nun frage ich mich wie wäre es dann deiner Meinung nach zu realisieren genau dieses Layout zu bekommen ohne feste größen.

MrMurphy · 2 September 2018

Hallo

Es gibt leider viele Web-Dozenten die mit aktuellem HTML / CSS-Lösungen überfordert sind. Dazu scheint deiner zu gehören.

Wie Sempervivum bereits schrieb sollten feste Größen nach Möglichkeit vermieden werden.

Zudem haben heutzutage viele Smartphones höhere Auflösungen als Tablets oder Desktops. Folge: Eine Aufteilung des Layouts für Smartphones, Tablets und Destops ist schlicht nicht möglich. Dafür ist Flexbox deshalb auch überhaupt nicht gedacht.

Breiten und Höhen sollen deshalb so weit wie möglich flexibel sein und sich dem Inhalt anpassen, nicht dem Ausgabegerät. Deshalb ist für ein Layout zunächst auch immer ein sinnvoller Inhalt erforderlich. Der fehlt bei dir komplett. Deshalb kann zu deinem nicht vorhandenen Inhalt auch kein aktuelles Layout erstellt werden.

Auch andere Lösungen solltest du überdenken. Zum Beispiel eine Schriftgröße von 15px. Bereits seit Jahrzehnten ist einer der am häufigsten Kritikpunkte, dass die Schriftgröße von Webseiten zu klein vorgegeben wird. Die Standardschriftgröße sollte deshalb nur erhöht werden, zumal Webseiten im Prinzip unendlich groß werden können.

Gruss

MrMurphy

Flexboxüberlappt

Tito

Neues Mitglied

Tito

Neues Mitglied

MrMurphy

Senior HTML'ler

Neueste Beiträge