CODEWITHSUNDEEP
htmlcss
Cameron
Cameron

Reputation: 337

How to get 1 div's box-shadow on top of another div without overlapping the two divs?

I'm having quite a bit of trouble trying to get a desired result. I have a webpage with a navbar div on top and a div for body text below it. Each have some box-shadow, the navbar has it only showing below it, and the body text div just on the sides. I want the body text div to start exactly where the navbar div ends, and show up under the box-shadow of the navbar div.

JSFiddle doesn't seem to be properly replicating the issue, so I'll include pictures and code below (formatting for code might be crappy).

HTML

<div class="navbar">
    <ul>
        <li><a href="Index.html" style="background-color:#C6CFD6;">Home</a></li>
        <li><a href="Education.html">Education</a></li>
        <li><a href="Experience.html">Experience</a></li>
        <li><a href="Mywork.html">My Work</a></li>
        <li><a href="Contact.html">Contact Me</a></li>
    </ul>
</div>
<div class="body">
    <div class="bodytext">
        <h1>test text</h1>
        <p>test text</p>
        <p>test text</p>
        <br>
        <br>
        <br>
        <h1>test text</h1>
    </div>
</div>

CSS

html, body {
    height: 100%;
}

.navbar {
    width: 100%;
    text-align: center;
    z-index: 1;
    box-shadow: 0px 0px 10px 10px black;
    /*position: absolute;*/
    padding: 0;
    margin: 0;
}

.navbar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #E7E7EF;
    padding: 10px;
    width: 100%;
}

.navbar ul li {
    display: inline;
    text-align: center;
    padding: 10px;
    margin: 0;
    padding: 0;
    position: relative;
}

.navbar ul li a {
    padding: 10px;
    background: #E7E7EF;
    text-decoration: none;
    color: #CE0000;
    font-size: 2em;
    display: inline;
    cursor: pointer;
}

.navbar ul li a:hover {
    background-color: #C6CFD6;
}

.body {
    background-color: #C6CFD6;
    width: 70%;
    z-index: -1;
    text-align: center;
    display: block;
    margin: auto;
    box-shadow: 0px 0px 10px 10px black;
    margin-top: 0;
    padding-top: 0;
}

Pictures

Imgur

This post is probably not the most clearly worded or formatted - I tried making a JSFiddle, but it didn't reflect what was happening in my webpage; I'll try to clarify anything unclear. Any ideas on what I can do to get my desired result?

Upvotes: 1

Views: 82

Answers (1)

Zeev Katz
Zeev Katz

Reputation: 2273

Let me know if this help you.

HTML:

<div class="navbar">
    <ul>
        <li><a href="Index.html" style="background-color:#C6CFD6;">Home</a></li>
        <li><a href="Education.html">Education</a></li>
        <li><a href="Experience.html">Experience</a></li>
        <li><a href="Mywork.html">My Work</a></li>
        <li><a href="Contact.html">Contact Me</a></li>
    </ul>
</div>
<div class="body">
    <div class="bodytext">
        <h1>test text</h1>
        <p>test text</p>
        <p>test text</p>
        <br>
        <br>
        <br>
        <h1>test text</h1>
    </div>
</div>

CSS:

html, body {
    height: 100%;
}

h1 {
  margin: 0;
}

.body {
  position: relative;
  z-index: -1;
  background: green;
  box-shadow: 0px 0px 10px 0px black;
}

.navbar {
    width: 100%;
    text-align: center;
    box-shadow: 0px 0px 10px 0px black;
    padding: 0;
    margin: 0;
}

.navbar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #E7E7EF;
    padding: 10px;
    width: 100%;
}

.navbar ul li {
    display: inline;
    text-align: center;
    padding: 10px;
    margin: 0;
    padding: 0;
    position: relative;
}

.navbar ul li a {
    padding: 10px;
    background: #E7E7EF;
    text-decoration: none;
    color: #CE0000;
}

My Fiddle

Upvotes: 1

Related Questions