Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Adding CSS dropshadow to a div element

Posted on 2011-09-17
14
Medium Priority
?
557 Views
Last Modified: 2012-05-12
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.
0
Comment
Question by:ddantes
  • 7
  • 2
  • 2
  • +2
14 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36553354
check this link on how to add a dropshadow to a div container
http://webdesign.about.com/od/csstutorials/a/aa102306.htm
0
 

Author Comment

by:ddantes
ID: 36553592
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
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36553598
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:ddantes
ID: 36554058
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
 
LVL 18

Expert Comment

by:Rartemass
ID: 36555178
This method is for fluid images:
http://www.cssplay.co.uk/menu/shadow2.html
See if that helps.
0
 

Author Comment

by:ddantes
ID: 36555225
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
 

Author Comment

by:ddantes
ID: 36555353
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
 

Author Comment

by:ddantes
ID: 36557519
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.  Meanwhile, Expert comments are appreciated, but none of them resulted in a satisfying resolution of the question.
0
 
LVL 3

Accepted Solution

by:
Duboux earned 2000 total points
ID: 36556234
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
 

Author Comment

by:ddantes
ID: 36556921
Thank you for that insight.  How can I cancel my delete request in order to award points for your solution?
0
 
LVL 3

Expert Comment

by:Duboux
ID: 36557441
I have no idea, lol, but thanks for that thought ;)
0
 

Expert Comment

by:Modalot
ID: 36557520
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
 

Author Comment

by:ddantes
ID: 36557604
Duboux: Could you please clarify about making the ul higher?
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses

877 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question