添加删除我的容器背景

时间：2016-09-06 11:48:21

标签： html css

我作为第一年的项目在网站上工作，这是我们需要制作的第一个网站，但我发现我们应该使用<!DOCTYPE html>代替{{1 （后来被告知）但是现在我这样做了，我的容器/内容div的背景消失了，只有当我在里面放一个字母时才显示一点。

＆＃13;
＆＃13; 
<html>
＆＃13; 
* {
	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%;
}
＆＃13;
＆＃13;
＆＃13;

内容/容器的背景应为浅灰色

6 个答案:

答案 0 :(得分：2)

Niet在你的帖子的评论中打败了我，但是你的html中#content没有被定义。我假设带有textClass类的div是您想要的内容，所以只需将其添加到上面的div中。

其他一些小问题：

  • 您仍然需要在<html>定义
    • 下面打开!DOCTYPE标记
  • <footer>应该在<body>内，其他所有内容
  • 我建议将主要内容中重复的<p>个样式设置为包含div，例如有问题的#content id。这些款式现在仍然会被拉过来。

答案 1 :(得分：2)

正如其他答案中所述，您仍然需要<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 :(得分：1)

缺少ID内容，但我在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%;
}

答案 3 :(得分：1)

！doctype html告诉你的html页面你正在使用哪个版本的HTML。默认情况下，它是HTML 5的最新版本。 现在，html / html这些标签定义了html页面的开头和结尾。 这些是HTML页面的必填标记。 除了这些标签，您还可以使用！doctype html标签。 希望这会对你有所帮助。

答案 4 :(得分：0)

<!doctype html>

不会替换<html>标记。您需要两者，请参阅http://www.w3ctutorial.com/tags/tag_doctype。

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

这有帮助吗？

答案 5 :(得分：0)

在<body>

之后添加以下行 
    <div id="content">

然后确保在</body>

之前关闭div

正如Niet指出的那样，你缺少一个内容为＆＃39;

的元素
相关问题
最新问题