Adding Shadow background

Shadows

[hgerman]

I'm trying to build a page with a shadow around it; like this: <link removed>

I want to build the page completely in HTML; in Dreamweaver. I don't want to use CSS. I created the background similarly to this example; by taking a small design and using it as a repetitive pattern in the background. I'd like to use the shadow around a central square, like the example shows. But I don't want to use CSS. Any ideas?

H

[edited by: encyclo at 2:06 am (utc) on Aug. 23, 2007]
[edit reason] no example links please [/edit]

[birdbrain]

No CSS, no shadow. ;)

[hgerman]

Ok, how do I accomplish this? I'm not familiar with CSS. If it's relatively simple, can you give me a step-by-step on this?

[Marshall]

hgerman,

Let's say for an example you have a main content section and want to shadow the left, right and bottom. Whether you use an image or a light gray color doesn't matter for this demo.

USING XHTML Transitional

CSS
#shadow {
width: 900px; /* assign to your needs */
background: #CCC url(shadow.gif) top left repeat;
padding: 0 5px 5px 5px; /* Reads top right bottom left */
}
#content {
width: 890px; /* width should be width of shadow div less L & R padding */
margin-top: 0;
background-color: #FFF;
}

HTML
<div id="shadow">
<div id="content">CONTENT HERE</div>
<br style="clear:both" /> <!-- This may be needed to ensure that the shadow div stretches beyond the content -->
</div>

Inside the #content, you can put other <div>'s or tables.

Marshall

[edited by: Marshall at 2:55 pm (utc) on Aug. 23, 2007]

[hgerman]

i'll give this a try. thank you!

[puremetal]

i've struggled with this lately, not wanting any kind of auto-generated CSS shadow, but rather something that looks a lot better than most i've seen.

a simple way i've used is to use a transparent PNG shadow as a background in a table (or div, i guess), making it slightly larger than you need (ie table size + width of shadow either side), then make a smaller table or div to hold the content

eg:

<td valign="top" style="background-image:url(shadow-1.png); visibility:visible; background-repeat:repeat-y"><table width="800" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td valign="top"><table width="98%" border="0" align="center" cellpadding="6" cellspacing="0">
<tr valign="top">

it works pretty well cross-browser on the site i'm currently working on... the shadow has to be exactly the right size though.

[edited by: tedster at 6:39 pm (utc) on Sep. 10, 2007]
[edit reason] no screenshots, thanks [/edit]

[hgerman]

Thanks for all of your help! I was able to create the CSS file and make the shadow appear in the background. I now have a new problem. While i can create the shadow for a set, defined area, i now need to create it in a scaling fashion. Example: [thomasville.com...] When you type in different zipcodes on this page, the shadow adjusts to the amount of locations the database generates. In my case, i have a search that will generate anywhere from 0 to 10 results. The tabled area will be longer or shorter every time. Help!