Positioning images around a div

[fileserverdirect]

Hi guys!
As some of you know, I am re-desgining my website into a full-css (Yes this is the same one:)). I added a shadow to a div. I wound up creating 3 other div's for the right shadow, bottom shadow, and corner. It works, but is there an easier way than having 4 nested div's?

CSS:


.ddbbmcont
{
background: url("images/r-shadow-fade.png") bottom right;

}
.ddbbmcontinner1
{
background: url("images/r-shadow.png") repeat-y right;

}

.ddbbmcontinner2
{
background: url("images/b-shadow.png") repeat-x bottom;
width: 179px;
}


and the acutal page:


<div class='sidebar'>
<div class="ddbbmcont"><div class="ddbbmcontinner1"><div class="ddbbmcontinner2">
<div id="ddblueblockmenu">

<div class="menutitle">My Compnay Name</div>
<ul>
<li><a href="./index.php">Home</a></li>
<li><a href="./company/index.php">Company</a></li>
<li><a href="./services/index.php">Services</a></li>
<li><a href="./wwwdevop/index.php">WWW Devopment</a></li>
</ul>

<div class="menutitle">Website Shortcuts</div>
<ul>
<li><a href="javascript:alert('COMING SOON')">Forums</a></li>
<li><a href="./service/index.php"><img src="./images/service.png" alt="service">&nbsp;</a></li>
<li><a href="./ser1/index.php"><img src="./images/phpincnetwork.png" alt="ser1\network">&nbsp;</a></li>
<li><a href="./school/index.php">Tutorials</a></li>
</ul>

<div class="menutitle">Client Services</div>
<ul>
<li><a href="./login.clients/index.php">Login</a></li>
<li><a href="./clients/index.php">Client Index</a></li>
<li><a href="./clients/list.php">Client List</a></li>
<li><a href="./clients/become.php">Become A Client</a></li>
</ul>
<div class="menutitle"><a href="./more.php" style="color: white;">More --&gt;</a></div>
</div>
<a href="./advertise.php"><img src="./images/ad01.png" alt="ADVERTISE HERE: 169x300"></a></div>
</div>
</div>
<br><script type="text/javascript" src="/help/chat/livehelp_js.php?department=1&amp;serversession=1&amp;pingtimes=15"></script><div class="end"><table cellpadding=0 cellspacing=0 style="margin-left: 14px; margin-right: 14px;"><tr><td>
<table><tr><td><a href="http://validator.w3.org/check?referer"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid " height="31" width="88"></a></td><td><a href="http://www.anybrowser.org/campaign/"><img src="images/anybrowser.png" alt="Any Browser Compatable Site"></a></td></tr></table></td></tr></table><div class="footer">
Copyright &copy;2005-2008 My Company Name &raquo; Your iP: 123.4.56.789
</div></div></div>

Thanks,

[jscheuer1]

It depends upon what you mean by easy, and what you what to achieve exactly.

If you want to limit yourself to browsers with javascript enabled, there are javascript solutions which, incidentally, create these 4 divisions or something like them for you, which do rely upon css, but now also upon javascript.

If you want to limit yourself to IE 5.5 or so and greater with javascript and 'safe' active X ('safe' active X is a subset of active X that is safer than full active X, though not entirely safe) enabled, you can use the IE proprietary shadow filter. Filters also require css enabled.

But this gets back to what's easy. Unless you are already comfortable with the scripts involved or the filter, the pure css method is just as, if not more, 'easy'. In any event, a pure css solution is much more universal, as (if properly executed for cross browser implementation - see: http://www.dynamicdrive.com/forums/showthread.php?t=26023 for one method) it will be seen in all modern browsers regardless of their make, model, or if they are currently configured to support javascript, active X or not.

Even a pure css solution will not be seen in all browsers if designer css is overridden or (depending upon the browser) if images are disabled. However, this is much, much, much less often the case than a browser with javascript (or any of the other requirements for the other approaches) unavailable or disabled.

The bottom line here is that 'special effects' for web pages are tricky, and you would do well to figure out just what you are shooting for, in which browsers, configured how, and just how this fits with your particular design. Degrading well when not supported is another issue for consideration.