Adding Wrapper…. Help please.

[RB305]

Hello…. I’m new to this site and have only used CSS for a couple months

I would like help with adding a wrapper div to an existing CSS file that I can "wrap" around my existing page(s). I’ve seen a lot of sites that have this particular effect, but can’t figure it out, so I’m asking for help. And after reading all the good replies from some very skilled people on here, it should be a no brainer.

This forum page has what i’m looking for, where the grey border meets the white. But, I’m looking to add a shadow that fades to each side of the screen, (maybe about 25px) to make it "hover" on my background image. I can handle the rounded corners. I would also like, as I add more content or divs inside the wrapper, that it will expand automatically as the page gets longer, vertically. I fully understand colors, borders, etc. If I need to write a new CSS file and add it to my pages, that’s cool too.

Again, I want to add this to an existing page using a new div named "wrapper" or "container" that hovers over my existing background in my "body" div, encasing the existing divs to "complete" my page layout and give it a finished look.

Can this be done using CSS? Do I need to use an image or images to make the shadow? I’ve been a graphic artist over 25 years, so adding graphics is not a problem.

Any sample code and/or an explanation from the expert people here would be greatly appreciated. Thanks in advance….

RB

[Jerm993]

Have you watched, some of chris’s screencasts, watching the videos seemed to really help me .

I would consider watching these two videos to get started with the wrapper:

https://css-tricks.com/video-screencasts … ry-basics/

http://www.youtube.com/watch?v=GwQMnpUsj8I

There are two ways i can think of to have the drop shadow. there is a way via pure css however it only works on mozilla and webkit based browsers

http://www.css3.info/preview/box-shadow/

You can tweek that to have it show on both sides, if the top and bottom are covered.

The other option is to have a background image, you can put the image either as a full page background or on the wrapper.

however I would consider spending a lot more time working with structure of the page before you move on to the fancy extras such as drop shadows. I have been in the same boat you are, however i didn’t spend much time working out floats, and other structure issues. I still don’t know the difference between and em and pixels, floats also cause tons of troubleshooting for me.

if you need any help you can email me any time at [email protected].

[Author]

Posts