http://jsfiddle.net/vol7ron/bKWtM/
<body>
<div id="head"></div>
<div id="body"></div>
<div id="foot"></div>
</body>
body { padding:0;margin:0;}
#head { position:absolute; height:20px; width:100%; background:#900; top:0; }
#foot { position:absolute; height:20px; width:100%; background:#090; bottom:0; }
#body { position:absolute; top:0; z-index:2;}
// filler
for (var i=1,n=50;i<=n;i++){
$('#body').append('<div>' + i + ' (filler) </div>');
}
What I'm trying to do is position the footer at the very bottom of the document, not the opening window. So the green bar would come after line 50 and not appear on the opening view.
I'm looking for the classic layout, where if there was no absolute positioning the header would be at the top, then the body, then you have to scroll to view the footer. The only difference is I want the body to overlap the header (hence absolute positioning).
Note:
I don't want the footer to have fixed positioning..
I don't want to use JavaScript
Any help would be appreciated.
You've made this unnecessarily complicated on yourself. If your only goal is to overlap the body with the header, then you can just use a negative margin. Then you can leave everything statically positioned.
Working example: http://jsfiddle.net/uaBpx/1/
Otherwise, there is no way I can think of to position something at the bottom of the document, because the document height in your example is actually 0px. Once you pull out all the content (via absolute positioning), there is no height.
Related
Im having some issues achieving absolute positioning on an element. Im trying to implement two banner ads to stay stationary when the user scrolls through a div. I tried changing the parents position to relative and the children I want to remain static position to absolute. This gets the initial placement right, but I am still able to scroll past the absolute divs. Here is the appropriate CSS/HTML.
HTML:
<div id="pane1">
<div id="home-banner1" class="banner">
</div>
<div id="home-banner2" class="banner">
</div>
<?php ..... ?>
</div>
CSS:
#pane1{
width:100%;
background-repeat: repeat;
height:auto;
display:inline-block;
padding:20px 50px 50px 50px;
min-height:500px;
text-align:center;
position:relative;
}
.banner{
width:50px;
height:300px;
background-color:white;
position:absolute;
top:0;
}
#home-banner1{
left:0;
}
#home-banner2{
right:0;
}
Use position:fixed; for the banners so that it will stay on screen at fixed location even while you scroll up or down the page.
EDIT
For the hiding and displaying of banner only below that #container element, you could use some jQuery like this:
$(window).scroll(function() {
var top_div_height = $('#container').height(); // height of the blue top container
if ($(this).scrollTop() < top_div_height) { // hide the rightside banner if the user is viewing that blue top container
$('#home-banner2').css({
'display': 'none'
});
}
else{ //... otherwise show the rightside banner
$('#home-banner2').css({
'display': 'block'
});
}
});
Make sure you set the CSS rule position:fixed; for the #home-banner2 element.
Hope this will help.
Actually your code work exactly as expected.
Position: absolute move the element relative to the closest parent element with position: relative. So, if the parent element go outside the viewport, so it does the child absolute element.
To get the wanted result, you need some javascript/jquery to fix the element as its parent enter the viewport and 'unfix' when the parent leaves.
Something similar to the Bootstraps' affix
How to clip my top bar with screen. So as I goes down on page i mean scrolling down the page the top bar should also move. Just like in Facebook the top bar moves on screen.
I am searching google from last 2 hours. But unable to get, that what we calls it.
and my HTML/CSS is ..
#topnavbar
{
width:100%;
height:50px;
background-image:url('top.jpg');
background-repeat:repeat-x;
}
HTML
<div id="topnavbar">
</div>
You're talking about fixing the position of the navbar to the top of the screen, right?
top:0;position:fixed;
-
#topnavbar {
width:100%;
height:50px;
background-image:url('top.jpg');
background-repeat:repeat-x;
top:0;
position:fixed;
}
In CSS, positioning elements is a fundamental concept. In this case, you want a fixed position. According to MDN, you should adhere to the following guidelines for fixed position elements:
Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and doesn't move
when scrolled. When printing, position it at that fixed position on
every page.
To reiterate, if you want to keep an element in the same position, regardless of where the page is scrolled, use position:fixed
#topnavbar{
position:fixed;
}
Example
It seems there are some sort of image slider on your page. So what I will suggest you to include z-index also.
#topnavbar
{
width:100%;
height:50px;
background-image:url('top.jpg');
background-repeat:repeat-x;
position:fixed;
z-index:500;
}
What you need to search for is how to use the css attribute position: fixed; to have a div or other element 'stay where you put it' relative to it's containing element.
Really quick and rough example:
http://jsfiddle.net/c93cK/
I am playing around with bigcommerce at the moment and I am trying to recreate the footer structure for the header. You can see here:
http://thespeedfactory.mybigcommerce.com/
If you look at the footer, how it is full width but the content is central within it.
I want the header to be exactly the same, black with pink/white highlights.
Ive tried moving around the structure within bigcommerce, but I am having a brain failure in getting it to do and look how I want despite knowing it is based around containers and margins.
Any guidance is appreciated.
If I understand you correctly, you want:
the header (#Header) to span the entire width of the page
the footer (#ContainerFooter) to span the entire width of the page
the header (and footer to have the same styling (colors, etc.)
the content area (#Wrapper) to stay a fixed width and centered on the page
To do this, add the following css:
#Container {width:100%;}
#Header {width:100%; margin:0, auto;}
The above css allows the header (by way of its parent container) to stretch the width of the browser page. You'll notice #Wrapper is shifted to the left. Add this:
#Wrapper {margin:auto;)
This centers the #Wrapper.
Your structure should be in place and now you can add your colors, etc. to the #Header to make it match the footer.
This is pretty basic html/css.
Just create a div, place a container in it and start styling.
HTML:
<div id="header">
<div id="container">
<p>content</p>
</div>
</div>
CSS:
#header {
width: 100%;
height:400px;
background:black;
position:absolute;
border-top:3px solid #ff25a7;
}
#container {
width:90%;
height:300px;
margin:0 auto;
}
#container p {
font-size:30px;
padding:10px;
color: #ff25a7;
}
Here's a jsFiddle to help you get started.
You can try giving the header the same class as the footer and afterwards (if the footer's position is absolute bottom), set the position to absolute top:0px;
I am trying to create a 'back to top' image, it needs to stick to the bottom right corner of the page.
I have created the div with the image but I do not know what is the best way to make it permanently stay at the bottom of the page. Is it best to use absolute positioning?
Also, I want the div to only appear when the user has scrolled past a certain point, and to fade in (or something similar?)
I have looked online but can't find anything that does what I want. I tried simply getting the div to stick to the bottom but the tutorials I have been using show how to create footers, rather than just one small graphic, so it doesn't work as well.
What are the best practices for this? Any help appreciated!
How about this:
http://jsfiddle.net/uRN64/1
HTML
<div id="log" style='display:none; position:fixed; bottom:0px; right:0px; width:200px background-color:red;'>Back To Top</div>
<div style='height:1200px; background-color:orange'>Try Scrolling me</div>
JS
$(function(){
$(window).scroll(function() {
$('#log').toggle($(document).scrollTop() > 100);
});
})
To fade:
Change: $('#log').toggle($(document).scrollTop() > 100); to
$(document).scrollTop() > 100 ? $('#log:hidden').fadeIn() : $('#log:visible').fadeOut();
Let say you have a div
<div class="bottom">Your Img</div>
Apply fixed position to the div as we want the div to appear fixed.
By doing so we can freely move the div to our desired area.
Then by applying CSS property right:0; and bottom:0; we can move the div to the right most and the bottom most position on the page.
HTML:
<div class="bottom"></div>
CSS:
.bottom
{
width:100px;
height:30px;
background-color:Gray;
border:1px solid black;
position:fixed;
right:0;
bottom:0;
}
Here is a Live Example
Here is the sample code!
If the result area is too small and you will have to scroll down - some of featuresMenu text will hide behind the footer. How to prevent this, how to make featuresMenu to stick until it reaches footer?
Thanks!
body {
margin-bottom:50px;
}
#div_id {
position:fixed;
bottom:0;
right:0;
left:0;
width:100%;
height:50px;
}
this should do the trick, make sure whatever the height of div is you make a margin at the bottom of the page, so stuff doesn't hide there
Set the z-index of the floating div to 1, and the z-index of the footerdiv to -1.