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
CSS & HTML: I'm ripping my hair out over this sticky high z-index footer.
Bottom of Page1 to 4 of 4
-
Hello *hopefully smarter people than myself.
Here is the comp:
http://www.thepinkboa.com/comps/websites/macallan/
i need the footer to stay at the bottom of the screen.
i would like the site (parchment) to move vertically out of the footer, with the mountains as a body bg-image stationary.
i'm running into all kinds of problems with the treeline png overlapping the "submit" button, among other things.
Has anyone built something of this nature? Can you give me ideas of how to best go about building it?
Thanks in advance,
-brad -
Hi Brad,
that's the way to go:
<html>
<head>
<style type="text/css">
body {
background:url(http://toghaus.com/president/clouds.jpg) no-repeat fixed top center;
}
#footer {
background-color:#0c0;
bottom:0;
height:100px;
left:0;
position:fixed;
width:100%;
z-index:10;
}
#page {
background-color:#c00;
height:1000px;
/* margin-bottom == #footer.height!!! */
margin:0 auto 100px auto;
width:600px;
}
</style>
</head>
<body>
<div id="page"></div>
<div id="footer"></div>
</body>
</html>
Dave. -
Thanks for the reply Dave! This is a great solution for Safari, but not one for IE :(
Any other ideas? -
Could you please upload all the different parts of your image seperately? Background, main page and overlapping footer. Thanks.
1 to 4 of 4