CSS drop shadow body

Question

CSS drop shadow body

1.3k views Asked by 4n0m13 At 31 May 2017 at 07:40

Ive looked through the other answers on here but keep experiencing the same issue, I'm also very new to webdev.

Im trying to create a <div> with a 960px width that will encapsulate the whole page and then add a drop shadow to it.

Whenever I try the solutions others have posted, all that happens is that the drop shadow is applied to the logo image at the top of the page but nowhere else, i.e. the drop shadow does not continue past the logo and encapsulate the nav bar, content, etc. Here is my code;

<body>

    <div=id"page">

    <header>

        <img src="images/blank_logo.png" height="243"  width="744" class="center">


            <nav>
                <ul>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                </ul>   
            </nav>

    </header>   

        <div id="content">
        <img src="images/ph.jpg" width="475" height="267" class="left">
        <img src="images/ph2.jpg" width="478" height="267" class="right">
        </div>

    </div>

</body>

And here's the CSS;

body {

 width: 100%;
 max-width: 960px;
 margin: 0 auto;

}

#page {
-webkit-box-shadow:0px 5px 10px #1c1c1c;
-moz-box-shadow:0px 5px 10px #1c1c1c;
box-shadow:0px 5px 10px #1c1c1c;
}

Can anyone see where I'm going wrong?

Original Q&A

There are 4 answers

Mohammad hayajneh On 31 May 2017 at 07:52

It's <div id="page">, not <div=id"page">. I think that's the problem.

Web Develop Wolf On 31 May 2017 at 07:45

It's a typo in the first div

<div=id"page"> should be <div id="page">

Here's a fiddle of the shadow working (make sure you make the result window bigger or else you won't see the shadow):

https://jsfiddle.net/4d4gt6kn/

Rajib karmaker On 31 May 2017 at 07:45

It's a typo error <div=id"page"> It will be <div id="page">

**Syam Pillai** · Accepted Answer · 2017-05-31 07:45:59

Remove margin: 0 auto; from body and update the typo error as others mentioned (<div=id"page"> to <div id="page">)

Solution:

body {

 width: 100%;
 max-width: 960px;
 /* margin: 0 auto; */

}

#page {
-webkit-box-shadow:0px 5px 10px #1c1c1c;
-moz-box-shadow:0px 5px 10px #1c1c1c;
box-shadow:0px 5px 10px #1c1c1c;
}

<div id="page">

    <header>

        <img src="images/blank_logo.png" height="243"  width="744" class="center">


            <nav>
                <ul>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                </ul>   
            </nav>

    </header>   

        <div id="content">
        <img src="images/ph.jpg" width="475" height="267" class="left">
        <img src="images/ph2.jpg" width="478" height="267" class="right">
        </div>

    </div>

working jsFiddle

TechQA.

CSS drop shadow body

There are 4 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in DROP-SHADOW

Popular Questions

Popular Tags

Trending Questions