[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Applying shadow along outer DIV

Posted on 2008-11-05
4
Medium Priority
?
418 Views
Last Modified: 2012-06-21
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
Comment
  • 3
4 Comments
 
LVL 6

Accepted Solution

by:
dwaynecharrington earned 1500 total points
ID: 22891984
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 22898012
Would this replace my #container? Or in addition too?
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 22898018
Then I would set the width to be like 1067px, because that was the width of the shadow.
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 22942253
Hey man...any thoughts? To above?

Thanks,

Ryan
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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
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…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses
Course of the Month17 days, 17 hours left to enroll

831 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