doug s
asked on
CSS - Elevate image over div area (z-index?)
Hi I'm trying to render an image in my footer to look like this:
I've tried setting different z-index values for the various divs and decreasing margin-top for the image with no success. Any help appreciated.
URL: http://7pwc.moshpitdigital.com/
I've tried setting different z-index values for the various divs and decreasing margin-top for the image with no success. Any help appreciated.
URL: http://7pwc.moshpitdigital.com/
I wonder if your problem is that you placed the image inside the div that contains the footer. You should try positioning placing it so that it's not inside the footer container. Trying to see if I can get more time to play with it myself, but about to leave the office.
Trenton is right that you would avoid a lot of headaches if you put it outside of the footer div, but I'd like to find a way to do it without reorganizing your HTML. I'll take a closer look after work.
I'm assuming you want the footer to be full width, correct?
ASKER
Thanks everyone. Yes that's my next issue I'm having trouble figuring out - how to make my footer and menu full browser width while keeping the page content boxed at 1200px wide.
I'll consider that in my answer. I can see right off the bat that you need to set the max-width on divs inside of the wrapper, instead of the other way around.
If you inspect the #wrapper div and turn off the max-width property you will see that everything (except pieces of the header and menu) gets 100% width. You would then set the internal divs like #main to have the max-width and give it a margin: 0 auto; to center it.
If you inspect the #wrapper div and turn off the max-width property you will see that everything (except pieces of the header and menu) gets 100% width. You would then set the internal divs like #main to have the max-width and give it a margin: 0 auto; to center it.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks a ton Morgan, can't thank you enough!! For now I think positioned absolute to the bottom is what my designer is looking for.
Thanks Doug! However, I feel I must answer the original question, so here goes:
You might have to adjust some of the numbers, but I've got it working with the stylish plugin.
Cheers from Pismo Beach!
.footer-area {
padding-top: 0;
padding-bottom: 0;
overflow: visible;
}
.footer-4 > img {
position: absolute;
bottom: -200px;
right: 0;
z-index: 9999;
}
You might have to adjust some of the numbers, but I've got it working with the stylish plugin.
Cheers from Pismo Beach!
ASKER
Yessss!! Stoked Morgan thanks again, see you around hopefully!