Add Shadows to Div

@cnote828May 18.2006

Does anyone know how to add shadows to <div>?

to post a comment

@cnote828authorMay 18.2006 — #This is for a tooltip as well. Thanks for you help.

@WebJoelMay 18.2006 — #

[CODE]<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>[/CODE]

Here is an easy to understand example. ?

-Joel

@cnote828authorMay 19.2006 — #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.?

@WebJoelMay 19.2006 — #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.

?

Add Shadows to Div

4 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Add Shadows to Div

4 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #HTML _↴