This is my first time posting on here. I've searched for a while for an answer to this question and I'm now turning to this board because it's proven useful to me in the past.
The motif of the page I'm designing is a one page scrolling website (kind of like http://www.kitchensinkstudios.com/).
I've implemented a fixed navigation at the top, about 70px in height. Below this I've created sections that link to the nav. The idea is to click the link in the nav and the page will scroll up to the section chosen. The problem is: due to the automatic nature of internal bookmarks scrolling directly to the top of the page!, this cuts off a majority of the content.
I've attempted to add hidden div's or break tags with padding-top values to the sections in question but, aside from giving me a proper distance from the top of the page, it creates an opaque background with the same value as the padding.
Does anyone have any suggestions for doing this?
Ideally, when you select a link, the section called upon will float up to about the middle of the page.
Much thanks to anyone who gives this one a shot!
The default behavior for browsers is to scroll an anchor to the top of a view port.
If you offset the anchor vertically upwards, you should find it will bring the content down by an equal amount.
You can do this by specifying the position of the anchor as 'relative', and setting the 'top' attribute to a negative value, e.g.
<a style="position:relative; top: -70px;" name="myAnchor"></a>
Some browsers appear to need the anchor taken out of the normal flow, which is solved by simply floating the element.
<a style="float: left; position:relative; top: -70px;" name="myAnchor"></a>
You should find the line above works for FireFox, Chrome and InternetExplorer.
Related
I've got this weird problem which it seems that i simply can't solve (so far). The weird thing is that I've done almost exactly the same layout before for a navigation-bar, which was succesful.
In my navigation bar i have a button (not an actual <button> but a <div> which acts like one through jquery) to the farthest right of it, which has a background color and expands on click. The problem is that in IE and some resolutions of Chrome as well, there's a little white stripe shown beneath this div. Further this makes the child div that expands beneath it have a little gap between the button in the navigation bar and it self. This might not matter to some people (or most), but it's driving me mad - especially considering that i've done it before and used almost the very same css.
The <div> (to be more precise, it's the "quick-download" div) is set to a height of 70px and line-height of 70px, and the same goes for its siblings (and some of them less). However, the parent div shows up as 70.4px in height, which is bugging me out. I've tried numerous "trial-and-error" solutions/attempts, but with no success at all.
EDIT:
An image of the problem can be seen here (i changed background to red to make it more apparent): http://imgur.com/fya0duQ
EDIT 2:
The white space beneath the quick-download div appears only to be showing in IE and Safari on my compute right now.
EDIT 3:
Link to website is removed as the problem is corrected and therefore no longer is useful.
Assuming you mean the "Quick Download" button...
The height of the navigation bar is 75px and the height of the button is 70px, creating a 5px-tall gap.
The reason your navigation bar is 75px is because your image on the left is 60px tall with margin-top: 15px;. If you want the button to be flush with the bottom of the navigation bar, you can either increase the height of the button, reduce the margin-top of the <img id="aktie-skat-logo" ...>, or reduce the image's height.
The CSS in question:
#aktie-skat-logo {
margin-top: 15px;
display: block;
}
I've actually tracked the problem down my self - however, only after checking the problem across different browsers, after posting in here. The hint came in my old version of safari and IE, and didn't show in Chrome - which is consistent with "EDIT 2" in the original post. I found that some links we're 0.4px higher than others, but only 2/5 links.
The problem apparently stems from inserting a FontAwesome icon using the css ::after selector to links that has "children" (subpages). After removing this or making these icons position:absolute the problem is solved.
As to why insering these using ::after I have no idea. The ::after element had display:inline so shouldn't have broken too much in my opinion.
I'm sorry that I might have wasted your time checking my problem and answering, but even though I found the solution my self, it was a help posting in here (wouldn't have found it otherwise). I hope this might help some other people at some point.
I recently created a webpage for a company at http://www.parkprivatewealth.com/park and everything looked fine on Chrome. However, when using Safari to view the page, the homepage heading gets cut off when using fixed position. The text is there when I try to scroll up more and seems like something is blocking the text.
When I take off the "position: fixed" tag in the CSS the words appear again, would anyone possibly know how to solve the problem?
The problem: When the header changes to a fixed position, it gets pulled out of the document flow and the .container element pushes upward. Since you didn't use top, left, etc., the h1 element moves upward with .container
The solution: Add padding-top to the .container element. It should be the same as the header height.
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;
*/
}
When clicking on an anchor link, it cuts off a portion of the page. Near as I can tell it occurs in all browsers.
http://jsfiddle.net/PJDWs/
If you go to that fiddle and click on the link at the top, you will notice that you are unable to scroll up to the top of the page. Effectively part of the page has been removed.
There are a couple things that cause it, but I don't know why they do. If you remove overflow: hidden from the .bodyContent then it does not exhibit this behavior. Also, you will notice that the distance of the cut off is exactly equal to the value of top: XXpx on .stuff. Thus setting top: 0px will fix the problem as well.
The issue is that for the specific design I'm working on, neither of these are options as the element needs to be positioned off the top and the parent needs overflow hidden. But more importantly, why is this occurring, and especially why does it occur across all browsers... it almost seems like it's by design.
If you remove the height:100%; and replace it with bottom:0; it will work because the height, with top and bottom set, is then defined by the enclosing container - it's an interesting bug but this workaround will get the job done.