2016-10-16 2 views
0

メインとメインの上の青色を削除したいと思います。私は数日間デバッグしますが、このバグの修正方法はわかりません。助けてください。htmlページの色を削除します。

私のページと私の欲望のページが添付されました。

body { 
    background-color:#FFFFFF;  
    background-image: url(background.jpg); 
    color: #666666; 
    font-family: Verdana, Arial, sans-serif; 
} 
* { 
    box-sizing: border-box; 
} 
header { 
    background-color: #000033; 
    color: #FFFFFF; 
    font-family: Georgia, serif; 
} 
h1 { 
    line-height: 200%; 
    background-image: url(sunset.jpg); 
    background-position: right; 
    background-repeat: no-repeat; 
    padding-left: 20px; 
    height: 72px; 
    margin-bottom: 0; 
} 
nav { 
    font-weight:bold; 
    float: left; 
    width: 160px; 
    padding-top: 20px; 
    padding-right: 5px; 
    padding-left: 20px; 
} 
nav a { 
    text-decoration: none; 
} 
nav a:link { 
    color: #000033; 
} 
nav a:visited { 
    color: #344873; 
} 
nav a:hover { 
    color: #FFFFFF; 
} 
nav ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
main { 
    padding-left: 20px; 
    padding-right: 20px; 
    display: block; 
    background-color: #FFFFFF; 
    margin-left: 170px; 
    margin-top: 1px; 
    margin-bottom: 1px; 
} 
h2 { 
    color: #3399CC; 
    font-family: Georgia, serif; 
} 
h3 { 
    color: #000033; 
} 
dt { 
    color: #000033; 
    font-weight: bold; 
} 
.resort { 
    color: #000033; 
    font-size: 1.2em; 
} 
footer { 
    font-size: 0.70em; 
    font-style: italic; 
    text-align: center; 
    padding: 10px; 
    background-color: #FFFFFF; 
    margin-left: 170px; 
} 
#wrapper { 
    background-color: #90C7E3; 
    margin-left: auto; 
    margin-right: auto; 
    width: 80%; 
    min-width: 700px; 
    max-width: 1024px; 
    box-shadow: 5px 5px 5px black; 
} 
#homehero { 
    height: 300px; 
    background-image: url(coast.jpg); 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
    margin-left: 170px; 
} 
#yurthero { 
    height: 300px; 
    background-image: url(yurt.jpg); 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
    margin-left:170px; 
} 
#trailhero { 
    height: 300px; 
    background-image: url(trail.jpg); 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
    margin-left: 170px; 
} 
header, nav, main, footer { 
    display: block; 
}   
<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Pacific Trails Resort :: Yurts</title> 
     <link href="pacific.css" rel="stylesheet"> 
     <!--[if lt IE 9]> 
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
     <![endif]--> 
     <meta charset="utf-8"> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <header> 
       <h1>Pacific Trails Resort</h1> 
      </header> 
      <nav> 
       <ul> 
        <li><a href="index.html">Home</a></li> 
        <li><a href="yurts.html">Yurts</a></li> 
        <li><a href="activities.html">Activities</a></li> 
        <li><a href="reservations.html">Reservations</a></li> 
       </ul> 
      </nav> 
      <div id="yurthero"></div> 
      <main> 
       <h2>The Yurts at Pacific Trails</h2> 
       <dl> 
        <dt>What is a yurt?</dt> 
        <dd>Our luxuy yurts are permanent structures four feet off the ground. Each yurt has canvas walls, a wooden floor 
     and a roof dome that can be opened.</dd> 
        <dt>How are the yurts furnished?</dt> 
        <dd>Each yurt is furnished with a queen-size bed with down quilt and gas-fire stove. The luxury camping experience 
        also includes elecricity and a sink with hot and cold running water. Shower and restroom facilities are located 
        in the lodge.</dd> 
        <dt>What should I bring?</dt> 
        <dd>Bring a sense of adventure and some time to relax! Most guests also pack comfortable walking shoes and plan to 
        dress for changing weather with layers of clothing.</dd> 
       </dl> 
      </main> 
      <footer> 
       <small><i>Copyright &copy; 2016 Pacific Trails Resort</i></small><br> 
      </footer> 
     </div> 
    </body> 
</html> 
<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Pacific Trails Resort</title> 
     <link href="pacific.css" rel="stylesheet"> 
     <!--[if lt IE 9]> 
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
     <![endif]--> 
     <meta charset = "utf-8"> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <header> 
       <h1>Pacific Trails Resort</h1> 
      </header> 
      <nav> 
       <ul> 
        <li><a href="index.html">Home</a></li> 
        <li><a href="yurts.html">Yurts</a></li> 
        <li><a href="activities.html">Activities</a></li> 
        <li><a href="reservations.html">Reservations</a></li> 
       </ul> 
      </nav> 
      <div id="homehero"></div> 
      <main> 
       <h2>Enjoy Nature in Luxury</h2> 
       <p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast. Relax in serenity with 
       panoramic views of the Pacific Ocean.</p> 
       <ul> 
        <li>Private yurts with decks overlooking the ocean</li> 
        <li>Activities lodge with fireplace and gift shop</li> 
        <li>Nightly fine dining at the Overlook Cafe</li> 
        <li>Heated outdoor pool and whirlpool</li> 
        <li>Guided hiking tours of the redwoods</li> 
       </ul> 
       <div> 
        <span class="resort">Pacific Trails Resort</span><br> 
        12010 Pacific Trails Road<br> 
        Zephyr, CA 95555<br><br> 
        888-555-5555<br> 
       </div> 
      </main> 
      <footer> 
       Copyright &copy; 2016 Pacific Trails Resort<br> 
      </footer> 
     </div> 
    </body> 
</html> 

答えて

1

あなたのコードは、2つの別々のページです。働くフィドルがなければ、私はちょうど白い背景とdivのためのイメージと余白トップ0の0pxにマージンの底を設定することをお勧めします。

また、マイナスの白い背景(例:margin-top:-20px;)を持つdivの余白のトップにすることもできます。クイックでシンプルな解決策は、メインのためにUR CSSの-30pxにマージントップを設定することです。それはあなたに望ましい効果をもたらします。

https://jsfiddle.net/26f8ntwm/

main { 
    padding-left: 20px; 
    padding-right: 20px; 
    display: block; 
    background-color: #FFFFFF; 
    margin-left: 170px; 
    **margin-top: -30px;** 
    margin-bottom: 1px; 
    padding-top:0px; 
} 
0

あなたのラッパー要素は、青の背景(#90C7E3)を有し、navfooterので、バックグラウンドを持っていない(つまり、その背景が透明である)、そして、彼らは#wrapper内部です

#wrapper { 
    background-color: #90C7E3; 
    etc. 

ソリューション:、そのラッパーの背景色は、navfooterに表示されJこのルールから最初の行を削除するか、navfooterにバックグラウンドを与えてください。

関連する問題