I have the problem, that I have a header with position:fixed. On the page I want to use normal HTML Links or Anchors. If I click on one of the links, the screen jumps to this anchor, but it is at the top of the browser window. So the header is above the anchor and I am missing 100px of my content an have to scroll up, to come to the actual anchor.
Does anyone know a solution for this?
You have 2 things going on here. Not only do you have a margin/padding issue with your content and header-height, but you'll need to make a buffer div above your sections so that the hash doesn't go all the way to the top.
Also, you should keep in mind, that at the time of writing, most touch devices can't deal with
position: fixed;
Take a look at this code for the header: http://codepen.io/sheriffderek/pen/qKLIo
And look at this for the hash links: http://css-tricks.com/hash-tag-links-padding/
Good luck!
Related
So when I scroll down from the landing page it sticks at the next section. I'm not sure whats happening. There's also a white bar at the bottom of my site that i can't get rid of. How do I fix a scrolling that seems to "stick" when it goes over a certain section and how do I fix white space at the bottom of my footer? Here's a link a github I created to show what I'm dealing with, too much code to copy and paste here to get a good answer
https://github.com/OakHarbor/mapletest
I checked the site, and the problem is you are using a BIG really BIG images in the background, images like "wood1.jpg" has a resolution of 6000x4000px this is a lot the other image "wood2.jpg" has almost 8200x5500px, just this image has 12mb this is like 4 times what a whole page should have of size, so when you're scrolling the page this images start to load so the "sticks" is the page suffering to load.
Your imagens should be something like 800x400 or even less and don't forget to optimize them there is tools in the web that remove all the unecessary meta information check here https://imagecompressor.com
And your "white bar" is that you set a id in your tag html "noScroll" and this css was apply to it, basicly this alow you to acess the content with scroll bars, if you don't need this feature just remove it that the white bar will disappear
#noScroll {
overflow: scroll;
}
For Stick Problem
Please keep the fixed background to scroll.
For Footer White bar
If you want to remove the white bar from the footer, please remove top: -50px from #footer id and use of margin-top: -50px instead of this and now It will be fixed.
I have a fixed top navigation bar 100px deep on web page and links on that bar go to id's down the page. The id's are associated with the h3 heading for each section. Unfortunately on clicking the link the page moves up and the first 100px is hidden behind the fixed top bar.
I could possibly embed the id's elsewhere in the page roughly 100px higher than the point I'm linking to (not that easy given the quite graphical design). I wonder if anyone knows any way to force those id's to stop 100px short of the top of the page?
Unfortunately I have to keep the development site behind a maintenance screen so I can't provide a URL. Thanks in anticipation (my first post to StackOverflow!)
Jeremy
One solution is to use the :target pseudo class to shift your headings about a bit. The trick is to increase their top padding by the height of your fixed element and then move them back up the page by subtracting the same amount from their top margin.
So, using your example of a 100 pixel high fixed element and assuming no existing padding or margin on your h3 elements, here's how the CSS would look:
h3:target{
margin:-100px 0 0;
padding:100px;
}
You may want to tweak those values, depending on your design, to add a bit of space between the fixed element and your headings.
I've found the answer
You can see it at work at
http://www.sanclerorganic.com/wordpress
The link code on the navigation bar is
Recipes
and the target down the page is
<div style="position:relative;">
<div id="recipeshomelink" style="position:absolute; top:-115px;"></div>
</div>
Obviously the -115px is adjusted to suite the top bar depth.
I hope this helps others.
Jeremy
So I apologize in advance if this question has been answered before- I tried searching but couldn't find much on it.
A designer and I are working to create this website- www.zeinal-jundi.com
This is predominantly a one-page layout using a scroll effect to navigate to different sections, although the site's Discography section does link to a separate page for each album. We also have a fixed header that allows the navigation to be visible the whole time. Originally, I had added a margin to each section of the page to accommodate the height of the fixed header. This however made the space between each section far too large, so my designer requested I find a way around this. I was able to fix it by instead adding a value to the scroll animation script that brings the section around 250px from the top, rather than to the overall top of the page (where it would then be covered by the fixed header)
So now, I've of course encountered the issue of linking to these sections from off another page- using code like the following:
Biography
This of course links back to the front page, but brings the section up to the very top, where it is hidden by our header. I'm wondering if anyone knows of a way I can link to this section from another page but add an action similar to the one I have on the scrolling function that will bring it up to 250px down from the top of the page rather than the very top without me having to add margins to each div.
Another option of course it to just make that pesky fixed header a lot shorter, or possibly hide the site title after the page scrolls to a certain point, but our client seems pretty adamant about having the entire header visible throughout, so I of course am trying to find a work around so we won't have to rethink the entire element (if such a solution even exists).
I hope I explained this well enough! Let me know if you need to see any additional code- would love to hear your thoughts on how to achieve such a thing! :)
If you're placing the block through CSS, you can use the CSS3 :target pseudo selector to position whatever section the link pointed to, e.g.:
:target {
/* ... example:
top: 250px;
*/
}
I have a pretty simple site, which has a footer that is stuck to the bottom of the page and a content area that can scroll if the content is too long, and the end of the content will clear the footer like below. If the content fits in the page then no scrollbar is shown.
However, recently some CSS/php change which i can't for the life of me detect, has meant that the page no has this huge area under the bottom of the main content div which the user can scroll down like so.
Normal page view with everything looking as it should.
Here is the view for every page now, a user can scroll way below the end of the main content div to reveal this massive empty area underneath.
Having had this working nicely a day ago, Im not sure where to look next. I have check all of the css to make sure there are no syntax errors, I have checked all of the wordpress template files to make sure there are no unclosed divs or vice versa.
Does anyone know a starting point to look at to try and fix this? is there a common error for this type of thing? If you need a link to the stylesheet or html just ask (didnt copy as it was too long)
Not sure why you are using fade element. Definitely it's causing the issue.
Add this CSS to fix your scrolling problem by hiding it.
#fade { display: none; }
I'm trying to get a footer to stay at the bottom of the webpage and allow for different amounts of content on different pages. It works on my index.html page but when I go to the "about" page the footer floats to the middle of the page. Any advice? the website is up at http://www.concept82.com/DISupdate/index.html and the trouble page is http://www.concept82.com/DISupdate/about.html. Thanks!
For a start, you need to move your #bottom div outside of the #wrap div, so it's immediately following it. That'll get you most of the way there, but there still seems to be something on your index page that's keeping it from moving all the way to the bottom of the window.
Instead of -200px margin-top on #bottom, do 200px. That will fix it.