I have difficulties sticking a footer at the end of each pages without showing a bottom margin on very big resolutions (2560x1440 for instance).
When used as "position:absolute" element it works fine on small heights pages such as http://www.perfect-profile.fr/mesdames
Unfortunately, when on big heights pages, the footer will stays in the middle of the page : http://www.perfect-profile.fr/prix
I tried "position:relative" and that's the opposite : it show at the end of the content on big heights pages and keeps a margin in the bottom on small heights pages. I could determine a section min-height but the result would be hasardous on big resolutions.
Do you have any clue what I could do ? Thanks
You need to use:
position:fixed
and your footer will stay at the bottom of the viewport...
Well, as it seemed trickier than expected I had no other choice than to rethink the display.
I used a "position:fixed" and "bottom:0" footer to put it at the very bottom of the viewport no matter how much content the pages have. Not what the client expected but that does the trick.
Thanks everyone for trying to help me on this one. Problem solved.
<style>
footer
{
position:absolute;
bottom:0;
width:100%;
}
</style>
you have to set footer position fixed or absolute
Related
I'm making a page with HTML and CSS and the width of the page is growing as I use
position:relative;
left:100px;
When I put this code in CSS, the page is pushed to the right 100px making a huge blank area to the right of my website which looks horrible.
Here is a link to my website: Wagicalmales
If you side scroll right you'll see what I mean.
Thanks in advance,
Alex
That is the correct behaviour when using position: relative (the position is set relative to where it would have been).
I'm assuming the element you are having issues with is the h1 with the 'WagicalMales' text it. To fix your problem change left:200px to margin-left:200px.
This is the website I'm working on:
http://uber.imu.uiowa.edu/isa/
The footer was floating to the top of the page since there wasn't enough content, so I used this trick to push the footer to the bottom:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Problem is, there is too much space and it added a scrollbar. How do I fix it so the footer is on the bottom of the page, but doesn't add that scrollbar?
The current method is great, i use it all the time. You just forgot to set the negative bottom margin of the wrapper to the same height as footer and footer-push. Update your .wrapper css to this margin: 0 auto -300px; Did the trick for me in the chrome inspector.
Well, keeping your current method, I'd just decrease the height of .push:
.push{
height:50px;
}
But that's not the best way to do this.
http://jsfiddle.net/VFqTv/
In this example, you give the body tag a background color (or image) that is the same as the footer, then the content fills up as much space as it needs. The footer lies right below it, and the remaining part below it that flils the rest of the screen acts as a filler of sorts.
The Contents in you webpage are too much to fit on the single screen. So if you want to remove the scroll bar, either you have to reduce the font and the contents size or you have to remove some contents.
But if you want to reduce some vertical space in webpage remove height:200px; from .push {} and add margin-top:100px;
The image of footer is too big, i think you have to resize your image in photoshop then use it in the footer, or put the image over your footer.
I want my footer to always be at the bottom of the page. I tried using:
bottom:0px;
position:relative;
But that seems to let it go into the middle of the screen under the text. What am I doing wrong. I really dont want to used fixed because of the IPAD!
Use position:absolute and make sure, that the footer is not inside another element with position:relative or position:absolute.
However, that will position your footer at the very end of your page, not at the lower rim of the screen. To do this you will have to do nasty Javascript hacks. Google for "iPad" and "position fixed" to get started.
Or see this SO question.
I'm new to doing layouts with CSS (I haven't done any web design for a long long time) and I can't seem to figure out how to get the footer of the page to display at the bottom the way I want.
Requirements:
-Display at bottom of content if content exceeds vertical size of viewport
-Display at bottom of viewport if viewport exceeds vertical size of content.
The code that I am using sets the footer at the bottom of the viewport, but if I size the browser to be shorter than the content, it just covers the content.
Code:
<div style="background-image:url(footer_bg.jpg); background-position:bottom; background-repeat:repeat-x; height:235px; width:100%; bottom:0px; position:absolute;"></div>
My main goal is to have a footer with text (ie. company info, contact info) and a background gradient. I'd like the footer background to span the width of the page, but I don't know if I can do that with the 960 gs divs.
EDIT: I'd like to do this with all CSS, no scripts if possible.
I found some good code to get a CSS footer at this link:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
The main problem I'm experiencing right now in implementing that with 960gs is the float:left; in the 960gs CSS. It seems that it's preventing my grids from vertically expanding the parent <div>. However, if I remove the float, 960gs seems to not work as well.
The following is the link with the float removed. The 'a' column is a grid_7 suffix_1 and the 'b' column should be grid_4 in the same container_12. In other words, they should be right next to each other.
Have a look at CSS Sticky Footer. It is done in pure html/css with no scripting at all. There is an explanation of how to get it to work with 960gs at signalkraft.com.
Hope this helps.
In CSS, there is no "if/else" ability. This is where scripting languages come in.
Look up JQuery. In JQuery, you can grab an element with the #id footer and say something like:
$('#footer').addClass('bottomView');
'bottomView' could make it so that element with the id footer sticks to the bottom of the viewport. Then, when the user scrolls, which JQuery can monitor, it can check to see if it wants to change the class to 'bottomContent'.
Then in your css, just have classes bottomView and bottomContent that place the element where you want.
Good luck.
How can I extend a div to the bottom of the page? Let's say I have a div that starts at the top, and has a background image I want repeated to the bottom of the page. How would I go about doing this?
Live example found here: http://mibsolutionsllc.com/ecgridos/about/ with the #content div.
Switch it around, have the background for your content as the body tags back ground then over lay the header over the top of it via a div or other element :)
CSS Sticky Footer does something similar, they've got a solution that seems to work on a whole range of different (including very old) browsers. If you don't need the footer you can always still use their solution and set the footer height to 0px.