CODEWITHSUNDEEP
htmlcss
JJJekwue2
JJJekwue2

Reputation: 35

How would I go about placing white space in between the header and nav?

So I would like for there to be a solid white block of white space for my text. I tried using margin-bottom:0 and still nothing. Is there something im missing here? The space between the nav bar and the picture is not showing the background and is connected, so why not for my text?

<!DOCTYPE html>
<link rel="stylesheet" href="Pacific.css">
<title>Pacific Trails Resort</title>
<header><h1>Pacific Trails Resort</h1></header>
<nav>
<a href="index.html">Home</a>&nbsp;
<a href="Yurts.html">Yurts</a>&nbsp;
<a href="Activities.html">Activities</a>&nbsp;
<a href="reservations.html">Reservations</a>&nbsp;
</nav>
<div id="homehero">
</div>
<main>
<h2>Enjoy Nature In Luxury</h2>
<p>Pacific Trails Resort offers a special lodging experience
on the California North Coast with panoramic views of
the Pacific Ocean. Your stay at Pacific Trails Resort includes a sumptuously appointed private yurt and a
cooked-to-order breakfast each morning.</p>
<ul>
<li>Unwind in the heated outdoor pool and whirlpool</li>
<li>Explore the coast on your own or join our guided tours</li>
<li>Relax in our lodge while enjoying complimentary
appetizers and beverages</li>
<li>Savor nightly fine dining with an ocean view</li>
</ul>
</main>
<div>
Pacific Trails Resort<br>
Zephyr, CA 95555<br>
12010 Pacific Trails Road<br>
800-555-5555<br>
</div>
<br>
<footer>
Copyright © 2018 Pacific Trails Resort<br>
<a href="mailto:[email protected]">[email protected]</a>
</footer>

The Html

Body { background-color: #3399CC;
        color: #666666;
        font-family:Verdana, Arial, serif;
        background-image: linear-gradient(to bottom, #3399CC, #C2E0F0, #3399CC)
}
header {background-color: #000033;
        color: #FFFFFF;
        font-family: Georgia, serif;
}
h1  {line-height: 200%;
    background-image:url(sunset.jpg);
    background-repeat:no-repeat;
    background-position:right;
    padding-left:2em;
    height:72px;
    margin-bottom: 0px;
}
nav {font-weight:bold;
    background-color: #90C7E3;
    padding-bottom:.5em;
        padding-left:2em;
            padding-right:.5em;
                padding-top:.5em;
    text-decoration:none;
    margin-bottom: 0;
}
h2 { color: #3399CC;
        font-family: Georgia, serif;
}
h3  { color:#000033;
    
}
main { padding-left:2em;
            padding-right:2em;
            background-color: #FFFFFF;
            margin-bottom: 0;

}
#homehero {
    height:320px;
    background-image:url(coast.jpg);
    background-size: 100% 100%;
    background-repeat:no-repeat;
}
#yurthero {
    height:320px;
    background-image:url(yurt.jpg);
    background-size: 100% 100%;
    background-repeat:no-repeat;

}
#trailhero {
    height:320px;
    background-image:url(trail.jpg);
    background-size: 100% 100%;
    background-repeat:no-repeat;
}
dt  { color: #000033;
        font-weight: bold;
}
div {
    background-color: #FFFFFF;
    
}
.resort {color:#000033;
        font-size: 1.2em;
}
footer  {font-size: .70em;
        font-weight: italic;
        text-align: center;
        padding:1em;
                    background-color: #FFFFFF;
    margin-bottom: 0;

}
#wrapper { width: 80%;
           margin-right: auto;
           margin-left: auto;
           background-color:#FFFFFF;
           min-width:700px;
           max-width: 1024px;
           box-shadow: 10px 10px; /* Watch this one. */ 
}

The Css

And this isn't really important, but is there also a way for the image to look clearer?

First time using stack overflow, so bear with me.

Upvotes: 1

Views: 41

Answers (1)

Lakshan Costa
Lakshan Costa

Reputation: 643

You can add the following code between the <header> and the <nav>

<div class="w3-bar w3-border w3-light-white">
  <div class="w3-bar-item">name 1</div>
  <div class="w3-bar-item">name 2</div>
  <div class="w3-bar-item">name 3</div>
</div>

You Can replace the name 1 with the text you need.

Upvotes: 1

Related Questions