...

View Full Version : How would you code this kind of footer?



sasho90
12-16-2010, 08:49 AM
Hi
I'm trying to build the code from a design made in Photoshop. I am wondering how to do the overlapping content div over the footer:

http://img692.imageshack.us/img692/1061/sheetoverlap.th.jpg (http://img692.imageshack.us/i/sheetoverlap.jpg/)

If this info is of any help - I'm designing in 960 width. Any suggestions? :confused:

paolo1
12-16-2010, 01:03 PM
Just aplly this black backround image to body or wrapper div. Then make content div exact height to overlap this image as you like. And then place footer div right after content div with text only without any background.

SB65
12-16-2010, 01:40 PM
Perhaps with a negative margin, eg:


<div id="wrap">
<div id="top"></div>
<div id="bottom"></div>
</div>


with:


*{margin:0;padding:0}
#wrap{background-color:#333333}
#top{width:900px;background-color:#CCCCCC;border:10px solid white;margin:0 auto;height:300px;position:relative;z-index:2}
#bottom{background-color:#454545;border-top:2px solid white;height:150px;margin-top:-50px;padding-top:50px;position:relative;z-index:1}

sasho90
12-16-2010, 02:10 PM
paolo1, unfortunately the content height will vary and can't be fixed.

SB65, I owe you a beer! It works flawlessly! :eek:

cineweekly.com
12-16-2010, 08:48 PM
Geez, I try to help out on here but you guys are too fast. :p Good job SB65.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum