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
Related
#imgseasonal{
width:120px;
height:120px;
}
.colseasonalfirst{
width:215px;
float:left;
margin-left:0px;
text-align:center;
}
.colseasonal{
text-align:center;
width:215px;
float:left;
margin-left:15px;
}
Screenshot one:http://imgur.com/y97DyUm
Screenshot two:http://imgur.com/HWWbhXH
Im having a difficult time having these columns stay in an aligned row on certain window sizes. The columns dont go all the way to the left on the second row. When I shrink them more, the problem gets worse. Am I missing a key element of css to help remedy this alignment issue?
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.
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 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.