I want my footer (on some pages) to remain fixed to the bottom of the browser window regardless of the height of the content. Similar to some of the toolbars you see fixed on the bottom of the browser window on sites like www.facebook.com and the meebo toolbar (e.g. abduzeedo.com).
I did some quick searching and I see some jQuery scripts and CSS hacks with users complaining about IE incompatibility, etc... is there a good standard way of doing this? Even with meebo and facebook, it seems like the toolbar can kind of jump a little as you scroll whereas the CSS solutions look very solid. Is there a simple CSS solution? I assume it's something along the lines of making the footer have absolute positioning with bottom: 0...
If you want something to "stick" to the bottom, you should use the css fixed position. This will locate it to the bottom of the window.
Using "absolute" will not be correct, because it will located the div relative to the first non-static element. Most of the time this is the window, but that doesn't have to be the case.
Html code:
<div class="bottom"><h1>Add to bottom</h1></div>
Css code:
div.bottom {
position:fixed;
bottom:0px;
height:200px;
left:0px;
right:0px;
border:solid 4px red;
}
There is a very good tutorial from a guy called Soh Tanaka - http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/
Use absolute positioning in CSS.
http://jsfiddle.net/TMD9X/
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.
I am working on a small PSD to HTML File. So did everything and completed the whole index file somehow but now at last when I came to create the footer and nothing is showing up.
Wondering why footer is not showing?
Here is the index page link : http://www.webngraphicssolutions.com/urgent_psd/index.html
Because you have style="position:absolute; top:150px;" applied to the image inside the footer. And there is nothing in the footer other than that.
Do this, to see that footer image is loading but is not visible due to positioning.
style="position:absolute; top:50px; left:100px"
or do this
style="position:fixed; bottom:0; left:40%;"
You need to remove absolute positioning and let the footer fall where it should, then apply relative positioning or absolute one if required.
A comment: bad bad HTML/CSS programming.
But as an exercise,
first create Container, Header, Content and Footer.
Fill them with data. Do not apply CSS yet, get to know their static positions first.
Then, move things around with position and floating.
This is not how seasoned web designer work, but it's a start.
position:fixed; on your css
see if it helps
I'm new to stackoverflow and so I apologize in advance for rehashing any issues already addressed here (I'm sure they are, just not sure how the apply to my specific situation).
Anyway here is the site I'm working on - www.betsyandalex2013.com. I would like to have all of the elements fixed in place. I've been playing around with it using Firebug but when I use position: fixed; on say #wrap I can't scroll over to see the rest of the content. Alternately, when I fix the position of #header, the links disappear. Again, I would ideally like to fix all the elements in place and be able to scroll across (and up/down) to see any content when the browser is resized.
I am not sure what you said. But setting:
#header {
position: fixed;
top: 0;
}
It will work: The header will be out of the natural flux of your page and it will be at top of the screen even when you scroll down/up.
PS: To see the effect put content to #wrap element.
Is it even possible? I made a header for my site position at "fixed". The i also have an image positioned at "relative". Whenever I scroll the site.... I noticed that the image was layered "above" the header. Even the twitter profile widget i placed was above the header. They both overlap the header and i dont want that. Any idea on how to resolve my problem? please HELP!
Btw.... ive heard that "fixed" is buggy esp in Android, where I am making my site.
You'll need to use z-index to set the layering, something like this:
.menu {position:fixed; z-index:99999}
.content {position:relative; z-index:1}
Then you can fine tune it by using numbers in between.
I know this sounds somewhat counterintuitive, but let me explain what I am trying to do.
I have a large element that serves as the background. It does not resize. It is often larger than the screen it is viewed on. Most of the content of this element (it's just an image) is near the center. Let's say that the only NECESSARY information is in the middle 800px, and the whole thing is 1600px wide.
Why is it wider than necessary? Because it fades pleasingly into the rest of the background and adds to the design of the site.
So I made the element fixed and used a standard trick to center it. It works perfectly on a large monitor. It stays centered, if some of it is a little too big, it doesn't allow you to scroll over in order to see what is basically nothing. I like that.
But if the screen is too small, you can't see it all. You can't just set the min-width or min-height of the page because when you go to scroll, the background image stays in place, because it is fixed.
If there was a way to have a fixed element actually move with everything else when the page is scrolled, that would work perfectly, because I could specify the min-width to the size of the required elements of the image. That would work very well.
Otherwise, another solution would be to use some other form of positioning that allows for the prevention of being able to scroll to see the whole thing. Then, again, I could just set the whole with a minimum width, which would allow me to set exactly how much of the content is scrollable.
Is any of this possible? I feel like I am missing something simple. Ideally I would not have to resize any images, serve up multiple css sheets, or use any elaborate javascript or anything like that. Thanks for the help!
I have finally solved this problem after a ton of experimentation and the solution turned out to be basic CSS, which is awesome.
I go into great detail illustrating this solution at my blog. Alternatively, here is the working demo.
HTML
<body>
<div id="box">
<div id="element"></div>
</div>
</body>
CSS
<style type="text/css">
html, body {
height:100%;
}
body {
margin:0px;
padding:0px;
min-width:1000px; /*Set the width you want to be able to scroll to here*/
}
#element {
height:100%;
position:relative; /*This section centers your element*/
left:50%;
margin-left:-800px; /*Half the width of the image*/
z-index:-9999; /*This part puts it behind everything, not needed if you aren't making a background*/
background:url(image.jpg) no-repeat;
}
#box {
height:100%;
min-height:700px; /*Set the height you want to be able to scroll to here*/
overflow:hidden; /*Needed due to centering with margins*/
}
</style>
I know you would prefer not to use elaborate javascript.... the JQuery library allows for some great little fixes to things like this with a minimum of code... you could also use a relatively small snippet without jquery... basically all you need to do is set an event listener for window.scroll and set your fixedElement.scrollTop to match...
quick JQuery example:
$(window).scroll(function(){
$('#fixedBackground')[0].scrollTop=$(window).scrollTop();
});
I am not CERTAIN I know exactly what you are wanting to do but the below snippet of css might help you. Not sure.
body{ background-image:url(../images/bgImage.png);
background-attachment:scroll; background-position:center top;
background-repeat:no-repeat; margin-top:0px; margin-bottom:0px;}
You can set up your positioning using any combination of the attributes in that snippet and the background-attachment is what makes it scrollable.
It would be helpful if you posted your css for what you have currently so we could really help you. Let me know if I can be more clear.