Удаление цвета на странице html

#html #css

#HTML #css

Вопрос:

Я хочу удалить синий цвет над основным и под основным. Я отлаживаю несколько дней, но просто не знаю, как исправить эту ошибку. Пожалуйста, помогите.

Я прикрепил свою страницу и страницу своих желаний.

 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 amp;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 amp;copy; 2016 Pacific Trails Resort<br>
            </footer>
        </div>
    </body>
</html>
 

Ответ №1:

Ваш код предназначен для двух отдельных страниц. Не имея рабочей скрипки, я бы просто рекомендовал установить нижнее поле равным 0px для изображения и верхнее поле 0 для div с белым фоном.

Вы также можете изменить верхнюю часть поля для div с белым фоном на минус (пример: margin-top:-20px;). Быстрое и простое решение — установить значение margin-top равным -30px в ur css для main, и это даст вам желаемый эффект.

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;
 } 
 

Ответ №2:

Ваш элемент-оболочка имеет синий фон (#90C7E3), и поскольку nav у and footer нет фона (т. Е. Их Фон прозрачный), и Они находятся внутри #wrapper , этот цвет фона оболочки виден в nav и footer :

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

Решение: просто удалите первую строку из этого правила или укажите backgrounds для nav and footer .