• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 420
  • Last Modified:

Applying shadow along outer DIV

Hey, I have been doing some searching for tutorials on creating a side shadow effect on an outer layer out an element. I know that you would set it as the background-image and make it as long as the container element, but I am not sure how to position it. The articles/tutorials i found weren't that useful and were confusing.

Any thoughts to the best way to accomplishing this?

Thanks,

Ryan

Below is my CSS:
/* @group Reset Styles */
 
html,body,div,span,
applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
dd,dl,dt,li,ol,ul,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
	line-height: 1;
	font-family: inherit;
	text-align: left;
}
 
 
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol,ul {
	list-style: none;
}
q:before,q:after,
blockquote:before,blockquote:after {
	content: "";
}
a img,:link img,:visited img { border:none }
 
/* @end */
 
body{
	background:url(../images/background.jpg) repeat-x fixed;
	text-align:center;
	margin:25px 0 0 0;
}
#container{
	width:1024px;
	margin:0 auto;
	text-align:left;
	background:url(../images/back_shad.gif) repeat-y;
}

Open in new window

0
catonthecouchproductions
Asked:
catonthecouchproductions
  • 3
1 Solution
 
dwaynecharringtonCommented:
Obviously the shadow image is not the same length. So you'll have to experiment  to get it to work right.
#wrapper {
 
	position: relative;
 
	margin-right: auto;
 
	margin-left: auto;
 
	text-align: left;
 
	width: 1024px;
 
	padding: 0 8px;
 
	background-image: url("../images/shadowBg.png");
 
	background-repeat: repeat-y;
 
	}

Open in new window

0
 
catonthecouchproductionsAuthor Commented:
Would this replace my #container? Or in addition too?
0
 
catonthecouchproductionsAuthor Commented:
Then I would set the width to be like 1067px, because that was the width of the shadow.
0
 
catonthecouchproductionsAuthor Commented:
Hey man...any thoughts? To above?

Thanks,

Ryan
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.

Join & Write a Comment

Featured Post

Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now