I am working on this page: http://www.myfortune3cart.com/journeyfilm/cartadd.cgi
The background below the horizontal navigation is not continuing down to the footer. It does work on other pages:
http://www.myfortune3cart.com/journeyfilm/Products.html
I can't find where to change the css.
Screen shot:
Thank you,
Matt
What happening is on your Product page your background extends to the footer because there is content that fills the container. On your home page the background image does not do this because you dont have enough content to allow the container to extend to your footer.
So once you add your content to the home page the container will grow closer to the footer if there is enough content. If that is not good enough you can add a min-height to your content container so it always touches your footer. I added a min-height: 800px; to your .page-right-container and your content will show like you intended. You will have to adjust the number to fit exactly the way you want but that should get you started.
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'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
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.
I am trying to adjust my Wordpress theme, and I've created a child theme based on twentyeleven. The main issue I have right now is with the width.
Please take a look at a live sample I created using just HTML and CSS. This is what I am trying to make my wordpress theme look like:
http://danapaigetrentlage.com/cfsa-comps/lff-profilepage.html
I want the page width to be 100% so that the sky background and white-wrap bleed horizontally off the page, but I also want the content to be centered within the page.
You can see how far I've gotten towards this goal by looking at my wordpress site:
http://danapaigetrentlage.com/cfsa-test/
You can see the page is wider than 1000px (the theme's default width), but still not full-width, and there's a horizontal scrollbar, instead of the content just being centered.
I'm just not sure what I'm doing wrong here. Any ideas?
Thanks,
Dana
Looks like it's just a case of setting body's padding to 0.
body {
padding: 0;
}
I have a page where the main content has a variable height. I want to have a fixed height (about 50px) footer to the very bottom of the page.
I need it to scroll along with the page (so not a fixed position).
A couple scenarios:
If the body content is 300px tall, the window has no scrollbar, the footer would be all the way to the bottom and visible.
If the body content is 900px tall and the window has a scrollbar, the footer would be all the way at the bottom with no space between the footer and the bottom of the window, and not visible unless you scroll to the very bottom.
Is there a way to accomplish this in pure CSS? Trying to stay clear of using JS to handle this.
see the fiddle for code and demo
fiddle: http://jsfiddle.net/gLpFJ/
demo: http://jsfiddle.net/gLpFJ/embedded/result/
Note: Please note this http://jsfiddle.net/yp4EH/ is not for the answer it is just for demonstration purpose.
I am giving this for help and for concept purpose This fiddle http://jsfiddle.net/yp4EH/ is not related with this question but based on same situation - sidebar, content, footer at bottom always.