Hey all, quick question regarding CSS. On my website, I'd like it if the navbar was centered, and pinned to the bottom of the header (the bottom of the gradient). I cannot figure out how to do this.
The site doesn't support IE... Yet.
A:
Try setting your header to a relative position and your nav to absolute instead of relative.
snkmchnb
2010-09-22 14:46:40
That moved the nav down to the bottom, but now I gotta center them. The float: left in `nav li` is what is messing it up, but if I get rid of that, the list goes back to being vertical.
Chiggins
2010-09-22 14:57:52
@Chiggins: For the 'header' tag use some float clearing techniques, like clearfix, etc. What I tend to do is, see my answer. I'm goona edit it now
Shaoz
2010-09-22 15:07:02
A:
Make your 'header' tag as a relative position. Then make the 'nav' tag as an absolute position, and do 'bottom: 0' to it. All in your CSS. And it should work. Then move it left or/and right, using the 'left' and 'right' rules in css.
Like this:
header {
position: relative;
zoom: 1; /*needed to clear float in IE*/
}
header:after {
clear: both;
display: block;
content: " ";
visibility: hidden;
height: 0;
}
nav {
position: absolute;
bottom: 0;
}
Shaoz
2010-09-22 15:03:28