Intra-page linking

[John444]

Hey everyone, here is the catch. I want my link to, when clicked, link to a place further down on the page. However I have a fixed header that stays in its spot despite the scrolling of the page, so I want the title I am linking to to appear say about 150px from the top. Is there a way to intra-page link to a place further down the page so that it loads the title 150px from the top?

I know normally an intra page link is <a href="#here">click here</a>
<a name="here" id="here">It loads here</a>

However 'It loads here' would appear at the very top of the screen (thus covered by the fixed banner), were as I want it to load 150px down.

Can anyone help me solve this problem?

 

[Albright]

The correct answer is to not use floating headers like that. It is a horrible practice. Aside from what you describe, such things also break paging through your site with the Page Up/Page Down keys or space bar, totally frustrating users who like to read this way (like me). Do you really want to frustrate your readers like this?

If you must - you absolutely must - have your logo or whatever visible on screen at all times or whatever, put it in a sidebar and have that float, or just some other place where it won't appear over your page's content.

 

[John444]

I must have the header, it is a requirement. Should I use frames then?

 

[NathanCH]

Actually, Albright, that's not the correct answer. I do agree that it is annoying, but a lot clients do want these sorts of things nowadays and its good to know how to do it. Cmon, even Google uses it.

Thankfully it's not hard to do, and you definitely do not want to use iFrames

.moveDown{
position: relative;
top: -150px;
}

.linkPosition{
position: absolute;
}

For your link just do this:

<div class="moveDown"><a name="aboutme" class="linkPosition"></div>

 

[John444]

Actually, Albright, that's not the correct answer. I do agree that it is annoying, but a lot clients do want these sorts of things nowadays and its good to know how to do it. Cmon, even Google uses it.

Thankfully it's not hard to do, and you definitely do not want to use iFrames

.moveDown{
position: relative;
top: -150px;
}

.linkPosition{
position: absolute;
}

For your link just do this:

<div class="moveDown"><a name="aboutme" class="linkPosition"></div>

I can't seem to get it to work, Is there any way you could post an exemplar? (just a very very basic one),
thanks for the responses

 

[NathanCH]

Hey, sorry I made a mistake in that code yesterday. I left out the closing tags for the link. Here is a live example:

http://www.cetan.ca/workshop/fixedheader.html

Take a look at the source (and inline css at the top). Let me know if this works for you and if anyone finds a better way

 

[Albright]

Actually, Albright, that's not the correct answer. I do agree that it is annoying, but a lot clients do want these sorts of things nowadays and its good to know how to do it.

It's not my opinion that the customer is always right. If the customer wants something that is wrong, you're not doing your job if you don't try to explain to them why that's not a good idea. If they insist, fine, you grudgingly build it, but every stupid thing you're forced to build should come after a hard-fought battle in which you explain to the client that it will do more harm than good.

Cmon, even Google uses it.

You say that as if Google is some sort of authority on user interface design. I see that site is also implementing just-in-time image loading, which, while it makes sense on a technical level, is also a user-unfriendly exercise, as it reduces the ability to quickly scan through the page.

 

[NathanCH]

It's not my opinion that the customer is always right

Well I don't think its wrong. It's definitely a choice. It seems I really hit a nerve on this with you, I just think its a better idea to help him instead of not because you think it's wrong, which begs the question why you even posted

 

[John444]

Hey, sorry I made a mistake in that code yesterday. I left out the closing tags for the link. Here is a live example:

http://www.cetan.ca/workshop/fixedheader.html

Take a look at the source (and inline css at the top). Let me know if this works for you and if anyone finds a better way

Thanks, Works Great!

 

[John444]

It's not my opinion that the customer is always right. If the customer wants something that is wrong, you're not doing your job if you don't try to explain to them why that's not a good idea. If they insist, fine, you grudgingly build it, but every stupid thing you're forced to build should come after a hard-fought battle in which you explain to the client that it will do more harm than good.

Trust me if I thought something was wrong, I would let my customer know right then and their and give them my solution. However in this case, nothing is wrong, I don't know why you are so against floating headers. It is a perfectly acceptable way of doing things and is used in many major sites (Google and Facebook included). Your theory is purely based on your opinion of websites, not everyone is like you. Plus I have never had a floating header break while using the spacebar or scroll arrows, sounds like a browser or software issue, not a coding issue.

 

[morespce54]

...
I know normally an intra page link is <a href="#here">click here</a>
<a name="here" id="here">It loads here</a>
...

No matter if the banner floating thing is "right" or "wrong", don't forget that anchors (like your example above) are nothing more than links. The only difference from an outside link is the pound (#) in href which is just to says: stay on that page.

So basically, you could use any HTML element (with or without CSS) to point your link to.

ex:

<a href="#here">click here</a>
<div id="" name="here">It loads here</div>

or

<a href="#here">click here</a>
<p id="" name="here">It loads here</p>

or

<a href="#here">click here</a>
<img src="" id="" name="here">

or

<a href="#here">click here</a>
<hr id="" name="here">

or whatever, really!

 

[Albright]

However in this case, nothing is wrong, I don't know why you are so against floating headers. It is a perfectly acceptable way of doing things and is used in many major sites (Google and Facebook included). Your theory is purely based on your opinion of websites, not everyone is like you. Plus I have never had a floating header break while using the spacebar or scroll arrows, sounds like a browser or software issue, not a coding issue.

Why am I against them? Again: They cover up content, they break pgup/pgdn (and by "break," I mean change the expected functionality; it's not a browser issue. The perceptible amount that the page scrolls when you hit pgdn differs because part of the page is not visible), and you also have problems with anchor linking as was the genesis of this thread. There's no upside unless you're awful enough to insist that your site's logo/social network badgets/ad/whatever overlap part of your content. And as I already said, "but Google does it" is hardly a good excuse when it comes to web design (and Facebook does not do this anymore, unless you're referring to the chat tab thingies at the bottom, which are generally off to the right side of the screen and therefore not overlapping the main content area most of the time).

Not a browser or software issue. No, not a coding issue either. Just a bad design issue. Won't somebody pelase think of the visitors!

 

[Padaung]

And as I already said, "but Google does it" is hardly a good excuse when it comes to web design (and Facebook does not do this anymore, unless you're referring to the chat tab thingies at the bottom, which are generally off to the right side of the screen and therefore not overlapping the main content area most of the time).

Facebook does still do it, just look at the top of the News Feed for starters.

As a visitor, I rather like it - I find the quick links very handy and it saves me the trouble of scrolling all the way to the top of the page (especially if it has been a busy 'Facebook news' day and the page is long!)