PDA

View Full Version : Issue with fixed header/footer + repeating body



darrengreer
Sep 10th, 2010, 07:45 PM
Okay, assuming the following layout:


<header>
</header>
<body>
<content>
</content>
</body>
<footer>
</footer>

I need a fixed height image (190px) in the header, a fixed height in the footer (665px), and then a repeating center to fill in the gap should their be one. The problem I have is that I need the <content> to also be "over" the footer fixed image, but need the footer image to be over the repeating image. In order to get the background images working, I am using a negative margin-top in the footer, and the background is working just fine. However, the <content> is also appearing below the footer background fixed image in IE7, but not in firefox/safari/chrome.

Is their something I need to do diff to get this to work in IE? Z-index's somewhere? Thanks for any help!

Lerura
Sep 10th, 2010, 11:23 PM
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>My test page</title>
<style>
body {
heigth:100%;
margin:0px;
padding:0px;
background-image:url(backgroundpicture.png);
}

#header {
position:absolute;
top:0px;
left:0px;
width:100%;
height:190px;
background-image:url(headerpicture.png);
}
#footer {
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:665px;
background-image:url(footerpicture.png);
}
#content {
z-index:1;
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id='header'>
</div>
<div id='content'>
hjkfsdnvgser<br>sdgfhgvserx<br>fdgjbxgfb<br>hjkfsdnvgser<br>sdgfhgvserx<br>fdgjbxgfb<br>hjkfsdnvgser<br>sdgfhgvserx<br>fdgjbxgfb<br>hjkfsdnvgser<br>sdgfhgvserx<br>fdgjbxgfb<br>hjkfsdnvgser<br>sdgfhgvserx<br>fdgjbxgfb<br>hjkfsdnvgser<br>sdgfhgvserx<br>fdgjbxgfb<br>hjkfsdnvgser<br>sdgfhgvserx<br>fdgjbxgfb<br>hjkfsdnvgser<br>sdgfhgvserx<br>fdgjbxgfb<br></div>
<div id='footer'>
</div>
</body>
<html>
Notice: I have moved your header and footer INSIDE the body, where it should be.

Your footer image is way to high.
on 1024x768 or lower it will cover the hole page, including the header.

darrengreer
Sep 11th, 2010, 02:47 AM
Notice: I have moved your header and footer INSIDE the body, where it should be.

Your footer image is way to high.
on 1024x768 or lower it will cover the hole page, including the header.

Thank you for the help, but I don't think I'll be able to do it quite like that. I was trying to avoid you having to look at the actual site and CSS, but it might make more sense if you do: http://foreverstone.com/prestashop

Outside of the fact the background images aren't setup for repeat and expansion yet, it renders fine in chrome/safari/firefox, but in IE it is totally jacked. The CSS divs to take a look at are fairly obvious if you use something like chrome's inspector. The global.css referenced is quite large on the other hand :) If you are willing, would appreciate a look :)

Lerura
Sep 11th, 2010, 07:14 AM
Very Nice Design!

I see only one mayor problem as it is now:
The overlapping effect one the vertical edges.

And it would be easier to make it fit, if the background was split into the four mayor parts:
The vertical edges.
The main background.
The header background with the borealis effect
and the footer background with the stones.

I would be more than happy to help you edit the graphics and after that we can have a look and that HUGE css, that i think could the made much smaller.

Shall we go in private to make this a really great page.????

I am quite busy for the weekend but we can start it up on monday if you want