CSS Navbar落后于DIV

时间:2017-05-31 20:34:24

标签: html css html5

我一直在尝试在我的网页上获得多个背景图片,但我的收视率不超过2,所以我开始认为我可能会使用div。但是当我使用div时,我在屏幕的顶部和侧面留下了5个白色像素,直到我将位置更改为绝对位置然后我的导航栏被卡在div后面...如果有人可以帮我修复我的问题。

我的代码不是那么好,但这就是我现在所拥有的:



#P1Tekstvlak1_1 {
  background-image: url("DakB1.jpg");
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}


/** — Navbar —*/

#nav {
  color: FFFFFF;
  opacity: 0.9;
}

#nav_wrapper {
  width: auto;
  margin: 0 auto;
  text-align: left;
}

#nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: fixed;
  min-width: 200px;
  text-align: center;
  background-color: #B50B26;
}

#nav ul li {
  display: inline-block;
}

#nav ul li:hover {
  color: white;
  text-align: center;
  text-shadow: 1px 1px 1px #FFFFFF;
}

#nav ul li a,
visited {
  color: #FFFFFF;
  font-size: 20px;
  display: block;
  padding: 15px;
  text-decoration: none;
}

#nav ul li:hover ul {
  display: block;
}

<div id="nav">
  <div id="nav_wrapper">
    <ul>
      <li><a href="TDPD.html">Home</a></li>
      <li><a href="TDPD.html">Over</a></li>
      <li><a href="TDPD.html">Renovatie</a></li>
      <li><a href="TDPD.html">Nieuwbouw</a></li>
      <li><a href="TDPD.html">Vacatures</a></li>
      <li><a href="TDPD.html">WKA</a></li>
      <li><a href="TDPD.html">Contact</a></li>
    </ul>
  </div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

删除绝对定位,然后应用CSS重置,如here。浏览器具有一些样式属性,默认情况下它适用于可访问性目的。你应该删除它们。我在开始构建任何Web UI之前都这样做。

注意:绝对定位将堆叠元素而不是应用布局。这就是你在资产净值背后看到它的原因