I have a blog that I'm having a slight styling (CSS) issue in Chrome only. For reference the blog is located here.
The issue is that (in Chrome only) when I scroll the content should go under the nav bar (but over the top of the big image), but it goes over. Again, this issue only exists in Chrome.
I'm not sure where to even start, but I'm hoping y'all will have a few tips for me. Thanks!
The issue was actually fairly simple and had to do with the positioning of the header elements.
I changed #header_area .page to position: absolute, and #header_area .Nav to position: fixed. I also gave #header_area .header a top margin of 70px and made that position: fixed as well.
Related
Scrolling is disabled on this webpage, however, when using an iPad in landscape, this problem occurs. There is no gray space at the bottom until you try to scroll down (this is disabled) but all of the sudden the gray space appears. I've tried to find the answer everywhere with no success. The link to the page is www.papiasxm.com
body {
position: relative;
}
seems to be fixing the issue.
For responsive design, using padding/margin sometime causes the issue of overlapping the main design. For this type of problem, it is good practice to not to use fixed height or if you need to use it then fix it with margin/padding.
you can fix body position to relative. here, position: relative;
positioned relative to its normal position.
I'm so sorry, for I write a request for you, but I can't fix my page. I read several Howto, Stack Overflow, blog entry about ScrollSpy, but I can't fix my problem. Can anyone help me?
I know, the best way is I copy-paste the page into a code sharing site, but this problem is depending on the full environment. Sorry! I hope!
The page: http://eskuvonk.dras.hu/
I have a page with fixed overlay (header), and I want to use the main scrollbar for scroll. The problem is next:
Under Chrome, the whole page is working good, but under Firefox, the menu is crazy! Highlights good menu at first scrolls, but after jump immediately the last. Why? I checked the divs in debuggers, the padding, and others are too far for indicate the end of the page.
Please, help me! My wedding is depending on it... :)
Thank you!
You have position: absolute set on your container div -> <div id="streak" class="container">. Remove it and it should work just fine.
#streak {
position: absolute; /*Remove Me*/
}
This might break the layout of your page a little bit as is, but that is what is causing the issue in FF, so you'll have to clean that up as well.
The final solution was:
Removed all position: absolute; from any parent node of ScrollSpy inspected anchors.
Replaced padding-top: 300px; to margin-top: 300px; on body.
Added margin-top: -300px; padding-top: 300px; to #streak for fix the scrolling.
FYI: The page contains fix positioned, 300px height menubar.
I'm new to stackoverflow and so I apologize in advance for rehashing any issues already addressed here (I'm sure they are, just not sure how the apply to my specific situation).
Anyway here is the site I'm working on - www.betsyandalex2013.com. I would like to have all of the elements fixed in place. I've been playing around with it using Firebug but when I use position: fixed; on say #wrap I can't scroll over to see the rest of the content. Alternately, when I fix the position of #header, the links disappear. Again, I would ideally like to fix all the elements in place and be able to scroll across (and up/down) to see any content when the browser is resized.
I am not sure what you said. But setting:
#header {
position: fixed;
top: 0;
}
It will work: The header will be out of the natural flux of your page and it will be at top of the screen even when you scroll down/up.
PS: To see the effect put content to #wrap element.
Working on my portfolio and came into a problem with positioning - http://harden6615.com/portfolio/index.html - I have a fixed header nav that I used a jquery scroll on and works fine until it passes down through the work section of my site. The fixed header's depth is below the work images instead of above. Messing around with it, I realized it has something to do with position: relative, but do not know how to work around it.
I tried z-index: -1 to my work images, but this breaks the jquery hover I have on them. Anyone know of a solution to fixed positioning or if there is a solution?
I tried it in Google Chrome with the google developer tools and it works when i add this to #floatingbar:
position:fixed;
width:960px
z-index:10;
Set a higher index to your #floatingbar DIV, rather than lowering the portfolio squares.
#floatingbar {
z-index: 9999 !important;
}
I've seen this page here and I really like the breadcrumbs at the bottom.
How do I achieve this behavior ? The breadcrumbs at the bottom stays at the bottom and nomatter if you're scrolling down, it is still there.
http://developer.apple.com/iphone/library/navigation/index.html?section=Resource+Types&topic=Getting+Started
Please someone help me with some good code. Because I have no clue.
#breadcrumbs {
position: fixed;
bottom: 0px;
width: 100%;
/* Set your desired height
* and other factors like you would
* any other div.
*/
}
position: fixed fixes your element to an edge of the viewer, in this case, to the bottom. If you want to fix the element to the top, you would go top:0px, or left side 30px from the bottom, you'd go left:0px;bottom:30px. I use this a lot for my CMS admin pages (I put nav bars and logout at the top). It's a great tool, but bear in mind that the iPhone does not support native CSS :fixed, nor does older IE.
Did you look into using javascript or a jQuery plugin to make the breadcrumb for you? Then you can use dclowd9901's answer to position it