On 30/04/2011 6:49 AM, Steve Caramia wrote:
Great! Thanks for cleaning up my code. I'm a little confused, though.
The Sticky Footer page specifically says NOT to add margin values on the
top and bottom.
If the div#wrap has overflow: hidden, then you can have child elements
with vertical margins. The div#wrap itself can not have vertical margins.
Using top and bottom margins inside some elements may push your footer
down by that margin height, perhaps in a header or the wrap or main
<div>'s themselves.
See above.
Instead use padding to create spacing inside the
element. You'll notice this is happening if your page has little content
so that the footer should be on the bottom but you see that your window
scroll bar on the side indicates that it is sitting a bit below the
window bottom. Go find the offending top or bottom margin and switch it
to padding.
But it looks good now!
http://www.lankforddesign.com/
It still not a sticky footer. It's a footer that it always fixed at the
bottom of the viewport. To get this variant of footerStickAlt to work as
a sticky footer, change this CSS,
wrap {width: 960px;margin: 0 auto; min-height: 100%; }
^-- Note no # in your CSS.
#footer {
position: relative;
margin-top: -120px; /* negative value of footer height */
clear:both;
background:url(images_site/bg_footer.jpg) bottom repeat-x;
position:fixed; /* NOTE This causes the footer to be fixed in-respect
to the viewport */
height:120px;
/* width:100%; DELETE block elements are always 100% in width */
bottom: 0px; /* NOTE This is the offset that the footer has from the
bottom of the viewport */
/* display: block; DELETE block-level elements are always displayed as
blocks */
overflow:hidden;
}
to this CSS.
#wrap {
width: 960px;
margin: 0 auto;
min-height: 100%;
overflow: hidden; /* not needed if child elements don't have vertical
margins that can collapse into this element, safe to keep there */
}
#footer {
position: relative;
margin-top: -120px; /* negative value of footer height */
clear: both; /* this is needed if there is floating content such as a
side bar, safe to keep there */
background: url(images_site/bg_footer.jpg) bottom repeat-x;
border-bottom: 1px solid red; /* for testing, remove and adjust
height of footer */
height: 119px; /* for testing, remove and adjust height of footer to
height: 120px */
overflow: hidden; /* not needed if child elements don't have vertical
margins that can collapse into this element, safe to keep there */
}
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
