is it possible to see all the content in the top div before the second div scrolls over.
Check the fiddle
http://jsfiddle.net/KyP8L/91/
many thanks for looking.
.div-top{
height:auto;
min-height:100%;
width:100%;
position:fixed;
top:0;
left:0;
background:#ff0;
z-index:500;
}
.div-bottom {
width:100%;
background:#0ff;
margin-top:100%;
z-index:600;
position:relative;
}
What you want is though not possible with css, you can do it with jquery : http://jsfiddle.net/KyP8L/92/
Just check the scroll, if it reaches top, then assign the z-index(higher) to the .div-bottom
$(window).on('scroll',function(){
$(window).scrollTop() ;
;
if($(window).scrollTop()> parseInt($('.div-bottom').css('margin-top')))
{
$('.div-bottom').css('z-index','600');
}else{
$('.div-bottom').css('z-index','0');
}
console.log('top'+$('.div-bottom').css('margin-top'))
console.log('scroll'+$(window).scrollTop())
});
Edit:
As the OP says in comments what he wants is, to be able to scroll down
the top div and then I want the bottom div to scroll over the top div
here is the fiddle http://jsfiddle.net/KyP8L/108/
I don't actually understand what you mean by scrolls over,
but setting.div-top{ height:100%} will let you entirely visualize div-top befor getting to the second div.
And still setting .div-top to fixed wouldn't have sense.
Related
I have one div; header, and another called headerimg containing an image. I'm trying to make the header image stick to the bottom of the header (horizontal line) when resizing the page. Here's my code:
.header{
float:right;
width:93%;
height:100px;
padding-right:0px;
background-image:url('img/barhorizontal.gif');
background-repeat:repeat-x;
background-position:bottom;
postion:relative;
}
.headerimg{
bottom:0;
postion:absolute;
}
.headerimg img{
width:45%;
height:auto;
}
But it doesn't work. Here's my website: Click
Any help?
You misspelled position.
you have: postion
change to: position
How to spot things like this? Open developer tools in your browser. In Chrome, at least, it shows a little yellow triangle next to it and has that line crossed out. You see the error "Unknown property name"
my problem is about positioning a div. i have a div with dynamic height, sometimes it is 600px and sometimes it's 300 and so on, let's call that div, div A. Now i want to put another div inside div A and want to position it always on the bottom right, let's call this div B.
I know one way with positioning div B relative and do stuff with bottom:xy but in this case it isn't working, because my div A changes dynamically it's height.
My question is, is this possible? Do i need Javascript for that?
You can do it by using absolute position
<div class="d1">
<div class="d2"></div>
</div>
.d1{
position:relative;
height:350px; width:150px;
background-color:grey
}
.d2{
position:absolute;
bottom:0; right:0;
background-color:red;
height:60px; width:80px;
}
Demo here http://jsfiddle.net/aMdrr/
You can change the d1 div height to test the effect
position:absolute;
bottom:0;
width:100%;
It's possible and i just made a simple example for you :
http://jsfiddle.net/ujf9D/
NOTE: I use a js script try to manipulate your dynamic width/height situations.
I have a modal window popping up, which I want to center relative to the reader's position on the page. The best way to achieve this seems to be with the position fixed/top 50% fix:
.fixed {
position:fixed;
width:100px;
height:100px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
}
So far so good, the modal pops up in precise center. See jsfiddle here:
http://jsfiddle.net/cbqN2/
But I want my users to be able to scroll the modal if the content is too long for their screens:
http://jsfiddle.net/xwhMa/1
Any way to achieve this, by nesting divs with different positions, or JQuery as a last resort?
I'm not quite sure if this is what you're asking, but try this:
ul li {font-size:23px}
.fixed {
width:200px;
height:200px;
background:red;
position:fixed;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
**overflow-y:scroll**
}
Would this not work?
http://jsfiddle.net/demchak_alex/cbqN2/3/
having your modal have a container that holds the content and clips it at a fixed height? then the user can scroll in the modal, instead of worrying about a jQuery solution to scroll the outside the modal until it hits the bottom, then stick to the bottom, etc. etc.
It's just a peculiarity of position: fixed :) which is .. well, to always stay fixed on the screen. If you want it to appear in the center but move when a user scrolls the page simply use position: absolute; not fixed. Like so: http://jsfiddle.net/skip405/cbqN2/2/
Can someone help me out with some css image positioning?
I am trying to make a column where the top and bottom are separate images. I am
doing this so I will have a nice curve but when the images are placed in, the right column
goes underneath the left div instead of floating right. I have tried absolute positioning but seems to do nothing. Any help will be much appreciated, thanks.
CSS:
#column-top{
width:735px;
height:40px;
float:left;
background-image:url(images/opactop.png);
}
#column_left_content{
width:735px;
min-height:500px;
margin-right:0px;
float:left;
background-image:url(images/opaccontent.png);
background-repeat:repeat-y;
}
#column_bottom{
width:735px;
height:40px;
float:left;
background-image:url(images/opacbottom.png);
}
#column_right{
width:160px;
height:900px;
float:right;
background-image:url(images/opac.png);
background-repeat:repeat-y;
}
Here is my fiddle for you. You don't need to float the top and bottom. left float the two middle ones and place them inside a container div. jsfiddle
I have the following CSS which positions a div at the bottom of the page.
Q: How can I stop content flowing underneath it?
#footer {
position:fixed;
bottom:0;
background:url(../images/bg-footer.jpg) top;
z-index:200;
height:34px;
width:100%;
line-height:34px;
padding:0;
font-size:11px;
color:#fff;
}
I can't add padding to the body or anything because I have a fullscreen background image in place as per this tutorial:
http://css-tricks.com/how-to-resizeable-background-image/
try the sticky footer
Have you tried using: position:absolute; instead?
If you want to keep the content above your footer you should start by removing the positive z-index from it.
If you have the footer as the final div of the page (perhaps wrapped in a full page div) then try setting the clear property to both in your css, eg:
clear: both;
Which should prevent any other divs from falling below the footer.