I have created a div resizable from two directions ie. East and West and facing following
Issues:
while stretching div component from left, the position of component is changing ie. reaching to top side of the specified container.
2.while stretching div component from right,i am able to stretch it to half of the specified container only but not the full container.
3.while repositioning the stretched div,the size of top and width are increasing inversely proportionally.
Requirement:
I want div component to resize from left and right in the same row with no increase in height or top.
Please suggest something!!
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.
I'm trying to place three divs side by side.
The first div has a fixed width and needs to be against the left side of the screen (ie: float:left;).
The next div also has a fixed width and needs to be against the right side of the screen (ie: float:right;).
And the last div needs to fill the space in between them and adjust based on the width of the browser window.
When a certain minimum width is reached for this last div in the middle I need it to stop getting smaller and have scroll bars appear in the browser.
Is this possible to achieve? If so, how?
try this link. basically, there are 3 divs, 2 of them which placed on the side are fixed width absolute position div while the center is a normal div with margin.
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.
To summarize, I'm trying to get a "resizable page" both in the height and in the width of the window. I've two fixed blocs too. One on the top of the page and an other on the left (like the Flow app for example).
As you can see there, I'm trying to make the yellow part of the screen resizable (css only) but I get some trouble with the height part. The scrolling zone is always counting the height of the top bloc (the red one).
Is there a way to make it javascript free?
The div with id="container" has a height of 100%. This means 100% of the containing id='wrapper' div. One possible solution is to make the heights:
red part: 10% of the total height
blue+yellow (i.e. the "wrapper" div): 90% height
This would mean the "container" wrapper should nicely fill up those 90%.
Edit: only drawback would be that the red part is no longer a fixed hight pixel-wise.