I'm having some troubles with keyframe animation using CSS3. The position of the image being animated changes based on the window/screen size. I've tried to find a solution to this problem but I'm lost. I tried to specify a boundary so the animation only plays inside that, but it did not work.
See here, and try resizing the window. I know this has something to do with the position:absolute. My ultimate goal was to have the space background move left to right but still be dead in center if that makes sense.
Thanks for your help.
The problem is that the margin-left and margin-right properties are being set to auto, which adjusts the left margin of tdr-main, while space-bg's animation modifies the absolute left position. When the window is resized to a smaller size, the left-margin on tdr-main shrinks down to 45px, but the left position on the background image still moves betweens an absolute 342px and 450px.
If you embed space-bg inside the same container that has the auto margins on it,
<div id="tdr-main">
<div id="space-bg">
</div>
[...]
</div>
then both will stay centered, and the position on space-bg will be relative to the centered container div. Just use z-index with absolute or relative positioning to keep things stacked correctly.
Related
Is it possible to set the z-index of the padding of a specific div?
I'm using particle.js as an interactive background that changes with mouse position. However, this only works when the canvas is at the top of the stack. I am using a div container for the main content with a padding of 10%.
I'd like this padding to be sent backwards on the stack so that the mouse can interact with the background.
So I managed to solve this by removing the padding and margins of the div and using relative position with the same spacings as the margin previously. I then set the canvas z-index to 1 with the container div z-index to 2.
I am trying to position a logo just above the nav overlaying a responsive carousel. The trouble is, depending on the window size, the logo doesn't stay anchored to the nav. I don't know how to even approach this problem. Here is the project I am currently working on. Is there even a way to accomplish this?
The problem is that your logo (I assume you meant the transparent white round logo) is absolute positioned to the top of the browser, AND you're trying to make its position move with the resizing carousel. Try moving the logo inside the #slider1_container and absolute position, bottom:0 (instead of top:0)
This will force it to stick to the bottom of the carousel, regardless of the height of the slider, so it will appear to move with it.
Then, you've got the issue of resizing the logo to shrink with the window as well. If you set the logo's width to a percentage, and its height to auto, with a max-width set to whatever the greatest size you want to allow it to become, then that should manage that.
We have a DIV that is centered vertically in its parent and shows different text at different times, meaning its height is not fixed.
Is it possible to use CSS only to position this DIV just off the screen, at the top, then slide it down with animation?
We tried various combinations of translateY and webkit-transform, but these fail because translateY is based on the element's height, not the parent's, when using percentages. Using pixels doesn't work since the DIV's height varies.
A JavaScript solution is obviously possible, but is there a way to do this with CSS only?
http://pastebin.com/pVmXyfxi
Not 100% sure if this is what you mean, but you can move the div off the screen with top:-1000px and then change the top: value on hover (or click or whatnot). The animation part is defined in the div css settings and it runs when one of the settings is changed.
I have a div that is positioned:absolute, this div extends outside the bounds of my site wrapper as it just contains a background image for a slider and doesn't need to be seen all the time. The problem is I cannot work out how to stop this div triggering the scrollbar. I have tried different combinations of overflow and position and cannot work it out.
If you inspect the element with firebug, just place it over the shadow behind the slider and you will see the div in question. You notice the scrollbar kicks in as soon as the browser bounds touches it.
View link
Can anyone let me know how to stop the scrollbar appearing for the shadow div?
Cheers
Nik
It is the size of the DIV. When I inspect it using Chrome, the CSS shows that the container DIV was set to 520px width and the problematic DIV was set to 733px, so it actually exceeds the 980px width center area. Unless you want the shadow to disappear, I suggest moving it a bit to the left and make the div left to it smaller.
You can use the CSS overflow-x:hidden on the body element.
Other more complicated way that comes to mind is using jQuery to detect the size of the window and resize the problematic div according to the window's size.
Firstly, thanks to those that commented.
I have come up with a solution that allows me to keep the layout the same while still adhering to the document width. What I did was create a #wrap2 inside the main wrapper which has a width of 100% (full width of browser window).
#wrap2 {background: url(../css_img/slider-bg.png) no-repeat center 317px; }
The trick to this was making sure the image position was set to center. This means the image would also remain relative to the content when resizing the browser. The way I made the shadow line up behind the slider was to add blank pixels to the left, so the image ended up being about 1200px wide, this pushed shadow part right. Because it's all blank pixels it only added about 1kb. If someone thinks there is a better solution let me know.
Recently I'm playing with custom jquery ui widget which is positioned "center bottom" of specified position. (Just imagine that google map marker's anchor..)
First, I have main widget and a DIV which has relative positioning with left -50%. Yes, it was shifted to left by its half width. But for height, it's not working what I thought.
Please checkout my example at http://jsfiddle.net/Reiot/UUADc/ and see what's wrong with that. Should I not use vertical negative % and always specify its pixel height?
-50% is going to be 50% of the height of a parent object, in this case 200px. So your vertical is getting offset 100px. Since you know the width of your widget (73px), just use the specific offset, -36px