I have a problem with Skrollr. I have a div (grey) changing its position from left to right when scrolling down. Inside the div (yellow), there's another div. I want it to stay at the same height as long as the parent div is still changing its position. I tried to do this with changing the margin-top, just like this:
<div id="grey" data-100="right:100%;" data-700="right:50%;">
<div id="yellow" data-100="margin-top:200px;" data-700="margin-top:800px;"</div></div>
And that's what happens.
Everything would be okay, but the yellow div is flattering up and down while moving right. Is there any way to solve this without using 'position:fixed'? Thanks for help!
EDIT: On iPad it works, by the way.
The browser moves the yellow div up (with everything else, because it's scrolling) and slightly after that the margin-top animation moves it down again. The only way to get perfect results is with fixed.
But you can make it slightly better by disabling smooth scrolling for the yellow div. You will still see it jumping when scrolling very fast.
<div id="yellow" data-smooth-scrolling="off" data-100="margin-top:200px;" data-700="margin-top:800px;"</div>
Also I suggest using CSS transforms instead of margin.
<div id="yellow" data-smooth-scrolling="off" data-100="transform:translate(0, 200px);" data-700="transform:translate(0, 800px);"</div>
Related
I have a header with an image which should be fixed while scrolling. Underneath I have a container, which should always have the same distance to the header. So if I resize my window horizontal, the image resizes and therefor the content changes the position.
Example:
I set the wrapper to position:fixed; and the container to position:relative;. If you resize the window, it works perfect.. the container stays in the same distance to the picture.. BUT.. I can't scroll anymore and therefore I can't see the content anymore. :-(
I have no idea how to use JS, so maybe someone could give me a hint
Live Link
Any element that's fixed, has all of its children fixed as well. So anything in your wrapper will be locked, which is why you aren't able to scroll. If you remove fixed from the wrapper element, then your nav is still fixed and the body scrolls properly. From there, a little trick I like to use is something like this...
<figure class="image_container" style="background:url(files/Header/Haus_Sommer.jpg) no-repeat bottom center fixed;background-size:cover;">
<img src="files/Header/Haus_Sommer.jpg" width="1460" height="1000" alt="" style="opacity: 0;">
</figure>
That way, you can use background-attachment:fixed for the header image, and still get the scaling from the image tag itself, since it's just got the opacity set to 0 but is still present.
I'm new here so forgive if anything sound very noobish.
I'm busy making a personal website and have two divs inside a wrapper, a content div and a sidepane div. their height is set on 99% and they overflow on auto. I want the page to not scroll (unless they make the screen smaller) but the divs must scroll.
The Problem: I want to have the bottom text of the divs to fade away so that when you scroll down the div it brings the text to normal. I could use a gradient image or just CSS if someone could lead me in the right direction. I'm struggling with this cause of the overflow. I want to know how one could keep the gradient at an absolute position at the bottom of the div, but now its not really at the bottom of the div if you get what I'm saying? Because the div has overflow on. I want it at the position where the div ends on the screen, but not where the text ends. I tried putting my code in
Here's a pic
If you check the right div, I want the bottom to be faded and as I scroll the gradient stays there at the bottom. (which is not actually the bottom of the div) - also need to be able to resize page and it stays in same position.
The key is background-position: fixed;
I have created a little fiddle for you to see what i mean: Click me
I just hope i understood your problem correctly without any code and just a screenshot ;)
Also for CSS gradients see here
I am trying to align some divs a certain way. To help debug what's happening, I decided to add borders to the divs to research how they were getting positioned. But the border looks pretty strange.
Here's the html:
Here's the CSS:
And here's the result:
What am I doing wrong? Thanks!
It isn't funny (!!). The div appears to have 0 height, hence the top and bottom borders are touching each other, creating a funny (??) appearance.
The div appears to contain content but the content is probably floated or absolutely positioned, therefore it does not stretch the funny (!?) div vertically.
demo here
Height is one way to do it, but its a bit hackey, another is to float the div that is surrounding other floated divs:
http://jsfiddle.net/Ewd4x/2/
I have code like this:
<div id="container">
<div id="has-100-percent-height">
This div is positioned absolutely and display is none.
Overflow auto, too. There are many of these divs within "container"
</div>
</div>
<div id="the-div-below">
stuff
</div>
When a user clicks a certain link, the "100 percent height" div is to slide down using. What's been happening is that it does slide down, but it doesn't push the div-below down. You can see the content merely display above "the-div-below" and after it slides down, it quickly disappears.
Anyone know what could be going on? This is in firefox 4. I haven't tested other browsers
Thanks for the help!
Is the CSS for your HTML already set in stone? As others have said an absolutely positioned element is outside of normal flow therefore cannot affect the position of any other element. If you can remove the position:absolute from the #inner then the solution is very simple (and just normal browser re-flowing) - see this demo.
However if you need to keep the absolute positioning you will have to push #below down manually, i.e. JavaScript - see this demo.
Hope it helps.
The reason "the-div-below" is not pushed down is that things that are absolutely positioned don't affect layout of anything else on the page. That's the whole point of absolute positioning.
So to make things work as you want you need to position your "100 percent height" div either statically or relatively.
The remaining question is how to achieve the layout you want, since presumably there's a reason that you were using absolute positioning?
You could add a padding/margin top to the #the-div-below that is equal with the 100% height element.
I am just trying to get the image box to slide up next to the BBD logo and I can't seem to figure it out.
A bit new to css and floats, etc. Can anyone offer a suggestion???
I'm working off of a template, so didn't set up the css myself.
Thanks!
link text
You will need to float both the div with the bbd logo and the div.slideshowgallery. When both siblings are floated (left for example), they will be next to each other (if the width of the containing block permits it).
A suggestion? I can give you that.
#sliderWrapper > div { float: left; }
Add this CSS and your divs will be side by side. Rounded corners and the background will break. To solve the background, add <div class="clear"></div> to the bottom of the sliderWrapper div. The rest... no idea.
always remember to work with a wrap container with a specific width otherwise is very difficult, to make this with a elastic design.
and then just float both divs... ideally on the same side and spearate them with their own margins.