Question

我正在为我所在的分支机构建立自己的网站，我偶然发现了一个我无法解决的问题。

我用HTML / CSS制作了这个代码，我想要的是我的广告div可以放在我的容器div中。

CSS：

#body {
  font-family: verdana;
  background-color: #4C4C4C;
}
#container {
  background-color: #FFFFFF;
  height: 900px;
  width: 1250px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
  position: relative;
}
#header {
  background-image: url("company_banner.jpg");
  background-repeat: no-repeat;
  background-position: right top;
  vertical-align: middle;
  width: 1250px;
  height: 225px;
  position: relative;
}
#streep {
  background-color: #FC001E;
  margin-top: 0px;
  width: 1250px;
  height: 1px;
  position: relative;
}
#nav {
  margin-top: 0px;
  margin-left: 0px;
  width: 180px;
  height: 220px;
  position: absolute;
}
#advertisement{
  background-image: url("advertisement.jpg"); 
  background-position: top; 
  width: 200px; 
  height: 180px; 
  margin-top: opx; 
  position: relative
}
#content {
  margin-top: 0px;
  margin-left: 225px;
  width: 1025px;
  height: 625px;
  position: relative;
}
#footer {
  background-color: #FC001E;
  margin-bottom: 0px;
  width: 1250px;
  height: 50px;
  position: relative;
}
h1 {
  position: absolute;
  top: 65px;
  left: 25px;
}
ul#menu {
  padding: 10px;
  list-style-type: none;
  margin-top: 0px;
  border-radius: 4px 4px 4px 4px;
}
ul#menu li {
  padding: 10px;
}
ul#menu li a {
  background-color: black;
  color: white;
  padding: 10px 20px;
  border-radius: : 4px 4px 4px 4px;
  text-decoration: none;
}
ul#menu li a:hover {
  background-color: #FC001E;
}

HTML：

<!DOCTYPE html>
<html>

<head>
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
  <title>Nijhuis PC</title>
</head>

<body id=body>
  <div id=container>
    <div id=header>
      <h1>
        company name
      </h1>
    </div>

    <div id=streep></div>

    <div id=nav>
      <ul id=menu>
        <li><a href=index.html>Home</a>
        </li>
        <br>
        <li><a href=services.html>services</a>
        </li>
        <br>
        <li><a href=whoweare.html>who we are</a>
        </li>
        <br>
        <li><a href=contact.html>Contact</a>
        </li>
        <br>
      </ul>
    </div>

    <div id=content>
      welcom to the company's main website
      <br>
      <br>
    </div>

    <div id=advertisement></div>
    <div id=footer></div>
  </div>

</body>
</html>

我希望我的广告div位于导航div下。

你们能帮助我吗？

Answer 1

另一种方法是将其放在UL之后的#nav中。

广告div不适合容器div

1 个答案: