I have what seemed like a simple issue but cant quite figure this one out. I am using bootstrap version 3 to create my base layout. I have a footer that needed to be at the bottom of the page so i made it position: absolute; bottom: 0; and worked fine if I zoom out. When the content start getting lengthy it creates the vertical scroll bar and when scrolling the DIV floats around instead of staying at the bottom.
I tried giving the container a position: relative; but dosent seem to do anything. Would anyone have any ideas?
Heres an example of my layout, if you resize the preview section to force the vertical scroll bar you will see that when you scroll the DIV floats around instead of staying in place.
https://jsfiddle.net/DTcHh/10301/
try with fixed
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
js fiddle example
non-fixed, see the below:
your problem is (from what I gather) the footer is floating dependent on the content and and you want it to stay put where you call it.
.footerElement {
// base styles all styles
display: inline-block; // add this, does as you imagine
}
"Displays an element as an inline-level block container. The inside of
this block is formatted as block-level box, and the element itself is
formatted as an inline-level box" -W3schools
scrollbar, see the below:
As for the element that has a scrollbar resolving.
.elementwithScrollbar {
// base styles all styles
overflow:hidden; // or use overflow-y:hidden; or x
}
fixed, see the below:
If you want it to be fixed; adding position: fixed; and the value coordinates should all you have to do there. (ie. position:fixed; and where you want it)
"Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and don't move it
when scrolled. When printing, position it at that fixed position on
every page." -MDN
Using fixed only anchors it to the bottom of the screen regardless of which part of the page you are viewing. I think you want to have the footer at the bottom of the page rather than constantly sitting at the bottom of the screen.
To fix, amend your spelling mistake here:
.contrainer-fluid { <-- should be container
position: relative;
}
Related
I am creating a page I need help with, I have the HTML and CSS ready, all I want is to make the element come to the top after I scroll down a bit, and there have to be more than 5 screens than I need to come to top as I keep scrolling
I can't find a solution so need help
Here's a link of what I need, this is exactly what I want
https://www.blackrock.com/corporate#intro
CSS
The CSS property you need is position: sticky means that this element would be in it's respective relative position until you scroll down enough and it reached the top (if you set its top: 0) and would then "stick" to the top as if it instantly changed it's position to position: fixed. Enjoy
The following code could help you achieve your desired behavior:
.sticky-container {
position: sticky;
top: 0;
left: 0;
}
If it is a container that takes up the entire width then also add width: 100% and a certain fixed height in pixels to see the container.
If you want to have the element stay in a certain position in default when the user just entered the website you probably would need position: fixed instead of sticky. You could take a look at a similar solution for position fixed here with a demo
I create a big div (div1 in the Fig 1.1) and set it to position: absolute. This div is the content container of the page, and inside this div are all the other elements. My reason to do absolute this div is for remove the bounce on scroll in browser:
Remove bounce on scroll in browser solution
My problem, is if I have other absolute divs inside the big one. In the Fig 1.1 can see the div2 with position:absolute, and if the div1 is scrolling, the div2 conduct is like a fixed element. Div2 is only an example, I have a lot of absolute elements like Popovers that to be relative is not an option.
How can I say to div2 (in the Fig 1.1 example) that when div1 scrolls moves along with page scrolling?
Code example
html, body {
height: 100%;
overflow: hidden;
}
.div1 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
}
div2{
position: absolute;
}
Image Example (Fig 1.1)
Correct way
I know that exist a lot of related answers, but all of them is quite different to my question.
Related questions:
Absolute positioning inside absolute position
CSS: Absolute Element inside Absolute Element
I have other solution. To fix iPad overscroll I wrote a small script, that fixes "scroll bouncing" / "overscroll"
https://github.com/aiboy/PerfectScrollFix
First of all, you don't need to change layout drastically and use absolute div's. Second, scroll is remains to be "native".
There is two problems thou:
1) For now only horizontal overscroll fix is supported
2) Your content ( that will be scrolled ) should be wrapped in a single element (wrapper)
You can test this script on iPad: http://jsbin.com/usomob/4
Source code of Example http://jsbin.com/usomob/4/edit
I am soo confused right now. Coding really isn't my thing, so I believe that I messed up majorly somewhere which creates this problem:
I'm trying to make a sticky footer. The footer does stick--but only if I make my main content DIV (the white centered box) relative. I need the height of that DIV to stretch with the content (which will contain a PHP script that'll pull from my Wordpress blog--so naturally, I need it to adjust as necessary). If the DIV stretches longer than 500px, there's a weird two-scrollbars things going on, & I hate that. I like the relative DIV, but I would love to rid of all the extra scroll space, as well as making sure it stetches/regresses with content & the footer stays where it is.
I hope that's not too confusing. I'd just like someone to look over my source code & see where I'm going wrong. Thank you for any help.
http://www.missa.me/practice3.php
nice website :)
You need to make the footer fixed,
use this CSS
#footer {
position: fixed;
height: 80px;
clear: both;
background-color: #fff;
bottom: 0;
left: 0;
right: 0;
}
and take overflow: auto; off of #main
what this does is tell the footer to stay 'fixed' to the bottom of your viewport, so it will always stick to the bottom of your screen.. and taking overflow:auto; off will give your #main the natural ability to expand it's height depending on the content inside it.
http://jsfiddle.net/9fCfE/1/
.fixed {
width: inherit;
height: 95%;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
}
footer {
width: 100%;
}
Fixed div must be always on top and shouldn't cover the footer when I scroll.
100% height or from top to footer.
How can I do it?
The simplest answer is to drop the z-index of the fixed region so that when it would otherwise cover the footer, it instead moves behind it. You'll need to make sure the footer is position: relative;.
Fiddle example
If, instead, you want the two to never intersect, you're in for a harder challenge.
The best way to do it would to be giving your fixed element a fixed height, giving your footer a fixed height, and making sure that the fixed element height + the footer height <= the screen height.
Fiddle example
Those are really your only options - you essentially have to design around it. To the best of my knowledge, there is no way to dynamically shrink the fixed element when it intersects with other elements on the page (ignoring the rest of the elements on the page is the purpose of position: fixed, after all).
I've cobbled together a quick and dirty implementation of what you asked using jQuery, offset(), scrollTop() and height()
Here's the jsfiddle example.
Is this what you wanted? If so - why? :)
I don't see any visual difference between this method, and the one where the fixed element goes under the footer.
I've having an issue with the background images i have embedded into my carousel. click here I've noticed when i click from one slide to another the background image on my site moves out of place. The margin-top for my carousel is current set to margin-top:-275px; and the background image is set to margin-top:-64px; I am slight concerned about these settings.
Does anyone have a solution to this problem?
In order to activate the slides click the thin red tab under the nav bar
I guess that's because you have
.rslides li {
top:0;
}
It does nothing with position:relative (and the current slide has it), but it moves down the slide with position:absolute (hidden slides).
When you click a tab, there's a moment in which the new one is fading in, but it doesn't have position:relative yet. Then, in that moment, the new slide isn't where you want.
So remove that line.
The jumping is occurring because you are switching the LI items from position: absolute; to position: relative; at the end of the animation toggle. This can be avoided by removing your CSS rule:
.rslides li { left: 0; top: 0; }
Specifying width and height is fine, but as soon as you specify left and top - then switch from relative to absolute positioning, you get that jump you're seeing.
As for the positioning of each panel - it has to do with the way you are laying out your boxes. The sizes you are specifying are not large enough for the content you are providing. For instance: <div id="header"> is 37px tall, which is the appropriate size for the social media buttons, but you also have it as the container for the #nav-menu UL - which is another 102px tall.
It appears that in order to correct this and make things overlap, you are using negative margins - which is getting you all thrown off.
My suggestion would be to use a standardized layout system, such as any of the following:
http://cssgrid.net/
http://960.gs/
http://www.1kbgrid.com/
http://foundation.zurb.com/docs/grid.php
And use it to perform your layout tasks, rather than trying to self-craft overlapping layers with mixed absolute/relative positioning.
Alternatively, if you're going to go the overlapping layers route (again, not suggested), really commit to it. Position things absolutely throughout the layout.
In order to accomplish this, you might consider CSS rules like:
#header {
display: block;
position: absolute;
left: 50%; top: 0px;
height: 139px; /* Your Social media links height + nav buttons height */
width: 1018px; /* Your current width */
margin-left: -509px; /* Half the width - centers on page */
}
Again - this is MUCH more work, MUCH harder to maintain and MUCH less elegant - but will yield you at least a consistent spacing / sizing.