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/
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 am trying to create a sticky footer on a custom WordPress theme. I have looked at many online tutorials with no success.
It does not seem to be working responsively, it sticks, but as soon as I re-size the browser the height increases.
The footer needs to be responsive but also stick to the bottom of the page regardless of content size.
The website in question is:
http://shopexample.co.uk/
Would really appreciate some help on this one.
Thanks :)
The problem is not your footer expanding, it is related to image dimensions and body.
When you resize your browser (smaller), the background-images' size adapts to the viewport's width, not its height. That means that at a certain point, the image doesn't vertically fit the viewport anymore.
Then what is visible is the background-color of your body.custom-background, which is, coincidentally, exactly the same color as your footer's background (background-color: #cccccc;).
You can change the background-color of your body to distinguish it from the footer. You cannot resize the image to full-browser width AND height simultaneously without distortions.
Sticky footers: I noticed your footer & its wrapper are not positioned fixed or relative, which is the common approach for sticky footers. Then position it with the bottom property.
Fixed position:
will stick to bottom
will not scroll
will always be visible
Relative position:
will stick to bottom
will scroll
will only be visible on reaching page bottom
Check the working copy of your fiddle here http://jsfiddle.net/Mohinder/Yj6gu/
Problem was with headerwrap which was not closed where it should be and with body height.
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'm working on a responsive design where the logo needs to be positioned top/center of the page and overlaying the content beneath it.... http://reversl.net/demo/ I can get this desired layout by giving the logo an absolute position
position: absolute;
top: 0;
left: 50%;
margin-left: -98px; /*--half the width of the logo--*/
For best standards....is there any reason why I shouldn't take this approach? From looking around folks tend not to favor using absolute positioning. Would it be better to give the logo a negative top margin and auto left/right margin? The main thing is that the logo remains top center when the media query breakpoints kick in..
Whether absolute positioning is appropriate depends on whether the positioned element should affect positions of other elements (or to be affected by them). If not, absolute positioning is perfectly OK.
Absolute positioning is absolutely acceptable.
Absolute Positioning is cool. forever people were using a 960px width layout and absolutely positioning everything in a relative wrapper... this worked well back then. But that was before we started designing responsively. When people say "AHHH NO absolute positioning," this is what they are talking about. But absolute positioning is great for all sorts of rad stuff... like what you are doing. that is the way to go about it... I am also a really big fan of fixed positioning... and it seems so be all working on ioS devices now !!! YAY !!!
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.