[SOLVED] Container shadows

[Andy17]

Hello,

 

 

I would like to have shadows around my containers, but they are currently placed all the way to the left+right (understandably if you look at my code). I would, however, like to place them right next to my containers. Here is a preview so you can see what I mean:

 

http://test.jokeheaven.eu/shadows/

 

And below is my code.

 

 

HTML:

 

<div id="shadow-left"><div id="shadow-right">

<div id="banner">.</div>

<div id="menu">.</div>

<div id="content">.</div>

<div id="footer">.</div>

</div></div>

 

CSS:

 

body {
margin:0;
padding:0;
background-color:#cccccc;
}

#banner {
width:800px;
height:125px;
background-color:red;
margin: 0 auto;
}

#menu {
width:800px;
height:30px;
background-color:green;
margin: 0 auto;
}

#content {
width:800px;
height:500px;
background-color:blue;
margin: 0 auto;
}

#footer {
width:800px;
height:75px;
background-color:orange;
margin: 0 auto;
}

#shadow-left, #shadow-right {
margin: 0 auto;
}

#shadow-left {
background: url(images/shadow-left.png) left repeat-y;
}

#shadow-right {
background: url(images/shadow-right.png) right repeat-y;
}

 

Thank you in advance!

[haku]

You're welcome in advance.

 

Now do you actually have a question?

[Andy17]

"I would like to have shadows around my containers, but they are currently placed all the way to the left+right (understandably if you look at my code). I would, however, like to place them right next to my containers."

 

I didn't think that I had to ask "how do I do this?", but how would I do that?

[Jagmeet]

You can use div properties like

Left-margin:

right-margin:

left-padding:

right-padding:

 

to set ur div shadow position if feting more prob then PM me 

try

[Andy17]

Still can't get this to work...

[Andy17]

bump

[haku]

Give the left shadow a width of 865px.

[liamloveslearning]

Personally, id create a container to hold all your divs in and scrap your shadow css, ID make the container 860px (based on the presumption your shadows are 30px wide each). Id then make a backgroundin photoshop 860 wide with the shadows either side and then use this as the background for your container div and repeat it vertically, I hope this makes sense, and this is just my way of going about it..

[haku]

That is an easier way to do it. But, doing it the way the OP did it allows for a variable width site. That being said, his site isn't variable width.

[Andy17]

Thanks guys, I got it to work without the variable width. I figured I would just make the width percentages instead, but that created another problem; since my containers are wrapped inside the shadow divs (I'm not sure how to explain this since I'm rather new to CSS, but hopefully I will manage), then if I put width 80% in the content container, for example, it will be 80% of the shadow div's width if I understand it correctly.

 

Like if I want all my containers to be width 80%, then I am unsure how to make the shadows fit. At first I figured I'd just give it a percentage as width, but that didn't seem to work very well.

 

I apologize if I seem completely noobish, lol.

[haku]

Set the width on the outermost containing div, which I believe is the left shadow (didn't check - may be the right shadow). Every other div will automatically go to 100% to fit that. You don't need to set any widths on them.

[Andy17]

I got it to work by doing what you said and then adding padding left and right to #shadow-right, because otherwise the shadows would be hidden behind the containers within that div.

 

Thanks for the help.