Добавление <! DOCTYPE html> удаляет фон моего контейнера

Question

Я работал над веб-сайтом в качестве проекта первого года, это наш первый веб-сайт, который нам нужно сделать, но я обнаружил, что мы должны были использовать <!DOCTYPE html> вместо <html> (который был рассказывается позже), но теперь, когда я это делаю, фон моего контейнера / содержимого div исчезает и отображается только немного, когда я помещаю в него букву.

* {
	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>

Фон содержимого / контейнера должен быть светло-серым.

html css

1

user4117456 6 Сен 2016 в 14:48

Answer 1

Как уже говорилось в других ответах, вам все еще нужен тег <html>. Вы сказали, что нижний колонтитул случайно оказался за пределами тела, но я поместил его внутри тела во фрагменте ниже. Один из способов добиться правильного размещения элементов в структуре HTML - установить float: left; в свой #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>

2

thepio 6 Сен 2016 в 12:07

Answer 2

Ньет опередила меня в комментариях к вашему сообщению, но #content нигде в вашем html не определено. Я предполагаю, что div с классом textClass - это то, что вы хотите, чтобы контент был, поэтому просто добавьте его в этот div, как вы сделали выше.

Некоторые другие мелкие моменты:

Вам по-прежнему нужен открывающий тег <html> в вашем определении !DOCTYPE
<footer> должен быть внутри <body> со всем остальным
Я бы рекомендовал установить эти повторяющиеся стили <p> в вашем основном содержании на содержащий div, такой как оскорбительный идентификатор #content. Стили по-прежнему будут реализованы в том виде, в котором они есть сейчас.

2

OwenJones 6 Сен 2016 в 12:04

Answer 3

! Doctype html сообщает вашей html-странице, какую версию HTML вы используете. По умолчанию это последняя версия HTML 5. Теперь html / html эти теги определяют начало и конец вашей html-страницы. Это обязательные теги для вашей HTML-страницы. И в дополнение к этим тегам вы используете html-тег! Doctype. Надеюсь, это тебе поможет.

1

tanu 6 Сен 2016 в 12:26

Answer 4

Добавьте следующую строку после вашего <body>

    <div id="content">

А затем не забудьте закрыть div перед </body>

Как указал Ниет, вам не хватало элемента с идентификатором 'content'

0

DiscoInferno 6 Сен 2016 в 12:05

Answer 5

<!doctype html>

Не заменяет тег <html>. Вам нужны оба, см. http://www.w3ctutorial.com/tags/tag_doctype.

<!DOCTYPE html>
<html>
<head>...</head>
...
</html>

Это помогает?

0

Mr Lister 17 Сен 2016 в 08:22

Answer 6

Содержимое идентификатора отсутствует, но я внес несколько простых изменений в CSS. Это то, что вы ищите?

* {
  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: 100%;
  vertical-align: top;
  background-color: #e6e6e6;
}
#container #header {
  width: 70%;
  height: 3%;
  margin: 0 auto;
  background: linear-gradient(#009940, #008000, #009800); 
}
#container #header p {
  color: white;
  font-size: 1.4em; 
  padding-top: 0.5%;
}
.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%;
}

1

user3470625user3470625 6 Сен 2016 в 12:01

Добавление <! DOCTYPE html> удаляет фон моего контейнера

6 ответов

Похожие вопросы

Новые вопросы

html