html - 广告 div 不适合容器 div

标签 html css ads

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

我用 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 下。

你们能帮帮我吗?

最佳答案

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

关于html - 广告 div 不适合容器 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32923432/

相关文章:

javascript - 移动 Google 广告时,Firefox 中的 JavaScript 出现问题

javascript - 循环队列方式的 HTML 列表?

jquery - CSS 中的底部居中(拇指托盘)

IOS:在 iOS 应用程序中转换广告

用于在日历上添加事件的 html 布局

javascript - 如何使用 JavaScript 更改 SASS 属性?

android - 当我使用自己的 admob id 时,广告加载通常会失败。 (test_id 广告加载得很好),

javascript - 当标题属性显示工具提示时是否有一个事件?

javascript - 用于启动/停止无限循环的按钮,每个函数之间有延迟

javascript - Oracle APEX - 如何在打印时缩放区域以适合单页