Solved

Adding CSS dropshadow to a div element

Posted on 2011-09-17
14
526 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: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
Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

 
LVL 18

Expert Comment

by:Rartemass
ID: 36553985
0
 

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

ScreenConnect 6.0 Free Trial

Check out the updates in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI that improves session organization and overall user experience. See the enhancements for yourself!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
css, html 5 42
alert before form submission 6 41
Changing Color of Page Section 4 21
div to fit another div 8 23
This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

809 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