-1

Why are the elements with the class .clearfix still collapsing and they have no height. the clearfix should solve it i thought. the class .clearfix is found under /GENERELLES/ i tried everything but i cant solve this problem. the problem is that the elements with the class .clearfix dont have any height although i gave them the clearfix hack. pls help i dont know how to go on.

/*===FARBEN===
BLAU:#1F4E8C
GRAU:#3D3F45
HELLGRAU: #E5E5E5
ROT: #A62C21
*/

/* GLOBAL */
body {
  margin: 0;
  font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
  font-size:16px;
}

* {
  box-sizing: border-box;
}

/* GENERELLES */

.clearfix::after{
  content= "";
  display: block;
  clear: both;
}

/*===NAVIGATIONSLEISTE===*/

.header-nav{
  width:100%;
  height:50px;
  background-color:#3d3f45;
  position:relative;
  font-size:25px;
  font-weight:bold;
}
.header-nav a>img{
  position:absolute;
  height:30px;
  width:auto;
  top:10px;
  left:10px;
}
.header-nav ul>li{
  display:inline-block;
  height:100%;
}

.header-nav ul{
  margin:0;
  padding:0;
  position:absolute;
  height:100%;
  right:10px;
}
.header-nav ul>li>a{
  display:inline-block;
  margin-top:10px;
}

.header-nav ul>li>a:link{color:white;text-decoration:none;}
.header-nav ul>li>a:hover{color:#E5E5E5;text-decoration:none;}
.header-nav ul>li>a:active{color:#E5E5E5;text-decoration:none;}
.header-nav ul>li>a:visited{color:white;text-decoration:none;}

#active{
  background-color:#A62C21;
}

/* MOBILES NAVIGATIONSMENÜ */
#mobile-nav-button{
  color:white;
  float:right;
  font-size:30px;
  border: 2px solid white;
  padding-left:9px;
  padding-right:9px;
  margin-top:5px;
  margin-right:5px;

}
#mobile-nav-content>ul>li{
  display:block;
  background-color:#3D3F45;
  padding-left:20px;
  padding-right:20px;
}
#mobile-nav-content>ul{
  margin-right:40px;
}

/* HEADER-BANNER */
#header-banner{
  background: url("../img/hintergrund.jpg") no-repeat;
  width:100%
  height:0;
  padding-top:20.83%;
  background-size:contain;
}
#header-banner-klein{
  background: url("../img/hintergrund-klein.jpg") no-repeat;
  width:100%
  height:0;
  padding-top:15.625%;
  background-size:contain;
}
/* GRID SYSTEM */

.container{
  width:95%;
  margin-left:auto;
  margin-right:auto;
}

.row::after{
  content:"";
  clear:both;
  display:block;
  border: 0 !important;
}
[class*="col-"]{
  float:left;
  padding:10px;
}

.col-1{width:16.6666%;}
.col-2{width:33.3333%;}
.col-3{width:50%;     }
.col-6{width:100%;    }

 /* GRID SYSTEM SICHTBARKEIT
.container,.container *{
border:1px solid #91c4ff;
}

[class*="col-"]{
  background-color:#bfddff;
}
p {background-color:#91c4ff;
padding:0;
margin:0;
color:#fff;
text-align:center;
} */

/* Responsive Design */
@media(max-width:768px){
  .col-1{width:33.3333%;}
  .col-2{width:50%;}
  .col-3{width:100%;}
}
@media(max-width:480px){
  .col-1{width:50%;}
  .col-2{width:100%;}
  .col-3{width:100%;}
}

/* GRID SYSTEM FIX */

.header-nav *{
  padding:0;
  border:0;
}

.header-nav .container{
  width:100%;
}
<body>
    <!-- NAVIGATIONSLEISTE -->
    <nav class="header-nav">

      <!-- <div class="container">
        <div class="row">
          <div class="col-6">
            <a href="index.html">
              <img src="src/img/webdesign-logo.png">
            </a>
            <ul>
              <li id="active"><a href="index.html">Startseite</a></li>
              <li><a href="Leistungen.html">Leistungen</a></li>
              <li><a href="Kontakt.html">Kontakt</a></li>
              <li><a href="Impressum.html">Impressum</a></li>
            </ul>
          </div>
        </div>
      </div> -->
      <div class="container">
        <div class="row">
          <div class="col-6 clearfix">
            <a href="index.html">
              <img src="src/img/webdesign-logo.png">
            </a>

            <div id="mobile-nav-dropdown" class="clearfix">

              <div id="mobile-nav-button">&equiv;</div>

              <div id="mobile-nav-content" class="clearfix">

                <ul>
                  <li id="active"><a href="index.html">Startseite</a></li>
                  <li><a href="Leistungen.html">Leistungen</a></li>
                  <li><a href="Kontakt.html">Kontakt</a></li>
                  <li><a href="Impressum.html">Impressum</a></li>
                </ul>

              </div>

            </div>



          </div>
        </div>
      </div>
    </nav>
No Body
  • 3
  • 4

1 Answers1

0

The role should be:

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}

Check this also.

A. Meshu
  • 4,053
  • 2
  • 20
  • 34