html div shadow effect

I am creating a div for the entire content of my web page to be centred.

I would like to create a shadow effect on the div border. How can I achieve this., Please help. thanks
TrialUserAsked:
Who is Participating?
 
koolinConnect With a Mentor Commented:
Hey, see demo code below.  Only 2 changes I made was using the fade image I had "bg-mid.png" instead of your shadow one, and then the width of the page div to 980 to match the fade image.

If its still showing weird for you post a screenshot so I can see what is happening.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            background: #b6b7bc;
            font-size: .80em;
            font-family: "Helvetica Neue" , "Lucida Grande" , "Segoe UI" , Arial, Helvetica, Verdana, sans-serif;
            margin: 0px;
            padding: 0px;
            color: #696969;
        }
        
        div.page
        {
            width: 980px;
            background-color: #fff;
            margin: 0px auto 0px auto;
            border: 0px solid #496077;
        }
        
        div.Shadow
        {
            margin: 0 auto;
            clear: both;
            background: url(images/bg-mid.png) repeat-y center center;
        }
    </style>
</head>
<body>
    <div class="Shadow">
        <div class="page">
            Content<br />
            <br />
            <br />
            Content<br />
            <br />
            <br />
        </div>
    </div>
</body>
</html>

Open in new window

0
 
koolinCommented:
Best way is to probably put a wrapper div around that div and give it a image background that has the shadow effect.

You can't do it direct with CSS because not all browsers support it.

Here some example code and a link to example image below

div.bgMid is the wrapper div which includes a repeating (on the Y axis - vertical) background which serves as the shadow or fade for the inside div.

The the included image and code I was forcing the inside div to a width of 980px as that matches the wrapper background image.
div.bgMid {  width: 100%; margin: 0 auto; clear:both; background: url(images/bg_mid.png) repeat-y center center ; }

Open in new window

bg-mid.png
0
 
koolinCommented:
eh wth here is the site I did that all for so you can see a full finished demo.

http://www.spmlearning.com/
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
SnarflesCommented:
What you can do for ie browser is use this code

filter: glow(color=#000000,strength=3);

For real browsers you can use

text-shadow:0 0 5px #000000, -1px -1px 5px #000000;

This can be applied to div elements.
0
 
TrialUserAuthor Commented:
Koolin:

Thanks for your response. DO you mean, there will be two divs nested?
I created two divs, it seems like the shadow div, is not wrapping around the main content div. what am i missng here? please help. thanks a ton again

<div class="shadow">
    <p>shadow</p><div class="page">
    <p>page</p>
    </div>
    </div>

body  
{
    background: #b6b7bc;
    font-size: .80em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
}

div.page
{
    width: 960px;
    background-color: #fff;
    margin: 0px auto 0px auto;
    border: 0px solid #496077;
}

div.Shadow
{  
      margin: 0 auto;
      clear:both;
      background: url(images/grayshadow.png) repeat-y center center ;
}
0
 
SnarflesConnect With a Mentor Commented:
Hi
Sorry I misread your question a bit.

You could try adding a dropshadow like this

http://www.webtoolkit.info/demo/css-drop-shadow

Instructions here

http://www.webtoolkit.info/css-drop-shadow.html

Just experiment with the border widths.

Cheers

Luke
0
 
TrialUserAuthor Commented:
Thanks a ton for your help. It works great. thanks
0
All Courses

From novice to tech pro — start learning today.