HTML fragment links work with CSS positioning?

Question

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?

assplecake · Accepted Answer · 2009-01-30 02:59:44Z

3

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.

edited Jan 30, 2009 at 2:59

answered Jan 30, 2009 at 2:54

assplecake

3492 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

icelava Over a year ago

OH! i forgot.... href="#fragment" links to another position in the page with that fragment link. It does not specify the link location itself. Thanks.

strager · Accepted Answer · 2009-01-30 03:13:55Z

0

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?

answered Jan 30, 2009 at 3:13

strager

90.3k27 gold badges138 silver badges180 bronze badges

Collectives™ on Stack Overflow

HTML fragment links work with CSS positioning?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related