Can't quite get internal linking working...

G

Gary

Im just experimenting with internal linking.

The problem I have is that the page doesnt jump to the link, but only
the page the link is on. For example i'd like to jump so that the link
im jumping to appears as the first item on the page, and not halfway
down the page which is what's happening at the moment.

Here is my HTML: -

any ideas on what is going wrong please?

===============================

<html>

<head>
<title>My Title Page</title>
</head>


<body>
<a href="#heading1">Jump to heading 1</a>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h1 id="heading1">Heading1</h1>
</body>

</html>
 
J

jim

You've almost got it there Gary...
==========================================
Instead of this: <h1 id="heading1">Heading1</h1>
use this: <a name="heading1"/><h1 id="heading1">Heading1</h1>

I'm guessing that you want the user to see the text, "Heading1". The
target anchor or 'a' tag will be invisible (ie: the <a name="____" /
it needs to be there in order for the link to work: <a
href="#________">Heading1</a>

So there are two parts to internal links:
1. the link: <a href="#link_name">Link Name</a>
and,
2. the target: <a name="link_name" />

Each of them uses the <a tag, just that one is viewable and the
other is not!

Hope that helps,

Jim
 
G

Gary

Thankyou Jim for your kind comments. I have tried that but have the
same problem. The page is not jumping so that my link is directly
below address bar, but jumping so that my target link is about 3/4's
the way down the page.

I am using Internet Explorer, version 6. Any idea why this isn't
working?

here is my revised html i made using your suggestion: -

<html>

<head>
<title>An internal link example</title>
</head>

<body>
<p>the following line will contain a link to a section someway down
the document.</p>
<p><a href="#header1">Jump to bottom of page</a></p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<hr />
<a name="header1"/><h1 id="header1">Header1 Internal Link!</h1>
<hr />
<br />
<br />
<br />

</body>

</html>
 
M

mrcakey \(The Eclectic Electric\)

Gary said:
Thankyou Jim for your kind comments. I have tried that but have the
same problem. The page is not jumping so that my link is directly
below address bar, but jumping so that my target link is about 3/4's
the way down the page.

I am using Internet Explorer, version 6. Any idea why this isn't
working?

here is my revised html i made using your suggestion: -

<html>

<head>
<title>An internal link example</title>
</head>

<body>
<p>the following line will contain a link to a section someway down
the document.</p>
<p><a href="#header1">Jump to bottom of page</a></p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<hr />
<a name="header1"/><h1 id="header1">Header1 Internal Link!</h1>
<hr />
<br />
<br />
<br />

</body>

</html>

It might be that you haven't got very much to display below that header.
Try adding some more substance underneath it and see if it then behaves as
you want it to.

::mrcakey::
 
J

Jonathan N. Little

jim said:
You've almost got it there Gary...
==========================================
Instead of this: <h1 id="heading1">Heading1</h1>
use this: <a name="heading1"/><h1 id="heading1">Heading1</h1>


Gary: Disregard this. Yes you can create and anchor with:

<a name="anchorName"></a>

But and ID property will work as well and does not need the extra markup.

My guess why the page is not scrolling to the anchor is that the browser
does not need to. If the anchor is visible within the browser window
already and as in your example there is no content after the anchor the
browser will not scroll. Confirm this by adding more content after your

<h1 id="heading1">Heading1</h1>


BTW is your document XHTML or HTML? If the latter use
<br> and not <br />
 
A

Andy Dingley

Im just experimenting with internal linking.

Don't use it if it's only a substitute for having pages short enough
to comprehend without massive scrolling. Separate pages (still with
nav links to them) generally make a better site than one huge "roll o'
wallpaper"

As an example, here's a guy who designs great gas burners, but bad web
pages
http://www.abana.org/ronreil/design1.shtml
(I do bronze casting and forging with a couple of them)

The problem I have is that the page doesnt jump to the link, but only
the page the link is on.

That's all it's expected to do. Exactly how a particular browser
behaves is up to that browser's implementors and could be almost
anything. Generally the link target will be scrolled until it's
visible in the window, but they don't guarantee placing it right under
the mouse cursor. Most of them try to minimise scrolling, so the
effects vary depending on how long the page is and which direction you
approached it from.
Here is my HTML: -

That looks broadly OK, although repeated <br> is bad coding style and
<br /> is wrong for HTML (it's XHTML, so either don't use it or search
the ng. archives for why not to). You have the usual common error
correct, in that you've used the "#" correctly.

We don't generally like posted HTML fragments, preferring URLs to live
sites. Sometimes there are typos or server config problems that aren't
visible otherwise.

The other poster's idea of substituting name attribute instead of id
and in adding an explict <a name="..." > is obsolete coding style and
wouldn't help anyway. I'd advise against doing it this way, although
it isn't strictly wrong to do so.
 
G

Gary

Jonathan thanks for clarifying that my original method was ok! i'm
using the great tutorial html.net - and it's reassuring to know that I
was doing the correct thing. The tutorial is teaching 'xhtml' so
that's what i'm learning at the moment Jonathan!

Andy - i'm using this just for learning, but i'll be sure to take heed
of your advice!

Mrcakey thanks also - as others suggested too, that was exactly the
problem, no content below the page, once I added content it worked
fine!

Thankyou all!

Gary.
 
E

Ed Seedhouse

You've almost got it there Gary...
==========================================
Instead of this: <h1 id="heading1">Heading1</h1>
use this: <a name="heading1"/><h1 id="heading1">Heading1</h1>

Er, I believe that would be invalid html since the A element is inline
and you can't validly put a block element inside it. It should be done
the other way around.
 
A

Andy Dingley

Er, I believe that would be invalid html since the A element is inline
and you can't validly put a block element inside it.

Although that's true, the <a> element was closed before the <h1>
anyway (and so it's actually valid). In HTML it would be closed _by_
encountering the <h1>, in this example it's using the XML syntax for
an empty element.

<a ... ><h1>Foo</h1></a>
would be straight-up wrong though.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top