PDA

Click to See Complete Forum and Search --> : Add Shadows to Div

cnote828
05-18-2006, 06:06 PM
Does anyone know how to add shadows to <div>?
cnote828
05-18-2006, 06:25 PM
This is for a tooltip as well. Thanks for you help.
WebJoel
05-18-2006, 07:41 PM
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">

<style>
.shadydiv {width:600px; background-color:#cecece; position:relative; top:25px; left:25px;}/*this is the div beneith*/

.shadydiv div {width:600px; background-color:#797979; border: 2px solid #000000; color:white;
padding: 10px; position: relative; top:-8px; left:-9px;}/*this is the div on-top*/
</style>

</head>
<body>

<div class="shadydiv"><!-- the div beneith -->
<div><!-- the div on-top -->
<h1>Enter your text or whatever here.</h1>
<p>Your content or images can go in this spot.</p>
<img src="" alt="Your image here" style="width:95px; height:60px; border:2px dotted white;" />
</div>
</div>
</body>
</html>

Here is an easy to understand example. :)
-Joel
cnote828
05-18-2006, 11:50 PM
Thanks for your help. It seems like it is not working. Here is the code:

I call this before anything loads:

str += ".tooltip {";
str += "position:absolute;";
str += "visibility:hidden;";
str += "border:1px solid black;";
str += "left: 0; top: 0;";
str += "padding: " + padding + "px;";
str += "background-color: " + bgcolor + ";";
str += "}";
str += ".shadow {";
str += "position:relative;";
str += "visibility:hidden;";
str += "border:2px solid black;";
str += "left: -8px; top: -9px;";
str += "padding:10px;";
str += "background-color: #797979;";
str += "}";
str += "</STYLE>";
if(style)
document.write(str);

makeTip("lastName", 100, "Last Name");

function makeTip(id,width,code)
{
if(!style)
return;
var str = "<style TYPE=\"text/css\">";
str += "#" + id + " {";
str += "width: " + width + ";";
str += "}";
str += "</style>";
str += "<div class = \"tooltip\" id =\"" + id + "\">";
str += "<div class = \"shadow\">" + code + "</div></div>";
document.write(str);
}

Then this to display it:
function displayTip(left, top)
{
var whichTip = document.all[active].style;
whichTip.left = left;
whichTip.top = top - 5;
whichTip.visibility = "visible";
}

Any ideas, hope it doesn't seem to sloppy.:)
WebJoel
05-19-2006, 03:55 PM
This is javascript, -right? I'm a bit weak on the javascript ability. Maybe this post should be moved to the javascript forum, if that is what you want to use.
Keep in mind that about 10% of all computer users either don't have javascript ability, or have it manually turned off.
The solution I showed, -just one of several methods to meet the end-goal, is *css and should work for all browsers, irregardless of whether or not they have javascript turned on or off..
If you must have a javascript drop-shadow effect, try "www.dynamicdrive.com". They might have something.
:)