I was wondering if anyone knows of a good way to add drop shadows around a DIV. I’d like to be able to assign a class of, lets say, "shadow" and have a nice drop shadow applied to it.
Ive seen several methods based on the onion skin method from A List Apart, but they don’t seem to work.
Here is my current code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>[(site_name)] ~ [*pagetitle*]</title>
<style type="text/css">
@import url(assets/templates/clearlyorganized_1/style.css);
</style>
<!--[if IE]>
<style type="text/css" media="screen, tv, projection">
body { behavior: url(assets/js/csshover.htc); }
</style>
<![endif]-->
</head>
<body>
<div id="entire" class="shadow">
<div id="topwrapper">
<div id="header">
<h1><a href="[~[(site_start)]~]"><img src="[(base_url)]assets/images/CO_logo.png"></a></h1>
</div> <!-- end header -->
<div id="navigation">
[!Wayfinder?startId=`0`&hereClass=`here`!]
</div> <!-- end navigation -->
<div id="top">
</div> <!-- end top -->
</div> <!-- end topwrapper -->
<div id="container">
<div id="block_1" class="subcontent"> <!-- main center column -->
[*content*]
</div> <!-- end block 1 -->
<div id="footer">{{footer}}</div>
</div> <!-- end of container -->
</div> <!-- End of Entire -->
</body>
</html>
I used the Still Waters template as a base, and as it didn’t have a div around the ENTIRE page, I added it. I’d like to use a nice Javascript call to deal with this.
