Hi There
Does anyone know how to modify vB4 to have a sticky footer?
So no matter what the height of the browser window the footer appears at the bottom of the window. For pages where the page content is too tall you would need to scroll down anyway and the footer respects this height need. My challenge is to match up vBulletin 4.1.12 to an aMember 4.1.15 membership site that has a pre-coded sticky footer, so when you switch between the two sites (membership & bulletin board), the look & feel is seamless, the footer appearing constant across sites.
Using CSS there's a fairly well known way to make a sticky footer happen, shown below and other similar variations of this method:
(Credit to http://www.cssstickyfooter.com/html-code.html). Where the concept is to place the footer below the main content wrapper and size the html & wrapper divs to 100%. The footer CSS then takes care of the page positioning.
HTML
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
CSS
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 180px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -180px; /* negative value of footer height */
height: 180px;
clear:both;}
vBulletin Mods Attempted (so far)
So I tried doing this in vBulletin (my first customization of vBulletin, so I'm learning fast where & how to modify) using the .below_body div as a substitute footer so it could be beneath the .body_wrapper (as per the sticky footer technique) but for some reason a lot of white space appears (with no equivalent content) that pushes the .below_body version of the footer underneath the browser window. Plus on some screens the content overflows the footer. Obviously the CSS is causing this but I can't figure it out all last week using Firebug and other coding viewers.
My vBulletin knowledge is beginner but I'm an experienced CSS & HTML coder.
I'm not married to using this technique, the outcome is all that is important - having a sticky footer. So does anyone know from their customization experience a better way? Thanks for any help offered.
additional.css (mods attempted)
html, body {
height: 100%;
}
.body_wrapper {
min-height: 100%;
}
.below_body {
background-image: url(images/footer-background-1px.png);
background-repeat: repeat-x;
height: 80px !important;
}
Aly
Does anyone know how to modify vB4 to have a sticky footer?
So no matter what the height of the browser window the footer appears at the bottom of the window. For pages where the page content is too tall you would need to scroll down anyway and the footer respects this height need. My challenge is to match up vBulletin 4.1.12 to an aMember 4.1.15 membership site that has a pre-coded sticky footer, so when you switch between the two sites (membership & bulletin board), the look & feel is seamless, the footer appearing constant across sites.
Using CSS there's a fairly well known way to make a sticky footer happen, shown below and other similar variations of this method:
(Credit to http://www.cssstickyfooter.com/html-code.html). Where the concept is to place the footer below the main content wrapper and size the html & wrapper divs to 100%. The footer CSS then takes care of the page positioning.
HTML
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
CSS
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 180px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -180px; /* negative value of footer height */
height: 180px;
clear:both;}
vBulletin Mods Attempted (so far)
So I tried doing this in vBulletin (my first customization of vBulletin, so I'm learning fast where & how to modify) using the .below_body div as a substitute footer so it could be beneath the .body_wrapper (as per the sticky footer technique) but for some reason a lot of white space appears (with no equivalent content) that pushes the .below_body version of the footer underneath the browser window. Plus on some screens the content overflows the footer. Obviously the CSS is causing this but I can't figure it out all last week using Firebug and other coding viewers.
My vBulletin knowledge is beginner but I'm an experienced CSS & HTML coder.
I'm not married to using this technique, the outcome is all that is important - having a sticky footer. So does anyone know from their customization experience a better way? Thanks for any help offered.
additional.css (mods attempted)
html, body {
height: 100%;
}
.body_wrapper {
min-height: 100%;
}
.below_body {
background-image: url(images/footer-background-1px.png);
background-repeat: repeat-x;
height: 80px !important;
}
Aly
Comment