Website Drop Shadow Effect Help

Saint_Michael

May 10 2008, 03:27 AM

Well I am in a need of help, I want to add this cool drop shadow effect to a website I am building, but unfortunately for me I can't seem to get it right. I want to apply this drop shadow effect to this website

[attachment=1110:default.css]
[attachment=1111:index.html]

The first person to effectively apply this drop shadow to this website will get a 50 credit prize

All the files are provided, you have to download the OSWD file to get the images and style effect, there is no rush but if you can get it done right away I be much appreciated.

sonesay

May 10 2008, 03:49 AM

I could use 50 credits

. I'm going to give it a shot you want the final html + CSS updated?

jlhaslip

May 10 2008, 04:00 AM

Which drop-shadow are you looking for? The one on the centre portion of the page?

Saint_Michael

May 10 2008, 04:09 AM

oops

, yeah I want the center shadow, but I still want the original design from the attachments, so basically your transplanting drop shadow from the link to the attachments.

truefusion

May 10 2008, 06:04 AM

In your case, you've made it simple to work with—you have a fixed width for the content. Do this:

Make a DIV element that surrounds everything.
Open up an Image manipulation program.
Make the width of the document slightly wider (maybe 30px wider) than the width of the content ID.
Make a bi-linear gradient that looks good to your liking (make sure the background is transparent on all layers).
Fade the bottom half out to your liking. Export, PNG.
Fill that newly created DIV element with a none-repeating background of that PNG.

Optional: Set a min-height for that new DIV element.

sonesay

May 10 2008, 06:15 AM

Heres my solution I checked in firefox and safari and it works. IE7 fails lol theres like a huge gap between the drop shadow of the top and middle. Have a look maybe somone can point out what the error is for IE 7.

Saint_Michael

May 10 2008, 07:05 AM

Thanks sonsay and yeah I was able to figure out why it wouldn't work in IE, took about 20 minutes, but I got it. Interesting enough you just missed one word, and if you take a look at the coding you will see which one word is that.

CODE

#wrapper-menu-top {
background: url('images/bg02-trans-left.png') repeat-y left top;
width: 918px;
margin:0pt auto;
}
#wrapper-menu-top-right {
background: url('images/bg02-trans-right.png') repeat-y right top;
}

#wrapper-content-top {
background: url('images/bg02-transf-left.png') no-repeat left top;
width: 918px;
margin:0pt auto;
min-height: 200px;
}
#wrapper-content-top-right {
background: url('images/bg02-transf-right.png') no-repeat right top;
min-height: 200px;
}

So Yeah, thanks for the big help sonesay, the website doesn't look as flat anymore.

sonesay

May 10 2008, 07:15 AM

No problem thanks for the credits it was well worth the time spent

. I still don't see the error, what was it?

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE