Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
I have a site that used a small shadow on the left and right sides. I setup the css background shadow within the wrapper (bkgrdshad) and filling the content container (bodycontainer) background to white. The shadow image repeats along the y-axis with the image size of 900 x 13. Here is my code:
#bkgrdshad {
width: 900px;
margin-left: auto;
margin-right: auto;
background:url(images/bkgrdshad.jpg) center repeat-y;
}
#bodycontainer {
width: 800px;
height: 628px;
margin-left:auto;
margin-right:auto;
text-align:left;
background-color: #FFFFFF;
}
My questions is how do I get the shadow to resize itself to the full height of the content. Even with setting the container height it stills moves up or down depending on the browsers and operating platform. -
Fixed it. Removed the bkgrdshad div and moved the repeat to the body. Here is my update. Now I want my footer to stick to the bottom of the page.
body {
margin: 0; padding: 0;
background: #FFFFFF;
font: small Arial, Helvetica, sans-serif;
background:url(images/bkgrdshad.jpg) top center repeat-y;
text-align:center;
}
#bodycontainer {
width: 800px;
height: 628px;
margin:0 auto;
text-align:left;
background-color: #FFFFFF;
}
This may not work for my future layouts, but may be a better CSS. -
thanks x.man!
I have been playing around with some footer positions.
The site helps explain it better. -
- CommentAuthormay_bailey
- CommentTimeFeb 1st 2008
Hello. I want to add shadow for the right and left borders for a web site that I made for my teacher. I use joomla cms and of course it has got css file for the template. How can I do this shadows? I mean do I have to create an image of a shadow first?
Thanks alot
bailey -
The shadow is one larger image behind the main content. It was a trick I had to search for too. If you have a 800 px content area, build your shadow with a 800 px white center with shadows on the edges. Repeat the shadow along the y-axis. You will need to apply the shadow to your main wrapper or the body. The above layout the shadow was applied to the body. Not sure if this helps.
-
- CommentAuthormay_bailey
- CommentTimeFeb 6th 2008
hi again,
thanks buddy. I think I am successful for my first trial. But 800 px of shadow doesnt match to 800 px of body. I mean , I could manage it by keeping the shadow image wider than the main body ;) -
oh yeah I should have said 900 px on the shadow, must have been a late night
1 to 8 of 8