HTML fragment links work with CSS positioning?

960 Views Asked by At

Last night I decided to add HTML fragment links in my computer listing page. However, no matter the pattern of linking, or whichever browser I use, those fragment links are simply not navigatable.

http://icelava.net/mycomputers.aspx#SEPHIROTH

http://icelava.net/mycomputers.aspx#DIABLO

UPDATE on Answer: the links now flow correctly to the fragment locations after my mistake with the tag attribute has been highlighted.

I did not find any real answer, but from what I have read, there are hints to suggest that my use of CSS positioning to form the two-column layout with two DIVs may be giving the browser trouble in figuring the vertical location of the fragment links.

#ContentCol
{
   margin-right: 130px;
   padding: 3px;
}

#RightSideCol
{
   background-color: #fff;
   float: right;
   padding: 0px;
   width: 126px;
}

If that is the case, what would an appropriate approach be to allow HTML fragment links?

2

There are 2 best solutions below

1
assplecake On BEST ANSWER

In order for those urls to navigate to your intended target, you need named anchors instead of the linked anchors that you have in your page. Example:

<a name="SEPHIROTH" />

(without the hashmark) instead of:

<a href="#SEPHIROTH"> #1</a>

Preferably, instead of using named anchors, you could also just give the element that you want to navigate an id attribute.

<td id="SEPHIROTH">...</td>

Another example. Try this link: http://icelava.net/mycomputers.aspx#FooterBanner You see, it scrolls down to your footer, because of the id attribute.

0
strager On

If your code, you have, for example:

<a href="#SEPHIROTH">#3</a> Dell XPS M1530

You may want to add an id attribute:

<a id="SEPHIROTH" href="#SEPHIROTH">#3</a> Dell XPS M1530

When you click that <a>, it would 'jump' to itself. Is this what you want?