Hello i'm trying to implement a footer that sticks to the bottom of the page no matter the content size here 22twenty.com/wordpress and its not working the footer is for some reason sitting at the bottom of the gradient wrap not the page, i used this tutorial: http://www.wordimpressed.com/wordpress/put-a-css-sticky-footer-in-your-wordpress-theme/
If you need anymore info just ask
Thanks
Denver
Playing around with your page and CSS I found you hadn't quite completed the tutorial based on the link provided. The following is what was needed to be changed:
Move the footer tag outside of the container div.
Remove the margin line from the footer CSS rule.
These two things will move the footer to the bottom right of the page.
Related
I am struggling with an issue I can't seem so solve by myself. Perhaps you can shed some light on it. The issue is concerning a responsive website using Bootstrap 3.
The issue
The main content is horizontally and vertically centered. The header with navigation is fixed to the top and the footer is fixed to the bottom of the page. Perfect!
Check http://www.domains.cloudlabz.nl in a desktop browser for a working example.
The problem occurs when the main content gets too high. The header and footer do what they're supposed to do: stick to the top and bottom. But when the main content gets high, that's - in my case - unwanted.
Check http://domains.cloudlabz.nl/domains.php to see what happens or decrease the height of your browser window.
You'll see the header and footer overlapping the main content. That's a no-no for me.
What I would like
I would like the header and footer to stick to the top and bottom of the page like they do now, but when the main content gets (too) high I would like the header and footer to scroll with the main content. Like if they're stacked on top of each other.
Best regards, Peter de Leeuw
I am working on a large website for a client and we have run into an issue with the previous designers structure. The footer does not stay at the bottom of the content when it is dynamically generated. I have hidden divs that are opened with links. These divs contain user comments. When both are opened the footer overlaps some of the content. When I zoom in the footer overlaps some of the main content. I've tried:
Ryan Fait's CSS and HTML5 Sticky Footers
How to keep footer at the bottom even with dynamic height website
CSS Reset Sticky Footer
Prevent footer from overlapping
All with no success. Is doing a full restructure the only option? I've also tried using JavaScript to make the footer stay at the bottom of the content. But once the document is loaded and the height changes, the footer doesn't move with content. Ideas? The code I have is very long - 4000 lines of css, 2000 lines of HTML. Should I post part?
I've completely at logger heads with how I can get this footer to align with the bottom of the sidebar if zero content is in the space between the header and footer.
Sticky footer is not the solution because I don't want it to be at the bottom of the window. But inline with the bottom of the sidebar instead.
Here is an image of what it should look like but without the coloured blocks there at the moment they push the footer down where it is now.
I can't provide much code as this is on my local server, and is segmented and broken down into different files for wordpress.
screenshot http://s3.amazonaws.com/awesome_screenshot/2110547?AWSAccessKeyId=0R7FMW7AXRVCYMAPTPR2&Expires=1368128529&Signature=GjSmfhU6%2BZoYmSUj6oMEcvNXTEs%3D
as you can see the above screenshot is how I want the sidebar and footer to be with no content there.
Here is another screenshot showing my current problem, you can see how it latch's on to the bottom of any content on the page and sticks just below it.
http://awesomescreenshot.com/015198m642
Thanks in advance.
The sidebar needs a float:right; then create a div between sidebar and footer with clear:both;, have the css for your footer include margin-top:-xx (whatever pixels the footer height is). You might also need to throw a position:relative on there.
http://jsfiddle.net/uuTDG/
Fixed this by adding position relative to my container, then adding position absolute and bottom 0 to my footer.
Thanks anyway for the help
I wasnt to make something like this site where I can scroll up and down and my menu goes with me, but the logo remains at the top. How did they do this? I tried some CSS, but was not able to get the logo to stay in his place.
it's called a persistent header, it's too long to explain on here so you can use this tutorial: http://css-tricks.com/persistent-headers/
You can start with position:fixed and defining either top and left properties or bottom and left properties.
This web can help you too : CSS Sticky Footer
Actually I don't know how to find solution to this problem and how to name it.
Here's the link to my site:
http://www.portalpraktyk.pl/podstrona_itp
The problem is that I have page divided into 3 standard parts: top, content, footer. Between content and footer there's also facebook div to put social plug-in. What happens is that content of both divs (facebook and footer) stays under content div, but both divs actually goes up to content area (you can see dark background div right under header and behind content div).
I won't show you a code, because I don't know where the problem is. The best way is to check how this is written with web developer and firebug browser plugins.
Does anybody know solution to this problem?
Your problem is a classic problem of floats not clearing.
Look for information on .clearfix.
Basically the div#contents, has a height of 0, because #box_left and #box_right are floated, so div#contents is not containing them, and because of this your page gets all messed up.
Another tip is that instead of using position:relative and asigning a top:30px value, use margin-top:30px.
You need to clear your floats right after your #content div closes.