I have the following CSS which positions a div at the bottom of the page.
Q: How can I stop content flowing underneath it?
#footer {
position:fixed;
bottom:0;
background:url(../images/bg-footer.jpg) top;
z-index:200;
height:34px;
width:100%;
line-height:34px;
padding:0;
font-size:11px;
color:#fff;
}
I can't add padding to the body or anything because I have a fullscreen background image in place as per this tutorial:
http://css-tricks.com/how-to-resizeable-background-image/
try the sticky footer
Have you tried using: position:absolute; instead?
If you want to keep the content above your footer you should start by removing the positive z-index from it.
If you have the footer as the final div of the page (perhaps wrapped in a full page div) then try setting the clear property to both in your css, eg:
clear: both;
Which should prevent any other divs from falling below the footer.
Related
is it possible to see all the content in the top div before the second div scrolls over.
Check the fiddle
http://jsfiddle.net/KyP8L/91/
many thanks for looking.
.div-top{
height:auto;
min-height:100%;
width:100%;
position:fixed;
top:0;
left:0;
background:#ff0;
z-index:500;
}
.div-bottom {
width:100%;
background:#0ff;
margin-top:100%;
z-index:600;
position:relative;
}
What you want is though not possible with css, you can do it with jquery : http://jsfiddle.net/KyP8L/92/
Just check the scroll, if it reaches top, then assign the z-index(higher) to the .div-bottom
$(window).on('scroll',function(){
$(window).scrollTop() ;
;
if($(window).scrollTop()> parseInt($('.div-bottom').css('margin-top')))
{
$('.div-bottom').css('z-index','600');
}else{
$('.div-bottom').css('z-index','0');
}
console.log('top'+$('.div-bottom').css('margin-top'))
console.log('scroll'+$(window).scrollTop())
});
Edit:
As the OP says in comments what he wants is, to be able to scroll down
the top div and then I want the bottom div to scroll over the top div
here is the fiddle http://jsfiddle.net/KyP8L/108/
I don't actually understand what you mean by scrolls over,
but setting.div-top{ height:100%} will let you entirely visualize div-top befor getting to the second div.
And still setting .div-top to fixed wouldn't have sense.
Have a look at, http://thomaspalumbo.com
I have this CSS for my website's container:
.graybox {
padding: 0 30px 30px 30px;
background: #ededed;
position:absolute;
left:0;
right:0;
}
Then I have a container on top of that to center that info.
The .graybox container spreads the width of the page like I want but now my footer div is hidden, according to firebug is it actually behind? And up on the page?
Is there a fix for this?
While I'm here can anyone explain the white space on the right side of the page. It comes into effect once the page is resized smaller.
You can use the CSS z-index property to make sure your footer is in front of the content. Z-index only works when the element is positioned though. So make sure you add position:relative to your footer
#footer{
position:relative;
z-index:999;
}
Read more: http://www.w3schools.com/cssref/pr_pos_z-index.asp
EDIT
Just checked out the code of your website, and I don't understand why your graybox is positioned absolutely, this will only make things more complex. The same goes for your menu, why position it absolute, why not just add it in the right order in the HTML in the first place?
EDIT
If you want to center your content but with a background that has a 100% width then you can simply add a container div like so:
HTML
<div class="container">
<div>lorem ipsum....</div>
</div>
CSS
.container{
background:red;
}
.container div{
width:400px;
margin:0 auto;
background:yellow;
}
See JSFiddle here: http://jsfiddle.net/HxBnF/
Currently you cannot do this because you have a container which you set at 980px, don't ever do that unless you are sure you don't want anything to wrap over it, like in this case the background of a div in that container.
in the div style, just assign a z-index value greater than any other z-index such as
.divClass{
position: absolute;
z-index: 1 //if other elements are still visible chose a higher value such as 20 or even higher.
}
I am currently working on a website which was all going well until the css now thinks that the bottom of the page, even though i have positioned the image with
position:absolute;
bottom:0px;
is actually about 100 pixels above the bottom! I can't figure it out and my only answer could be because of how I am repeating things across the layout.The site can be found at SemaphoreDesign The paste bin for the style sheet is here And for the HTML go here I really cannot figure out why the header and the endside are not at the bottom of the page and why there is a scroll bar.Thanks
you can do a fixed position for these 2
#endside {
width:100%;
float:left;
height:112px;
position:fixed;
bottom:0px;
overflow:hidden;
background-image:url(images/main_09.png);
z-index-2;
}
#footer {
width:915px;
margin: 0 auto;
background-image:url(images/main_10.png);
height:112px;
position:fixed;
bottom:0px;
z-index:11;
}
Mostly likely you're scrolling down when you see the problem?
You should be using position:fixed if you want it to not move when the user scrolls.
The reason you're getting a scrollbar in the first place is because you set your "content" <div> to height:100%, which means 100% of the window height. Since there's other elements the height exceeds the window height.
Something like this might help:
HTML: http://pastebin.com/H0EauYeu
CSS: http://pastebin.com/mbV44Jef
I don't think you want to use position:fixed. This site has good CSS for footers you can copy:
http://www.cssstickyfooter.com/
I'm actually working on a website that should have a div in position fixed on the top of my page.
But it doesn't work fine : my div on the top is covering a part of my page. I don't understand how to get a solution for this.
The div fixed on the top is ".menutop" :
.menutop {
width:100%;
background-color:white;
top:0;
position:fixed;
margin-bottom:10px;
border-bottom:1px solid black;
color: #428CB7;
}
Should I add something in my body configuration ?
Thank you !
When an element has position:absolute or position:fixed, it is removed from the flow, so any other elements will act as if it's not there. In order to prevent this causing problems, in your case, add a margin-top to your content so that the menu no longer covers it.
You will probably need to add a margin-top to the body for whatever height the menutop is.
All,
I have a page which is suppose to take up only the available screen space in the browser.
I have a 'top bar' and a 'bottom bar', both of which are fixed positioned at the top and bottom of the page. I want to have a div which will consume (take up) the remaining of the space inbetween the two bars mentioned above.
Its crucial that the middle div is not overlapped by the top and bottom bars. Is this at all possible with CSS or do I need to make use of js.
Also, if I do go with js, considering the browser loads up the CSS first before the js code, how is the above work out using js for centre positioning?
Many thanks,
You can use relative and absolute positions. Here an example:
css
html,body,#wrapper {
height:100%;
margin:0;
padding:0;
}
#wrapper {
position:relative;
}
#top, #middle, #bottom {
position:absolute;
}
#top {
height:50px;
width:100%;
background:grey;
}
#middle {
top:50px;
bottom:50px;
width:100%;
background:black;
}
#bottom {
bottom:0;
height:50px;
width:100%;
background:grey;
}
html
<div id="wrapper">
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
</div>
Demo: http://jsfiddle.net/jz4rb/4
This demo works for me in Chrome12 but YMMV depending on which browsers you need to support. For example position:fixed does not work correctly in IE6.
Use absolute positioning on the body tag. position:absolute with zero top and bottom will "stretch" body to be the same size as the browser window. Alternatively, setting height: 100% also works but I remember it works wierd for certain old browsers.
Then use absolute positioning on the center div, with enough top/bottom offsets to avoid your header and footer bars. The header bar is absolutely positioned with top and the fotter is absolutely positioned with bottom.
Note: This won't work on mobile browsers. You'll need to use JS to get the window's height and manually set the center div's height.