Artusur: Galerie floatet nicht und die Navigation ist auch draufgegangen.

Beitrag lesen

Hi. Ich habe gerade vor zwei Wochen mit html angefangen und bin noch am üben. Leider ist bei der Erstellung meiner Testseite irgendwas im externen CSS nicht in Ordnung. Kann mir jemand evtl. sagen wo der Fehlerteufel in meiner CSS ist? Ich habe es zwar mit einem clearfix hinter meiner Navigation probiert. Hat aber auch nicht funktioniert. Die Galerie floatet nicht wie sie sollte und auch meine Navigation ist zwar da, aber ohne Farbe etc. In meiner Index Seite ist alles vorhanden. Danke schon mal im Voraus. Bin da gerade etwas überfragt. Hier mal der CSS Code.


/*
*{
	margin:0;
	padding:0;
    font-family: Verdana;
}

.wrapper{
    display:flex;
    flex-flow:column wrap;
    text-align:center;
}

.wrapper > *{
    flex:1 100%;
}

.header{
    background-color: #27A9E1;
    color:white;
    height:200px;
    text-align: center;
    font-size: 72px;
    line-height: 200px;
}
.navigation{     /*parent*/
    list-style: none;
    margin:0;
    padding:0;
    background-color: #BF362E;
    border-top:2px solid white;
    display:flex;
    flex-flow:row wrap;
}
.navigation > a{     /*kind*/
    text-decoration: none;
    display:block;
    color:#F7EE6F;
    text-align:center;
    padding:15px;
    background-color: #BF362E;
}
.navigation a:hover{
    background-color:#F7EE6F;
    color:#BF362E;
}


}
.row{
    background-color: #F7EE6F;
    display:flex;
    flex-wrap:wrap;
    padding:0;
}
.col{
    padding:0px;
    flex:100;
}

.col img{
    max-width: 100%;
    height:auto;
    margin-top:0px;
}
footer{
    background-color: #BF362E;
    height:200px;
    color:#F7EE6F;
    text-align: center;
    font-size: 40px;
    line-height: 200px;
}

@media screen and (min-width:565px)
{
    .navigation{
        flex-flow:row wrap;
        justify-content:space-around;
    }
}

@media screen and (min-width:850px)
{
    .navigation{
        justify-content:flex-end;
    }
} 

@media (min-width:40em){
    .col{
        flex:50%;
        max-width:50%;
    }
    
@media (min-width:68.75em){
    .col{
        flex:25%;
        max-width:25%;
    }
}
*/

akzeptierte Antworten