Solved

Adding CSS dropshadow to a div element

Posted on 2011-09-17
14
545 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 2
  • 2
  • +2
14 Comments
 
LVL 40

Expert Comment

by:gurvinder372
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:gurvinder372
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
Independent Software Vendors: 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 500 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

Industry Leaders: 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!

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…

724 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