Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
Imagine div1 and div2. div1 has 100% width and is 800px high. div2 is fixed to top of browser, also has 100% width and is maybe 3000px high. I am trying to land so you see div1 but, when you scroll down, div1 slides up out of the way, revealing div2 and all it's content. It seems easy but, I can't figure it out.
div1 {
width:100%;
height: 800px;
position: ???;
z-index:100;
background-color: white;
}
div2 {
width:100%
height: 3000px;
position: fixed;
background-color: black;
}
First off, your sample code has some flaws such as wrong CSS selectors (unless you created custom tags named "div1" etc.), a missing ending ; in div2 CSS rule (width:100%). You also need to position your fixed div at left/top 0 to position it behind the moving div.
To make your moving div move, add a bottom margin the size as its height and it will scroll out of sight/viewport.
This technique is sometimes called parallax scrolling and here is a post showing more how/what one can do
.div1 {
width:100%;
height: 800px;
position: relative;
z-index:100;
background-color: white;
margin-bottom: 800px;
}
.div2 {
top: 0;
left:0;
width:100%;
height: 3000px;
position: fixed;
background-color: black;
}
<div class="div1"></div>
<div class="div2"></div>
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
Why these two lines' width are different? They are both supposed to 1px;
The only difference is they have different left number, but why this cause the width change?
By the way, my chrome version is 84.0.4147.105 (win10), and in firefox it looks correct.
body {
margin: 0;
padding: 0
}
.demo {
width: 500px;
height: 500px;
position: relative;
background-color: yellow;
}
.line, .line2 {
left: 300px;
position: absolute;
width: 1px;
background-color: red;
height: 500px;
}
.line2 {
left: 402px;
}
<div class="demo">
<div class="line"></div>
<div class="line2"></div>
</div>
I found because I zoomed the chrome to 125% then it cause the problem
by the way, I tried zoom to 125% in Firefox and it's still shows correct.
thanks everyone.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 7 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Improve this question
I currently have a div that is displaying a chart. In my HTML page, I have given it the ID of "main". In my CSS, I am trying to bring the chart a bit more up in the page, however, have had issues. I currently have a border, and am trying to bring the chart up to the border. In other words, I won't want any padding/space between the div and the top of the border. This is how it looks like right now:
And here is how my CSS code looks like right now:
#main {
position:relative;
width:95%;
left:3%;
border: 3px solid green;
padding-top: 0px;
}
Any help would be appreciated. Thanks!
Try applying negative marging or negative top to your chart container...
Ex:
#main {
position:relative;
width:95%;
left:3%;
border: 3px solid green;
padding-top: 0px;
top:-20px
}
or
#main {
position:relative;
width:95%;
left:3%;
border: 3px solid green;
padding-top: 0px;
margin-top:-20px;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
As mentioned in the title, https://onlycoin.com/ has a smooth mouse scroll effect of the cards getting animated when we scroll.
I want to achieve something similar to that. I have made the webpage. Instead of the cards, I have mobile phones that will animate in that .
Can anyone help me on how I should proceed to do it ?
I have already done the HTML coding on the page and I am really confused with the jquery.animate(); function.
Therefore, the only reference site i know is the one I posted above.
I am a novice in jquery.
Thanks for your help.
It's pretty hard to provide you with a complete explanation, but I put this together to get you started:
http://jsfiddle.net/Ms7gw/
HTML
<div id="container">
<div class="box" id="right"></div>
<div class="box" id="center"></div>
<div class="box" id="left"></div>
</div>
CSS
#container {height: 1000px; width: 1000px; background-color: #000;}
.box {width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; background-color: #ff0000;}
#right {background-color: #aa0000;}
#left {background-color: #aa0000;}
JS
var lastScrollTop = 0;
var leftBox = $('#left').position();
var rightBox = $('#right').position();
$(window).scroll(function(event){
var st = $(this).scrollTop();
$('#right').css({left: rightBox.left + st});
$('#left').css({left: leftBox.left - st});
lastScrollTop = st;
});
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
First of all, sorry for this dumb question. I am very bad at html.
i have this page. http://www.places4two.de/ If you resize the window, the ads div which is on the right side is overlapping the main container, what i want is to make this ads div relative to main container and if you resize, it should stop when it hits the main container. how can i do this.
this is what i tried:
position: relative
and
position: fixed
but they are not helping.
The width of your adsense is 160px, and you can set for the main container width as,
width: calc(100% - 160px);
here is the fiddle:
http://jsfiddle.net/jzwjP/2/
would be its prototype, the adsense width remains constant 160px, while the big container width will be resizable depending on your browser, will be calculated by browser width minus adsense width.
I would probably put the main content container and the advertisement in the same container. We'll call this container "wrapper". The width of #wrapper should equal to the width of the main content container plus the width of the ad, plus the margin between the two, plus the borders. It can be centered within the body using left and right margins of "auto".
Now inside the "wrapper" you can either float the main content container left and the ad container right, or you can use absolute positioning relative to #wrapper:
#wrapper {
width: 1310px;
margin: 0 auto;
position: relative;
}
#main-content {
width: 1100px;
position: absolute;
left: 0;
}
#ad {
width: 170px;
position: absolute;
right: 0;
}
Hope that helps.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 8 years ago.
Improve this question
Following on from another SO question.
Is it possible to expand the div, left and right instead of the answers on the other SO question which only expand to the right and down...
cheers
Of course it is.
Structure
You need a parent container set to position: relative; and your actual div set to position: absolute;
This way you can modify position of your div without any worry. This should work as a starting point. You can see the child div being shifted top and left compared to the parent.
<style>
.parent {
position: relative;
width: 200px;
height: 200px;
background: yellow;
margin: 40;
}
.child {
position: absolute;
top: -10px;
left: -10px;
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="parent">
<div class="child">
</div>
</div>
Expansion
so for the actual expansion, you would have to animate / change the left / top position together with width and height of the box.
For every 1px you shift your box left, you have to increase its width by 2px! to get an even expansion.
$('.child').animate({'left' : '-=10px', 'width' : '+=20px'});