HTML & CSS
Is there a way you stop an anchor link going directly to the top of a page, for example if I want to link to an article, can it jump to a postion 400px from the top of the page instead??
Yes, I think you want an inline anchor. So do this
<a name="foo">Foo Header</a>
<a href="http://www.foobarhome.com#foo">Go to Paragraphy "Foo"</a>
Otherwise you can use ID's in the same way.
<h4 id="para-8">Paragraph 9</h4>
<a href="http://www.foobar.com#para-8">Go to paragraph 8</a>
Sorry I should have explain that you need to put the anchor or id at the place you want to jump to.
Then if you want to link to a point on another page you add the "#foo" bit onto the url of that page. If you want to link within the same page you just need to put the "#foo" bit in the href (you won't need the url).
Any probs PM me....
Thank you for your reply, I'm already using the anchor in this way, but my problem is that it automatically positions that element to the top of the page, is there a way I can control this?
Basically I have a fixed div tag at the top of the page and the article I'm jumping to is going under this div tag so I can't see it
In the examplebelow, you'd just link to #article.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<div id="header"></div> <!-- your 400 (or whatever) pixel high div -->
<div id="article"></div> <!-- a div containing your article -->
Thanks for your replies. In my example the "header" div has a style "position:fixed", so all content scrolls underneith (clients choice), so when I link to the article its going underneith the header div, how can I stop this?
Put the identifier on an element that is X pixels above the start of the article, where X is the height of the fixed header.
height:50px; /* or whatever your header is */
You should put a top margin on the first element in the scrollable part of the page that is the same height as the fixed header so that the content doesn't disappear under the header until the page is scrolled. No anchor is required.
Um, is the IE Haslayout bug for in-page links also still in effect? I remember IE would always bring the focus to the top of the page if the link itself didn't have Layout.
Doesn't seems like rocket:( science?
I'm having the same issue, but after hours googling, nothing.
There are several solutions already mentioned in this thread any of which will work.
I have outlined my solution to this problem in a post titled CSS fixed-position headers. SitePoint won't allow me to post a link, but a Google search for that exact phrase should find it (once the page has been indexed). If you know of a more elegant solution, please let me know!
This topic is now closed. New replies are no longer allowed.