Html 制作一个班级网站，背景图片比我需要的要高？_Html_Css_Image

Html 制作一个班级网站，背景图片比我需要的要高？

html css image

Html 制作一个班级网站，背景图片比我需要的要高？,html,css,image,Html,Css,Image,在我的CSS中，redbar.png图像的位置高于容器中所需的位置。它正越过我的水平导航，不应该，我不完全确定如何让它离开。。任何提示都将不胜感激以下是有关问题的网站：这是我的HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Red Ball Pizza</title> <sc

在我的CSS中，redbar.png图像的位置高于容器中所需的位置。它正越过我的水平导航，不应该，我不完全确定如何让它离开。。任何提示都将不胜感激

以下是有关问题的网站：

这是我的HTML代码

    <!DOCTYPE html>
    <html>

    <head>

    <meta charset="UTF-8" />
    <title>Red Ball Pizza</title>
    <script src="modernizr-1.5.js"></script>
  <link href="pizza.css" rel="stylesheet" type="text/css" />

    </head>

    <body>
    <div id="container">
     <header><img src="rblogo.png" alt="Red Ball Pizza" /></header>

     <nav class="horizontal">
        <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">Menu</a></li>
           <li><a href="#">Locations</a></li>
           <li><a href="#">Catering</a></li>
           <li><a href="#">About Us</a></li>
        </ul>
     </nav>

     <nav class="vertical">
        <ul>
           <li><a href="#">Pizza</a></li>
           <li><a href="#">Salad</a></li>
           <li><a href="#">Pasta</a></li>
           <li><a href="#">Sandwiches</a></li>
           <li><a href="#">Appetizers</a></li>
           <li><a href="#">Pocket Pizzas</a></li>
           <li><a href="#">Fish &amp; Shrimp</a></li>
           <li><a href="#">Chicken &amp; Wings</a></li>
           <li><a href="#">Beverages</a></li>
           <li><a href="#">Dessert</a></li>
           <li><a href="#">Catering</a></li>
           <li><a href="#">Download Menu</a></li>
           <li><a href="#">Catering Menu</a></li>
        </ul>
      </nav>

      <section id="main">
        <img src="toppings.png" alt="" />
        <p>At Red Ball Pizza, we want to satisfy every appetite. That's 
           why our menu contains a variety of different items. With 
           so many choices, everyone's favorites are available!
        </p>
        <p>
           Red Ball Pizza is NOT a franchise, a chain, or a corporation. 
           It is 100% locally owned and operated. Red Ball Pizza is 
           devoted to providing the highest quality and the best service 
           possible. Our only goal is to provide you with a great 
           pizza &#8230; EVERY TIME!
        </p>

        <div class="coupon">
           <h1>Classic Combo</h1>
           <p>16" 1-Topping Pizza
              &amp; a 2-Liter of Your Choice
              For Only $14.99
           </p>
           <p>Expires 3/14</p>
        </div>
        <div class="coupon">
           <h1>Pizza &amp; Stix</h1>
           <p>16" Specialty Pizza
              Reg. Cheese Stix &amp; a 2-Liter
              For Only $21.99
           </p>
           <p>Expires 3/14</p>
        </div>
        <div class="coupon">
           <h1>1/2 Price</h1>
           <p>Buy any 16" Specialty Pizza
              at Reg. Price &amp; Get a 2nd
              Pizza For Half Price
           </p>
           <p>Expires 3/14</p>
        </div>
        <div class="coupon">
           <h1>Pizza &amp; Wings</h1>
           <p>14" 2-Topping Pizza 
              &amp; 12 Wings
              For Only $15.99
           </p>
           <p>Expires 3/31</p>
        </div>
        <div class="coupon">
           <h1>$3.00 Off</h1>
           <p>Get $3.00 Off
              any 16" Pizza at
              Menu Price
           </p>
           <p>Expires 3/31</p>
        </div>
        <div class="coupon">
           <h1>Sub Dinner</h1>
           <p>1 Toasted Sub &amp; Chips
              &amp; 1 20oz Soda
              For Only $6.99
           </p>
           <p>Expires 3/31</p>
        </div>
     </section>

     <aside>
        <h1>Pizza Pizzazz</h1>
        <ul>
           <li>93% of Americans eat pizza at least once a month.</li>
           <li>Mozzarella was originally made from the milk of Indian 
               water buffalo in the 7th century.</li>
           <li>75 acres of cheese is eaten every day.</li>
           <li>23 pounds of cheese is eaten every year by the average 
               person.</li>
           <li>The tomato was brought back to Italy by Spaniards returning 
               from Mexico in the 16th century.</li>
           <li>The busiest night for take-out pizza orders is Halloween.</li>
            <li>The first pizzeria opened in 1830 in Naples, Italy. </li>
        </ul>
     </aside>

     <footer>
        <address>
           Red Ball Pizza &bull;
           811 Beach Drive &bull;
           Ormond Beach, FL  32175 &bull;
           (386) 555 - 7499 
        </address>
     </footer>

     </div>

     </body>

     </html>

好了，我们走吧，就因为我爱你。我认为您描述的问题是由水平类div中的ul元素引起的。默认情况下，浏览器将提供uls填充/边距。我所要做的就是设置。水平ul{margin:0；padding:0；}。

您可以通过添加以下内容来清除nav

集装箱导航水平{ 。。。溢出：自动

然后，您可能需要添加适当的边距/填充，例如margin bottom:16px，以与ul上的边距对齐

另外，你应该查看css重置。我在这里没有看到任何重置，它们会让你的生活更轻松

 #container nav.horizontal {
     margin-top: -16px;
 }

将此添加到CSS中。

当我们无法获得图像时，很难提供帮助，如果可能的话，可以将演示或图像添加到一个实时url中。此外，如果您可以更深入地解释一些事情，这可能会有所帮助。对于您的海豚，您实际上只需要边距：0，不过我建议您在将来重置边距和p使用简单的*{margin:0；padding:0；}添加所有元素以上两个答案都可以修复您的页面，但我会小心设置太多像素特定的边距和填充，以使您的基本内容处于正确位置，这就是为什么您从一开始就遇到这些问题。我建议您尝试使用最大/最小高度/宽度和基于百分比的大小来处理同一站点，这样可以我开始在静态设计和响应性设计之间架起桥梁！！非常感谢！然后将其标记为答案，这样你的问题就可以标记为已解决。如果不是问题的话。

 #container nav.horizontal {
     margin-top: -16px;
 }