在这个项目中，我正在处理容器的背景图像并发症，导致水平导航和标题之间存在一条线。
我对CSS中的定位缺乏经验，但也许有人知道如何解决这个问题，所以它不会像这样显示，并且可以在下次节省一些时间。
/*
New Perspectives on HTML and CSS
Tutorial 4
Case Problem 2
Pizza Style Sheet
Author:Sean Parsons
Date:1/25/2015
Filename: pizza.css
Supporting Files:
*/
/* General Styling Rule */
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
header, aside, article, section, nav, header img {
display: block;
}
body {
font-family: Verdana, Geneva, sans-serif;
}
/* Container Styling Rule */
#container {
width: 1000px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
border-left: 1px solid black;
border-right: 1px solid black;
background-color: white;
background-image: url(redbar.png);
background-position: top left;
background-repeat: repeat-y;
}
/* Header Styling */
header img {
background-color: white;
height: 100px;
display: block;
}
/* Horizontal Nav Styling */
nav.horizontal{
height: 85px;
width: 100%;
text-align: center;
font-size: 16px;
display: block;
background-color: white;
}
nav.horizontal li{
width: 160px;
float:left;
margin: 15px;
list-style: none;
line-height: 50px;
}
nav.horizontal li a {
text-decoration: none;
display: block;
background-color: red;
color: white;
border-radius: 30px 25px;
-webkit-border-radius: 30px 25px;
-moz-border-radius: 30px 25px;
}
nav.horizontal li a:hover{
background-color: rgb(255,101,101);
color: black;
}
/* Vertical Nav styling */
nav.vertical{
clear: left;
float: left;
width: 200px;
}
nav.vertical ul li{
list-style: none;
text-indent: 5px;
margin-bottom: 20px;
margin-bottom: 20px;
}
nav.vertical li a{
color: white;
text-decoration: none;
}
nav.vertical li a:hover{
color: black;
}
/* Main Section Styling */
#main{
background-color: rgb(255,211,211);
float: left;
width: 600px;
}<!DOCTYPE html>
<html>
<head>
<!--
New Perspectives on HTML and CSS
Tutorial 4
Case Problem 2
Red Ball Pizza
Author:Sean Parsons
Date:1/25/2015
Filename: redball.htm
Supporting files: modernizr-1.5.js, notice.png, rblogo.png,
redbar.png, slice.png, toppings.png
Pizza slice and toppings images from public domain site at:
www.publicdomainpictures.net
-->
<meta charset="UTF-8" />
<title>Red Ball Pizza</title>
<script src="modernizr-1.5.js"></script>
<link href="pizzatxt.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 & Shrimp</a></li>
<li><a href="#">Chicken & 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 … EVERY TIME!
</p>
<div class="coupon">
<h1>Classic Combo</h1>
<p>16" 1-Topping Pizza
& a 2-Liter of Your Choice
For Only $14.99
</p>
<p>Expires 3/14</p>
</div>
<div class="coupon">
<h1>Pizza & Stix</h1>
<p>16" Specialty Pizza
Reg. Cheese Stix & 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 & Get a 2nd
Pizza For Half Price
</p>
<p>Expires 3/14</p>
</div>
<div class="coupon">
<h1>Pizza & Wings</h1>
<p>14" 2-Topping Pizza
& 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 & Chips
& 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 and is still operating today. We've been open since 1982 and
we're happy to serve you today and tomorrow!</li>
</ul>
</aside>
<footer>
<address>
Red Ball Pizza •
811 Beach Drive •
Ormond Beach, FL 32175 •
(386) 555 - 7499
</address>
</footer>
</div>
</body>
</html>
答案 0 :(得分：0)
尝试删除display:block