Lucas Ouwens Lucas Ouwens - 3 months ago 10
CSS Question

Adding <!DOCTYPE html> removes my container background

I've been working on a website as a first year project, this is our first website that we need to make but i found out that we were supposed to use the

<!DOCTYPE html>
instead of
<html>
(which was told later on) but now that i do that, the background of my container/content div disappears and only shows a bit when i put a letter inside of it.



* {
padding: 0;
margin: 0;
min-height: 1px;
min-width: 1px;
}

html {
height: 100%;
}

#nav {
width: 100%;
background: linear-gradient(#009940, #009900, #009800);
}

#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

#nav li {
float: left;
}

#nav li a {
display: block;
transition: background-color 0.5s ease;
color: white;
font-size: 16px;
padding: 14px 18px;
text-align: center;
text-decoration: none;
}

#nav li a:hover {
background-color: #396108;
}

#nav li a img {
position: absolute;
margin-top: -0.4%;
margin-left: -0.7%;
}

#container {
width: 70%;
margin-left: 15%;
vertical-align: top;
}


#container #header {
width: 100%;
height: 3%;
background: linear-gradient(#009940, #008000, #009800);
}

#container #header p {
color: white;
font-size: 1.4em;
padding-top: 0.5%;
}

#content {
width: 100%;
height: 100%;
background-color: #e6e6e6;
}

.textClass {
border: 2px solid black;
margin-top: 7.5%;
margin-left: 5%;
margin-right: 5%;
width: 40%;
height: 20.7%;
background-color: white;
overflow: hidden;
float: left;
}

.textClass img {
padding-left: 1%;
padding-top: 1%;
padding-right: 1%;
width: 25%;
float: left;
transition:height 0s 10000s;
}

.textClass p {
padding-top: 0.5%;
word-wrap: break-word;
vertical-align: top;
}

.gallery {
float: left;
margin-top: 9%;
margin-left: 9%;
}

.gallery:hover img {
transform: scale(1);
transition: transform 1.5s ease;
}

.gallery img:hover {
transform: scale(1.75);
}

footer {
background-color: #009902;
text-align: center;
margin-left: 0;
color: white;
width: 70%;
margin-left: 15%;
margin-top: 70%;
}

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>Interreses - Website</title>
<link rel="shortcut icon" type="image/x-icon" href="/images/Logo.ico" />
</head>
<body>

<div id="nav">
<ul>
<li><a href="/index.html">Home</a></li>
<li><a href="/interreses.html">Interreses</a></li>
<li><a href="/Groepsleden.html">Groepsleden</a></li>
<li><a href="/Opleiding.html">Opleiding</a></li>
<li><a href="/fotogalerij.html">Fotogalerij</a></li>
<li style="float: right;"><a style="width: 20px; height: 20px;" href="/index.html"><img src="/images/logo.png"></img></a></li>
</ul>
</div>
<div id="container">
<div id="header">
<p style="text-align: center;"> Interesses </p>
</div>
<div id="content">
<div style="width: 60%; height: 70%; margin-left: 19%; margin-top: 12%;" class="textClass">
<p style="font-size: 1.2em; text-align: center;">Ik ben geinterreseerd in Gamen, Programmeren en Video Editing, ik zal ook uitleggen waarom.<br><br></p>
<img src="/images/Gamen.jpg"/>
<p style="font-size: 1.2em;">Gamen is leuk om te doen in mijn vrije tijd, ik hoop dan ook wel minimaal 60 uur per twee weken aan gamen besteed, bijvoorbeeld: <br> Gta V: 50 Uren <br> Cs:Go: 193 Uren <br> Age of empires 2: 71 Uren <br> Skyrim: 41 Uren <br> Garry's mod: 16 Uren<br></p>
<img src="/images/Programmeren.jpg"/>
<p style="font-size: 1.2em;">Programmeren is ook een hobby van mij, ik programmeer meestal in Java maar nu ook in Javascipt, HTML5 en CSS3, dit kon ik overigens wel al, maar ik heb het lang niet meer <br> Java: 3 jaar <br> HTML: 1/2-1 jaar <br> CSS3: 1/2-1 jaar <br> Javascript: 1-4 maanden<br></p>
<img src="/images/Java.png"/>
<p style="font-size: 1.2em;"><br>Java is mijn favoriete taal waar ik later ook een baan mee wil krijgen <br> ik programmeer al 3 jaar java, bijvoorbeeld: <br> Enumeratie, Abstracte classes <br> Interfaces en objecten <br> en nog veel meer, meestal programmeer ik plugins voor games bijvoorbeeld Maple Story, Rune Scape en Minecraft </p>
<img style="margin-left: -27%; margin-top: 7%;" src="/images/VidEdit.jpg"/>
<p style="font-size: 1.2em; margin-top: 7%;"><br>Video Editing deed ik erg vaak, nu niet meer maar het was wel een leuke tijdbesteding van mij <br> MLG compilatie filmpjes maken en ze daarna weer verwijderen <br> ik deed het video editing puur om het editen dus ik heb dus overige data want mijn PC is gereset<br></p>
</div>
</div>
</div>
</body>
<footer id="footer" style="margin-left: 0; color: white; width: 70%; margin-left: 15%;">Copyright by ******** (C) 2016-2019 </footer>
</html>





The background of the content/container should be light gray

Answer

As already stated in the other answers you still need the <html> tag. Footer you said was by accident outside the body but I placed it inside the body in the snippet below. One way to get your elements flowing correctly in your HTML structure is to set float: left; to your #content div.

* {
  padding: 0;
  margin: 0;
  min-height: 1px;
  min-width: 1px;
}
#nav {
  width: 100%;
  background: linear-gradient(#009940, #009900, #009800);
}
#nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#nav li {
  float: left;
}
#nav li a {
  display: block;
  transition: background-color 0.5s ease;
  color: white;
  font-size: 16px;
  padding: 14px 18px;
  text-align: center;
  text-decoration: none;
}
#nav li a:hover {
  background-color: #396108;
}
#nav li a img {
  position: absolute;
  margin-top: -0.4%;
  margin-left: -0.7%;
}
#container {
  width: 70%;
  margin-left: 15%;
  vertical-align: top;
}
#container #header {
  width: 100%;
  height: 3%;
  background: linear-gradient(#009940, #008000, #009800);
}
#container #header p {
  color: white;
  font-size: 1.4em;
  padding-top: 0.5%;
}
#content {
  width: 100%;
  height: 100%;
  float: left;
  background-color: #e6e6e6;
}

.textClass {
  border: 2px solid black;
  margin-top: 7.5%;
  margin-left: 5%;
  margin-right: 5%;
  width: 40%;
  height: 20.7%;
  background-color: white;
  overflow: hidden;
  float: left;
}
.textClass img {
  padding-left: 1%;
  padding-top: 1%;
  padding-right: 1%;
  width: 25%;
  float: left;
  transition: height 0s 10000s;
}
.textClass p {
  padding-top: 0.5%;
  word-wrap: break-word;
  vertical-align: top;
}
.gallery {
  float: left;
  margin-top: 9%;
  margin-left: 9%;
}
.gallery:hover img {
  transform: scale(1);
  transition: transform 1.5s ease;
}
.gallery img:hover {
  transform: scale(1.75);
}
footer {
  background-color: #009902;
  text-align: center;
  margin-left: 0;
  color: white;
  width: 70%;
  margin-left: 15%;
  margin-top: 70%;
}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <title>Interreses - Website</title>
  <link rel="shortcut icon" type="image/x-icon" href="/images/Logo.ico" />
</head>

<body>

  <div id="nav">
    <ul>
      <li><a href="/index.html">Home</a>
      </li>
      <li><a href="/interreses.html">Interreses</a>
      </li>
      <li><a href="/Groepsleden.html">Groepsleden</a>
      </li>
      <li><a href="/Opleiding.html">Opleiding</a>
      </li>
      <li><a href="/fotogalerij.html">Fotogalerij</a>
      </li>
      <li style="float: right;">
        <a style="width: 20px; height: 20px;" href="/index.html">
          <img src="/images/logo.png" />
        </a>
      </li>
    </ul>
  </div>
  <div id="container">
    <div id="header">
      <p style="text-align: center;">Interesses</p>
    </div>
    <div id="content">
      <div style="width: 60%; height: 70%; margin-left: 19%; margin-top: 12%;" class="textClass">
        <p style="font-size: 1.2em; text-align: center;">Ik ben geinterreseerd in Gamen, Programmeren en Video Editing, ik zal ook uitleggen waarom.
          <br>
          <br>
        </p>
        <img src="/images/Gamen.jpg" />
        <p style="font-size: 1.2em;">Gamen is leuk om te doen in mijn vrije tijd, ik hoop dan ook wel minimaal 60 uur per twee weken aan gamen besteed, bijvoorbeeld:
          <br>Gta V: 50 Uren
          <br>Cs:Go: 193 Uren
          <br>Age of empires 2: 71 Uren
          <br>Skyrim: 41 Uren
          <br>Garry's mod: 16 Uren
          <br>
        </p>
        <img src="/images/Programmeren.jpg" />
        <p style="font-size: 1.2em;">Programmeren is ook een hobby van mij, ik programmeer meestal in Java maar nu ook in Javascipt, HTML5 en CSS3, dit kon ik overigens wel al, maar ik heb het lang niet meer
          <br>Java: 3 jaar
          <br>HTML: 1/2-1 jaar
          <br>CSS3: 1/2-1 jaar
          <br>Javascript: 1-4 maanden
          <br>
        </p>
        <img src="/images/Java.png" />
        <p style="font-size: 1.2em;">
          <br>Java is mijn favoriete taal waar ik later ook een baan mee wil krijgen
          <br>ik programmeer al 3 jaar java, bijvoorbeeld:
          <br>Enumeratie, Abstracte classes
          <br>Interfaces en objecten
          <br>en nog veel meer, meestal programmeer ik plugins voor games bijvoorbeeld Maple Story, Rune Scape en Minecraft</p>
        <img style="margin-left: -27%; margin-top: 7%;" src="/images/VidEdit.jpg" />
        <p style="font-size: 1.2em; margin-top: 7%;">
          <br>Video Editing deed ik erg vaak, nu niet meer maar het was wel een leuke tijdbesteding van mij
          <br>MLG compilatie filmpjes maken en ze daarna weer verwijderen
          <br>ik deed het video editing puur om het editen dus ik heb dus overige data want mijn PC is gereset
          <br>
        </p>
      </div>
    </div>
  </div>
  <footer id="footer" style="margin-left: 0; color: white; width: 70%; margin-left: 15%;">Copyright by ******** (C) 2016-2019</footer>
</body>
</html>

Comments