I might me using the terms absolute and relative wrong, but hopefully you get what I mean. I want to give my footer some "bottom: 10px" so that it stays at the bottom of the page, no matter if the page's content is more or less than 100% of the browser window. I tried positioning it absolute but it will be positioned relative to the browser window then, not the body.
This is an example: http://public-demo.webflow.com
Any ideas? Thank you :)
add this to the body
position: relative
and add this to the footer
position: absolute
This way the footer will be positioned accordingly to the body
It would be good if you set the bottom to 0px.
If you want to fix this kind of problem, you can inspect your element with Mozilla, and play your code there.
FOOTER TO STICK BOTTOM IF CONTENT IS SMALLER THAN THE VIEWPORT and BEHAVE NORMAL IN OTHER CASE
You'll need a tiny JS for that.
$(function () {
var bht = $('body').height();
var wht = $(window).height();
if (bht < wht) {
$('#footer').css("position", "absolute");
$('#footer').css("bottom", "10px");
}
});
Check this fiddle - http://jsfiddle.net/3N4L9/4/
FOOTER TO STICK TO BOTTOM IN ANY CASE
This will generate same output as required :
Like page 1 : http://jsfiddle.net/3N4L9/1/
Like page 2 : http://jsfiddle.net/3N4L9/2/
It'll keep footer on the bottom of page irrespective of content and scroll.
.fixedFooter{
width:100%;
position:fixed;
bottom:10px;
}
That should work
.footer-text {
background-color: rgba(0, 0, 0, 0.49);
bottom: 10px;
color: white;
left: 0;
margin-top: 10px;
position: absolute;
right: 0;
text-align: center;
z-index: 999;
}
Related
Design question here. How can I make the #main-wrapper slide over the #single-carousel on the following page: http://duijnisveld.wpengine.com/
Right now it moves up when scrolling, I need the carousel to stay put and make the main wrapper slide over it when scrolling down.
giving .header-foto-wrapper position: fixed and #main-wrapper position: relative gives unexpected behaviour for me, I'm clearly missing something important.
*note, in the url, the .header-foto-wrapper does not have the position fixed as it breaks the layout and it's a live site for the client to see.
Thanks!
You'll need to apply width. Things go a little wonky when a container calculates width once you pull it out of the content flow. A width:100% will fill the page width. You'll also want to move the content area down and apply a background color.
.header-foto-wrapper {
position: fixed;
width: 100%;
}
#main-wrapper {
position: relative;
top: 100%;
background: #fff;
}
By setting the position as absolute.
.wrapper {
position: absolute;
left: 100px;
top: 150px;
}
http://www.w3schools.com/cssref/pr_class_position.asp
How can I make the icon::before pseudo element not scroll. I want it to have a "fixed" position; not relative to the window, but to div.scrollable.icon
Here's the demo I'm talking about: http://codepen.io/anon/pen/VLWdEm
===UPDATE===
There's a problem here. Here's the new codepen: http://codepen.io/kiranm/pen/QbgxZV
How do I make icon::before "fixed" relative to div.scrollable.icon?
Ok, I understood your problem. Since we all tried the code with the preview expanded we didn't see that when we shrink the preview the div was fixed relative to the window.
So I came up with this, although I couldn't do it just with CSS, I had to add a little of jQuery and modify your HTML structure.
HTML
<div class="scrollable">
<div class="icon"></div>
text
</div>
CSS
.scrollable {
border: 1px solid tomato;
width: 200px;
height: 200px;
overflow: auto;
position: absolute;
}
.icon {
position: relative;
}
.icon::before {
content: 'An icon';
background-color: yellow;
padding: 2em;
}
And the jQuery
var $ = jQuery || $;
$(document).ready(function() {
$('.scrollable').on('scroll', function() {
var top = $('.scrollable').scrollTop() + $('.scrollable').offset().top;
$('.icon').css({'top': top + 'px'});
});
});
As you can see I added another CSS rule so I can manipulate it with jQuery, and with jQuery I took the value of the scroll in the container div and I add to it its value to the top of the window, and I assign that result to the top of the icon so it will be "fixed" to the div. Also I moved the icon div to be a child of scrollable so I can manipulate it separately.
Here's the pen http://codepen.io/anon/pen/QbgxzV
I hope it helps you.
Try like this: Demo
.icon::before {
content: 'An icon';
background-color: yellow;
padding: 2em;
position: fixed; / * changed position absolute to fixed */
}
I cant understand your requirement?
Position fixed is working for relative to window screen only. otherwise you set icon position:relative then give icon::before position absolute.
I'm working on a page that animates slides out of the screen. This is how I currently do it.
var previousOffset = ($(window).height())*-1;
previousOffset = previousOffset+'px'
$('.current').animate({
top: previousOffset,
}, 500, function(){...}
I was wondering, is there a cleaner way to do it, with pure css, without measuring the height of the of the screen. Currently, the item has position:absolute, but that is not a requierment.
To be clear currently the css of .current is:
.current{
top: -"height of screen";
position: absolute;
}
I would like to do it without "height of screen".
This may depend heavily on your other markup, but you could try setting the height of the .current element to 100% and just deal with percentages. This will implicitly handle the resizing of the window for you.
Note that you must set the html & body element to 100% for this to work.
CSS
html, body {
margin:0;
height:100%;
}
.current {
position:absolute;
height:100%;
width:100%;
}
JS
$('#nextButton').click(function(){
$('.current').animate({
top: '-100%'
}, 500, function(){
// do something
});
});
DEMO
http://jsfiddle.net/GoranMottram/BQdtm/
Specify the position as fixed then set top to the appropriate negative value.
.current{
position: fixed;
height: 10px;
top: -10px; /* This will need adjusted */
}
Working Example: http://jsfiddle.net/UH4p7/
I working on a page with a footer. The footer's positioning is like it should, but I have an problem when i resize the browser from bottom to top. For details, you can see the image below :
Here it's my css footer code :
.footer_page {
color: #fff;
text-align: center;
bottom: 30px;
width:100%;
position:absolute;
}
Someone have an suggestions ?
Thanks.
The bottom 30px signifies bottom of the window. Calculate the distance from top you need your footer to have and give
top:500px
A better way is to give a large div id="page" around your entire page with required height, say 1000 px, and then footer with bottom 30px.
#page{position:absolute;height:1000px}
#page #footer{position:absolute;bottom:30px}
If this seems too much or height of page is variable, let footer be part of flow of the document.In such cases it is better not to use absolute positioning.
You can also do this with some javascript magic.
What I am saying is, suppose total height of your page is 1000px. Put a wrapper around entire page with id page, give absolute positioning and height 1000px, then put footer in the end.
If you mean that the footer doesn't stay fixed to the bottom, try
.footer_page, .push {
clear: both;
color: #fff;
text-align: center;
bottom: 30px;
width:100%;
position:absolute;
}
so adding .push and clear:both.
I want to positioning a div element (popup) on the center of the screen via CSS. No problem with this.
The problem comes when i scroll the browser and then i click on the element that displays the popup, but this one will be displayed on the top of the page, instead of centering it on the rendered area (scrolled)
The popup must remain stocked to the page and let scrolling over it.
Does anyone know how to do it?
Thanks in advance
This is achievable in JavaScript. You should have the link that brings up the div element do this (jQuery):
var divTop = 75 + $(window).scrollTop(); // places the popup 75px from the top
$('.popup_inner').css({'top':divTop, 'display':block});
Position: fixed is also an option, but I don't believe it is supported by IE6, if that matters to you.
I believe what you want is position:fixed instead of position:absolute.
Taken from jqModal:
.popup{
position: fixed;
top: 17%;
left: 50%;
margin-left: -300px;
width: 600px;
background-color: #eeeeee;
color: #333333;
padding: 12px;
}