Adding CSS dropshadow to a div element

I am new to web design.  I have a fluidly-resizable slide show at www.mauitradewinds.com and would like to add a CSS dropshadow.  I have been able to follow instructions for adding a dropshadow to a static image, but when I substitute this div element, the shadow does not appear.  Please advise.
ddantesAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
DubouxConnect With a Mentor Commented:
Just saying..

Your slideshow-javascript-code prevents a shadow.

You could add some CSS righta above your <body> tag to see:
  #supersized.speed img {
    border: 6px solid red;
    -moz-box-shadow: 5px 5px 5px red;
    -webkit-box-shadow: 5px 5px 5px red;
    box-shadow: 50px 50px 50px red;
  }

Open in new window


U'll see a red border on the left and the top side of the image(s).
If you make the <ul> they're in higher then it'll show the bottom border as well..


Your problem is that your javascript code prevents any room on the bottom and right side of the images.

So the fix in your problem doesn't lay in the CSS department, but in your javascript.
0
 
Gurvinder Pal SinghCommented:
check this link on how to add a dropshadow to a div container
http://webdesign.about.com/od/csstutorials/a/aa102306.htm
0
 
ddantesAuthor Commented:
Thank you for your comment.  I had tried to follow that tutorial before I posted the question. I was able to produce a drop shadow with a static image, or a text box, but not with the div I am using for the slide show.  The result is at www.mauitradewinds.com/Experts   Please tell me what needs correction.
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
Gurvinder Pal SinghCommented:
just add

#supersized
{
   background-color: #fff; color: #000; border: 1px solid #000; padding: 0.5em;
}

you are basically, imposing one div over the other and child has a small padding which gives a look of shadow
0
 
RartemassAuthor, martial arts coach, IT ConsultantCommented:
0
 
ddantesAuthor Commented:
Thank you for your comments.  gurvinder372: the css code you posted places a half-border on the div element, but it does not look like a drop shadow.  Rartemass: That solution requires a height and width to the shadow element, but the slide show has fluid dimensions depending on the window size.  The original CSS tutorial looks promising, but I will need your guidance to code it properly for my application.
0
 
RartemassAuthor, martial arts coach, IT ConsultantCommented:
This method is for fluid images:
http://www.cssplay.co.uk/menu/shadow2.html
See if that helps.
0
 
ddantesAuthor Commented:
Thank you.  Unfortunately I am inexperienced with css.  However, I followed the method the best I could.  The result is at www.mauitradewinds.com/Experts    Perhaps you can help me to correct the defects?
0
 
ddantesAuthor Commented:
I am making a little progresss at www.mauitradewinds.com/Experts -- using the method described at http://www.positioniseverything.net/articles/dropshadows2.html   I was able to create a transparent png shadow image and apply it, loosely speaking, to my project. However, I can't get the drop shadow to approximate the slide show image margins.  Also, I think there may be some extra shadows which happen to be hidden, but don't belong to the project.   If you could supply corrections to my CSS and/or html code, that would be appreciated.
0
 
ddantesAuthor Commented:
I've requested that this question be deleted for the following reason:

For asthetic reasons, I have reconsidered and abandoned the quest for a drop shadow on this feature of my website. &nbsp;Meanwhile, Expert comments are appreciated, but none of them resulted in a satisfying resolution of the question.
0
 
ddantesAuthor Commented:
Thank you for that insight.  How can I cancel my delete request in order to award points for your solution?
0
 
DubouxCommented:
I have no idea, lol, but thanks for that thought ;)
0
 
ModalotEE ModeratorCommented:
ddantes,

To stop the deletion process, post an objection, as I have done now. After that action you are able to accept posts again, or do any other disposition.

An objection can be posted by writing a comment, but instead of pressing SUBMIT press OBJECT.

Modalot
Community Support Moderator
0
 
ddantesAuthor Commented:
Duboux: Could you please clarify about making the ul higher?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.