I am trying to implement a sticky footer in boilerplate but I can't find a way for this to work. I have tried solutions posted by Michael Gorman and Steve Hatcher but both do not work for me.
I have researched and found that Sticky Footer is not supported by Boilerplate. Have any of you had any luck with this issue.
To see a page where I really need a sticky footer, please go here
Thanks for helping. Cheers
To ensure that the footer is always at the absolute bottom of the page you can use the answer accepted in this question: Make div stay at bottom of page's content all the time even when there are scrollbars
You will prob find that it requires a little fine tuning to work exactly as you require for your design.
If you just want a piece of HTML that stays on the same position of the screen regardless of the scrolling, you can use position:fixed on the element. This will create an effect similar to what you see on facebook, where the blue bar at the top, and the chat window at the bottom stay visible.
Related
I made my first Wordpress for learning purposes. I have downloaded Themekraft, and I added my own customized bootstrap header navbar, because I want to customize as much as I can.
I have some sections (only "inicio" and "articulos" are working), but when there is an article with photo (sometimes without photo happens the same), I have realised that blue navbar moves.
I tried to fix it in many different ways (adding a max width for the body
and navbar, deleting a lot of margins and/or paddings...), but I have only discovered that it is a problem of paddings... I think.
I mean, when I add, for example, a padding-top:10px for the body, everything seems to be ok... until I have an article or two. When it happens, it seems i have to add more padding-top on the body in order to "fix" the problem.
I have searched on SO suggestions, looking for some clues, but I found nothing.
Bootstrap navbar moves right on scroll
Bootstrap navbar covers top of section when linked
What could I do? I have uploaded the site to a server so you can check it.
http://pruebaint.esy.es/
As far as I can see it the issue is not any of your padding. Its the scroll bar that is causing the problem as the content moves somewhat to the left. If your page has lesser content without vertical scrolls you will not see the nav moving.
Is there any other problem that you see apart from horizontal movement?
How can I keep an image visible in browser window on a very long page vertically? (not centered as it is now) Here is the page that has the situation: http://designs-and-more.com/Apparel_Designs.html Note that as you scroll down you will see the links but I want them be visible at all times. Anybody have any help? If anyone knows of a link to an example that would be great since my programming skills are very, very basic. thanks greatly in advance.
The old-school way was to use frames. I believe most websites are not doing this these days (generally menus, side bars, etc. scroll away along with the page content) as they consider keeping the frames design to be undesirable for user interaction.
Ok I have checked your website. You have to add CSS speciality to your declarations.
vertical-aling: top;
.dsR37 {
background-image: url("images/but_Home_BG.png");
vertical-aling: top;
}
Example for home link, your other menu declarations different, so you have to add each other.
You're probably looking for CSS fixed positioning. Here's a demo from David Walsh's site: http://davidwalsh.name/dw-content/css-fixed-position.php
Google "css fixed positioning" and you'll find some demos on how to 'pin' the side nav to be visible no matter where the user scrolls.
I have a #main div nested within a container div that I want to fill the page down to the sticky footer. I've tried several angles, but can't seem to get it to work. If you don't use firebug, just ask and I'll provide CSS, etc.
Thanks.
site: http://www.dentistrywithsmiles.com
I've tried to do sticky footer many times and I never seem to learn that they are really hard to do. Your situation seems complicated and what you have now doesnt seem half bad.
I think I would use JavaScript to detect page resize and adjust the heights appropriately. Either that, or do something tricky with background images spanning both the footer and #main.
That's probably not what you want to hear but this is a tough problem for only using CSS - tougher than I would care to invest in.
With Jquery
http://css-tricks.com/snippets/jquery/jquery-sticky-footer/
or css only:
http://www.cssstickyfooter.com/using-sticky-footer-code.html
or
http://www.pmob.co.uk/temp/sticky-footer-ie8new.htm
I am using the CSSStickyFooter.com tutorial in my amateurishly imperfect attempt to get the perfect sticky footer working.
This is a specific question regarding the overflow:auto; style on the "main" div. With this in place, and when the window is narrowed by the user, I get a horizontal scrollbar halfway down my page. Can't this added scrollbar automatically appear at the bottom of the window like it's supposed to?
The reason you're getting the scrollbar in an odd place is because it is on the <div> rather than on the page. This is a result of using overflow:auto;.
overflow:auto; tells CSS that you want that particular <div> to get scrollbars (either horizontal or vertical) when it is too small to display all its content.
Therefore the direct answer to your question is No; you can't position the scrollbar elsewhere on the page, since it is attached to the <div>.
However, there may be ways around it.
Firstly, if you don't mind the content being clipped when the display is narrow, you can set the scrollbars such that it only gives you a horizontal one, and supresses the vertical one. You'd do that something like this:
overflow-y: scroll;
overflow-x: hidden;
Alternatively, there may be other ways to fix your code; CSSStickyFooter.com is quite well know, so if it works for others without this glitch, it can probably be made to work for you too. But we'd need to see a bit more of your code in order to help you further down that line.
I researched and tried many techniques for sticky footers and found this one to work great:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
I had problems with many other techniques I used before that one. If using CSSStickyFooter.com is not a strict requirement for your project, I recommend you use the technique described in the link I referred to.
I've done this in the past using a method similar to this:
http://javascriptkit.com/javatutors/static3.shtml
but I don't like the "flicker" effect as the page is scrolled and the div needs to move with the scrolling. Lately I've seen a lot of site that have an element (a div or the like I presume) that don't move when the page is scrolled but it's seemless...they're just there and it's a beautiful thing.
Unfortunately I can't seem to recall where I've seen it lately to view the source and try to figure it out so I figured I'd turn here and see what all of you experts can provide as far as assistance / suggestions.
TIA
Try setting "position: fixed" to the element.
I think this does not work with some IE versions, you'll have to us JS for that.
That site you linked to still mentions thing such as IE 4 on it, better no rely on it. It's outdated.
You can position an element to a fixed position with CSS, by doing position: fixed;.
Take a look at google reader.
It has a fixed header and a fixed side bar.