Jump to content

CSS image at bottom in div -> problem when use with scrollbar


Muiter
 Share

Recommended Posts

I have an image that is shown in different div's:divimageok.jpgWhen the div has an scrollbar, the div is fixed at one point:divimagenok.jpgAny suggestions to make the image scroll down when the user scrolls?CSS:

.footer_popup {float: right; width: 25px; position: absolute; right: 0; bottom: 0;}

Link to comment
Share on other sites

I wouldn't use positioning then. I would try and find an appropriate combination of margins and paddings using relative units (like %) to position it in the bottom right hand corner of the div.

Link to comment
Share on other sites

I wouldn't use positioning then. I would try and find an appropriate combination of margins and paddings using relative units (like %) to position it in the bottom right hand corner of the div.
I don't think there is any combination of those properties that will make it always in the bottom right corner. If it isn't taken out of the flow, it will scroll out of view when the div is scrolled up.I think the solution here is to wrap the scrolling div in a container with position: relative; and remove position: relative; from the scrolling div. Something like:
<div id='wrap'>   <div id='scrolling_div'>	  ....stuff.....	  <img id='footer_popup' src='image.jpg' alt='img' />   </div></div>

#wrap {   position: relative;}#scrolling_div {   /* If you have position: relative; here, remove it */}#footer_popup {   /* These styles will remain unchanged */}

Link to comment
Share on other sites

I think the solution here is to wrap the scrolling div in a container with position: relative; and remove position: relative; from the scrolling div. Something like:
:) Fantastic!(now the image is shown at the bottom of every popup, so when the user has not scrolled down the image is not visseble. Is there any wat to make it float at the bottom right so it stays there when the user scrolls?)
Link to comment
Share on other sites

:) Fantastic!(now the image is shown at the bottom of every popup, so when the user has not scrolled down the image is not visseble. Is there any wat to make it float at the bottom right so it stays there when the user scrolls?)
I would put the image as a background of #warp or #scrolling_div
#warp {background: url('image.jpg') no-repeat right bottom;}#scrolling_div {background: url('image.jpg') no-repeat right bottom fixed;}

Link to comment
Share on other sites

(now the image is shown at the bottom of every popup, so when the user has not scrolled down the image is not visseble. Is there any wat to make it float at the bottom right so it stays there when the user scrolls?)
Can you post your code? HTML and CSS? With the method I suggested, the image should always appear in the bottom right, no matter the position of the scrollbar.ckrudelux has a good point. Something I overlooked... :)If you don't already have a background image on the scrolling div, it may be easiest to put the image as the background of that div with fixed position, like ckrudelux showed you above.
Link to comment
Share on other sites

I would put the image as a background of #warp or #scrolling_div
No luck.This is the situation.I'm using this popup script.The content of the popup is loaded with:
<div id="popup_add_bestelling" class="popup_block"><iframe id="ifr" frameborder="0" scrolling="no" width="1000" height="470"></iframe></div>

The CSS of popup_block is (when I add the code you suggested in here it puts the image in my borders)

.popup_block{	display: none; /*--hidden by default--*/	background: #f4f4f4;	padding: 10px;	border: 2px solid #0065a5;	float: left;	font-family: Arial;	font-size: 12px;	position: fixed;	top: 50%; left: 50%;	z-index: 99999;	/*--CSS3 Box Shadows--*/	-webkit-box-shadow: 0px 0px 20px #000;	-moz-box-shadow: 0px 0px 20px #000;	box-shadow: 0px 0px 20px #000;	/*--CSS3 Rounded Corners--*/	-webkit-border-radius: 10px;	-moz-border-radius: 10px;	border-radius: 10px;}

Link to comment
Share on other sites

No luck.This is the situation.I'm using this popup script.The content of the popup is loaded with:
<div id="popup_add_bestelling" class="popup_block"><iframe id="ifr" frameborder="0" scrolling="no" width="1000" height="470"></iframe></div>

The CSS of popup_block is (when I add the code you suggested in here it puts the image in my borders)

.popup_block{	display: none; /*--hidden by default--*/	background: #f4f4f4;	padding: 10px;	border: 2px solid #0065a5;	float: left;	font-family: Arial;	font-size: 12px;	position: fixed;	top: 50%; left: 50%;	z-index: 99999;	/*--CSS3 Box Shadows--*/	-webkit-box-shadow: 0px 0px 20px #000;	-moz-box-shadow: 0px 0px 20px #000;	box-shadow: 0px 0px 20px #000;	/*--CSS3 Rounded Corners--*/	-webkit-border-radius: 10px;	-moz-border-radius: 10px;	border-radius: 10px;}

Background is applied on the padding area as well if you have fixed width you can set width position in pixels instead of a floating direction.
Link to comment
Share on other sites

Background is applied on the padding area as well if you have fixed width you can set width position in pixels instead of a floating direction.
I'm trying to change CSS as you suggested but it only changes but it only changes the border and won't add the image.knipselt.jpg
Link to comment
Share on other sites

I'm trying to change CSS as you suggested but it only changes but it only changes the border and won't add the image.knipselt.jpg
I suggest you test whats happen with small numbers so you will see where it goes not total sure if order matters if then using floats so then you set your px it could be in the wrong order.or put an extra div but without the padding inside.. if you get my point. Edited by ckrudelux
Link to comment
Share on other sites

I think I know why my code didn't work quite the way I expected it to. Your HTML isn't set up the way I imagined it to be. This is why it's helpful to post HTML in context (ie, with a little bit of important surrounding code, such as ancestors or siblings that may be affecting layout).Anyway, let's try the background suggestion.I think if you replace this:background: #f4f4f4;with:background: #f4f4f4 url('image.jpg') no-repeat right bottom fixed;it should work.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...