html - 在 html/css 中停止类

Question

我正在用 html 和 css 制作网站，但遇到了问题。在我的 css 文件中，我将 id 设置为“完整”，它在侧边栏之后设置了木制背景，它应该在所有页面上继续。在我的“图片”类中，我制作了 80% 宽度的白色面板 - 因此中间应该有 80% 的白色背景，10% 的边缘应该是木制的。它在我的文章部分之前一直正常工作，我在其中添加了一些比萨店的图像。立即没有木边，只有白色。我不明白，因为我的“完整”ID 和“图片”类一直持续到主体结束。有人可以看到错误在哪里吗？ Image showing error

* {
  padding: 0;
  margin: 0;
  border: 0;
}

.container {
  margin: auto;
  overflow: hidden;
  width: 100%;
}

#full {
  background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}

.picture {
  margin: auto;
  width: 80%;
  background: white;
}

#pizzaObrazok {
  background-image: url("img/pizzaCompleted.png");
  width: 100%;
  height: 210px;
  margin: 0px;
}

nav {
  float: left;
  margin-left: 2px;
  width: 100%;
  height: 32px;
}

ul {
  float: left
}

li {
  display: inline;
  border: 4px solid black;
  font-size: 24px;
  padding: 10px 64px;
  background-color: #990000;
  color: #ffffff;
}

li a {
  color: #ffffff;
  text-decoration: none;
  padding-top: 8px;
  padding-bottom: 5px;
  vertical-align: middle;
}

#imgPizza {
  width: 59%;
  height: 270px;
  padding-left: 190px;
  padding-top: 30px;
  padding-bottom: 30px;
}

article p {
  font-size: 120%;
  font-family: fantasy;
  text-align: center;
  margin-right: 160px;
}

#imgPizza2 {
  width: 30%;
  height: 270px;
  position: absolute;
  transform: rotate(345deg);
  margin-top: 100px;
  margin-left: 50px;
  border: 6px solid red;
}

#imgPizza3 {
  width: 30%;
  height: 270px;
  position: absolute;
  margin-left: 390px;
  margin-top: 100px;
  transform: rotate(15deg);
  border: 6px solid red;
}

#phone {
  border: 2px solid black;
  margin-top: 150px;
  margin-right: 180px;
  padding: 5px;
  position: absolute;
  display: inline;
  text-align: center;
  background: #ff4d4d;
}

<header>
  <div id="pizzaObrazok">
  </div>
</header>
<div id="full">
  <section id="navigation">
    <div class="container">
      <nav>
        <ul>
          <li><a href="pizza.html">ÚVOD</a></li>
          <li><a href="#">FOTO</a></li>
          <li><a href="#">JEDÁLNY LÍSTOK</a></li>
          <li><a href="#">KDE NÁS NÁJDETE</a></li>
          <li><a href="#">NÁZORY</a></li>
        </ul>
      </nav>
    </div>
    &nbsp
  </section>
  <div class="picture">
    <img id="imgPizza" src="img/pizzacheese.jpg">
    <aside id="phone">
      <h2>Telefónne číslo:</h2>
      <h2> 0905 741 963</h2>
    </aside>
  </div>
  &nbsp
  <div class="picture">
    <article>
      <p>U nás dostanete najchutnejšiu pizzu z výlučne kvalitných surovín</p>
      <img id="imgPizza2" src="https://cdn.vox-cdn.com/uploads/chorus_image/image/50289897/pizzeria_otto.0.0.jpg">
      <img id="imgPizza3" src="https://media-cdn.tripadvisor.com/media/photo-s/09/bc/74/79/pizzeria-du-drugstore.jpg">
    </article>
  </div>
</div>

Answer 1

您的元素“#imgPizza2”和“#imgPizza3”的位置绝对位于“#full”包装器之外。您可以做各种事情来达到您正在寻找的效果，但取决于许多其他事情。

我认为最简单的方法是把你的 background image in to the body而不是在 warpper "#full"或 change the postion of your images 中等等。

body {
  background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}