How do i keep my footer at the bottom of the page even when I click the toggle for the sidebar? The footer I made is at the bottom but whenever i click the sidebar toggle it goes up like this
Im using bootstrap btw.
This is how I did it. I'm not entirely happy with the outcome as the height of the footer is a fixed number (I would prefer if the height could be dynamic).
<div id="wrapper">
All your contents, div, nav etc go in here
<div id="push"></div> <!--add the push div here -->
</div>
<footer>
</footer>
The CSS:
#push, footer {
height:100px; /*or whatever height you need */
}
I'm not sure what your codes look like, so I can only hope that this helps.
I think you are looking for this: http://getbootstrap.com/2.3.2/examples/sticky-footer.html
It is a plugin which makes your footer sticky. You can find the code in the examples folder of your bootstrap download.
Related
I have this page with a fixed nabber on top (using default bootstrap navbar).
The page holds a menu that includes links to different parts of the page using html anchors. The point is: the scrolling position is not perfect because I have this navbar occupying the first 50px of the page, so after clicking on the html link to anchor, the content is 50px hidden by the navbar.
What I want to do is: that the anchor link consider the first 50px to scroll it perfectly to the content.
Does anyone have an idea of how to fix it?
With Twitter Bootstrap there is a necessity to provide additional spacing when the navbar is fixed.
Underneath(or after, you might say) you'll want to provide the additional spacing required to unsheath the covered content out of mystery and into usefulness.
further reading: http://getbootstrap.com/components/#navbar-fixed-top (they actually recommend a padding-top of 70px to the body element)
You can either place a div that is 50px high over the content you want to scroll to, then anchor to that:
Link
<div id="link" style="height:50px;"></div>
<div class="content">
Content Here...
</div>
JSFiddle Demo
Or, give the content div a padding-top, or margin-top of the height of the nav bar:
Link
<div id="link" class="content">
Content Here...
</div>
CSS:
.content{
padding-top:50px;
}
JSFiddle Demo
I want to make a Website with a background that is fixed (i alredy have that) and in front of the background in the middle is my stuff, like this site: http://www.nexusmods.com/skyrim/? I searched the whole internet but I can't find anything. and I already searched in the source. Can someone help me? sry for my bad english, I am swiss. Pleas feel free to correct me.
what your are looking for is setting a fixed width of your main content, and then set an auto margin for left and right so that it is centered.
.content {
width:600px; //set your desire width here
background-color:#ffffaa; // color is just there to visualize
margin-left:auto;
margin-right:auto;
}
in your HTML:
<body>
<!-- header -->
<!-- main content -->
<div class="content">
This is the main content box
</div>
<!-- footer -->
</body>
Hope this would help.
regs,
Yann
I'm trying to make an our team page using bootstrap but I can't get the footer to act right. At first it was not filling the width of the page, now (I'm not so sure what I did) this problem is solved but it is overlapping onto the content: some thumnails, writing, and a link. The page with the problem is: http://rdtaxsavers.com/new/OurTeam.php
My css file is at rdtaxsavers.com/new/css/bootstrap.css
You'll notice that the rdtaxsavers.com site footer works fine. Thanks in advance!
EDIT: I got it back to where the footer is not overlapping but now the width issue is back. You will see in my css that my modal-footer class has width:100%; at the end of it but this does not fix the issue.
EDIT: This is driving me nuts. When I fix the width problem then it overlaps, when I fix the overlap the width is broken.
I think you are placing the footer inside the Container class, the container class has a width of 1170px. therefore the footer will not be 100% width to the body. move the footer out of container class. or you have to change the width of container class.
this is what you have:
<div class="container">
<div class="row">...</div>
<footer>...</footer>
</div>
try to do this:
<div class="container">
<div class="row">...</div>
</div>
<footer>...</footer>
Try clearing the float:left in the ul.thumbnails element.
before I ask the question here are my two constraints:
should work in IE 7+
I can only change the CSS, I can not change the HTML/JS
So, I've got two div's:
<div id="content"></div>
<div id="footer"></div>
"#content" is the content.
"#footer" is a footer which only contains a background image and nothing that is really of value.
Now, how can I hide part of the footer when the page is so long that it scrolls, but display it completely when the page doesn't scroll?
(So far, I have tried stuff like:
#footer {height: 30px; margin-bottom: -20px;}
but that doesn't seem to work...)
here you have a solution only with HTML and CSS:
Source:
http://www.cssstickyfooter.com/using-sticky-footer-code.html
Example:
http://www.cssstickyfooter.com/
Good Luck
I'm in a little bit of a pickle. My page doesn't end with my footer, as it would normally do. Instead, there is a lot of "body background" going on after all my divs end, while I would really like the scroll to end with the bottom of the footer.
I am not entirely sure, but this effect may have to do with my page menu, which uses text and jpg with a lot of hover (on the active page it has a height of 350px, on Dreamweaver's layout however it is about triple that height, due to all the jpgs which are listed.
My question: Is there a way to make the page "end" with the last div, the footer? As the whole html is a little too much, here's my basic layout:
<body>
<div class="backgroundofwholepage">
<div class="menu">
<!--contains a few other divs for the menu-->
</div>
<div class="content">
<!--contains a three column div structure, based on float-->
<br class="clearfloat">
<!--contains clear:both-->
<div class="footer">
</div>
</div>
</div>
</body>
If any of you have an idea, I'd much appreciate your help!
ACME
You either want a sticky footer (putting your footer at the bottom of the page for sure) or you want to put a background on your html element so that the body background doesn't fill the window.
html { background:white }
body { background-image:url( ... ) }
For example, see: http://jsfiddle.net/vRBZM/