I am getting an error when trying to send a div to the very end of my site.
I am using a general height:100% and the div then moves to the end of the visible screen, but when I scrolls down to the end of the site, the div remain in the same position.
I want to add the div to the end, but for some reason I couln't do it.
Look at the pic.
My code: http://www.securebitcr.com/test/site2.php
I appreciate any kind of help with it.
Thanks,
Your #footer_dv has position: absolute but you want it to have position: fixed. An absolute position is relative to the parent so an absolutely positioned element will move and scroll with its parent; a fixed position is relative to the browser viewport so it won't move.
just remove the position:absolute all together and fix your height style of your body, you have 100%px; make it 100%; and your footer should just float to the bottom.
Related
I am developing a store for a friend and I want to make the "ADD TO CART'S DIV" fixed when the users scrolls after it. As I am far from being a CSS expert I am facing problems with it.
I tried to use JS to add "position: fixed" to the div, but I cant do that because the div has a relative position and changing it do fixed mess up with all the div's elements
this is the link
and this is the div I want to make fixed (the div id is rightcol):
I would also want to make the div stop right before footer
Thanks in advance
Use this property to make div sticky on scroll
position: -webkit-sticky;
position: sticky;
top: 0;
the header is your website is also sticky. you can use the same properties it works
You can use position sticky. sticky element works as fixed element with respect to its parent element. It will serve as fixed in the space provided by its parent.
So in order for your project. You need to restructure your html in such a way that sticky element should get enough space to behave as fixed element in that region.
I'm creating a site where I have a a logo on the page that is static positioned as normal. However I have a jQuery plugin that converts it to a fixed positioned element as it hits the top of the screen when you scroll so that it sticks in place on top of a fixed position navigation bar. The problem I have is that while the logo is still static as it hasn't hit the top yet but is overlapping the navigation bar, it appears underneath the navigation bar.I have used the z-index on the logo to try and place it on top but I'm finding that this doesn't make a difference when used across static and fixed positioned elements at the same time.
Does anyone have a solution?
Edit: I thought I should mention that I have thought of a solution myself, to have the logo always fixed positioned and to adjust its position with javascript but I would like to fix this in CSS if possible.
Just add position: relative; to the styling for #logo. z-index only works on positioned elements. Tested it in jsFiddle and it seems to work.
Happy coding!
I am using responsive framework 1140px. In the mobile version I have to fix the position of a logo but not have it overlap the content on scroll. Basically fix the position but don't fix the image on scroll, can this be achieved?
You want to use position:absolute
position:fixed fixes the element to the screen, so it will not move when you scroll (it's fixed to the window).
position:absolute fixes the element based on the closest ancestor that is not position:static, so it will move when you scroll the page (it's fixed to the page).
It appears that you want is position: absolute, the difference being that absolute images do not move while scrolling.
http://www.impressivewebs.com/absolute-position-css/
It's worth taking a look at this link in order to see the differences between relative, absolute, and fixed positioning:
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
I have placed an AP Div on my page that holds an iframe. I used position: relative so that the AP Div would not move with the image behind it. Once I added the AP Div with the css property Position: Relative it stays exactly where I want it , however it pushed the image further down. i need the main image to be aligned to top. If you look at the other pages you will see how they are all aligned at top. Is there a solution for this? I am not a css expert so I would be very appreciative of any help given. thanks!
my link is:
http://www.mylittleovertures.com/continue.html
thanks!
The basic problem is that div and iframe are block elements on the same level. Setting the iframe positioning to relative doesn't help. Instead, you should wrap image and iframe into a container DIV, set this DIV to position:relative and then absolutely position the iframe on that DIV. You could even drop the extra img tag and set the image as the background of the container DIV. You could also get of the <center> by setting the container DIV's margin to 0 auto
Here's an example: http://jsfiddle.net/99wCg/3/
I have a fiddle here. I set float left & width(20%, 80%) for the li's. It looks good now.
For some reason(actually, its an another story!) i want the set position: absolute for div.content.
If i do, the moreContent div comes to the left like this.
I don't understand why its happening like this because, i set the parent of content div's
position as relative. So, it should be inside the li.
I just want to keep the same layout with the div.content positioned as absolute.
How to do it.
Thanks!
The problem is that when you position div.content as absolute, it then has no influence of the position of the other elements. I'd suggest setting a margin, this will then mimic what div.content would do if it wasn't absolute: http://jsfiddle.net/ahmednuaman/MQ6Rg/3/
Absolute position is outside the normal page flow - ie nothing to do with the position of other items on the page.
Once you set an element to be 'absolute', it's basically removed from the page's DOM for positioning calculations. Making .content be absolute means that .moreContent now has nothing "left" of it to float against, so it moves right up to the parent container's bordre.