Positioning anchor links

Dev Shed Forums Sponsor:

January 24th, 2013, 09:19 AM

gw1500se

Contributing User

Join Date: Jul 2003

Posts: 2,867

Time spent in forums: 1 Year 1 Week 5 Days 9 h 6 m 6 sec
Reputation Power: 581

Positioning anchor links

I have an index at the top of may page which are links to local anchors (obviously this is an FAQ page), typically.

Code:

<a href="#q1">Why does it tell me I have already downloaded my application?</a>

When that linked is clicked, I want the anchor to be positioned at the top of the page. To do that I found some suggestions using CSS for the anchors. Without the CSS the links work but are positioned wrong. With the CSS the links don't work at all. The anchors typically look like:

Code:

<a name="q1" id="q1" class="anchor"></a>

The CSS I tried is:

Code:

.anchor {
	position:relative;
	top: -50px;
	float:left;
}

I don't think my CSS is wrong so I am guessing that my approach is wrong. Can someone help me accomplish what I want? TIA.

__________________
There are 10 kinds of people in the world. Those that understand binary and those that don't.

January 24th, 2013, 01:06 PM

Nanomech

Contributing User

Join Date: Aug 2011

Location: The Pleiades

Posts: 192

Time spent in forums: 1 Day 23 h 7 m 18 sec
Reputation Power: 7

Can you post your whole code you have please? Are you using any server-side or client-side scripting?

I'm not sure on what your setup is, have you created individual pages for each anchor? Or do you stay on the same page and open the link content on the page where all the anchors are?

Regards,

NM.

__________________
"WERE NOT WORTHY!"

"WERE NOT WORTHY!"

January 24th, 2013, 01:27 PM

gw1500se

Contributing User

Join Date: Jul 2003

Posts: 2,867

Time spent in forums: 1 Year 1 Week 5 Days 9 h 6 m 6 sec
Reputation Power: 581

I don't think I understand your question. There is no scripting at all, this is pure HTML. The whole code just consists of multiple <a> tags with anchor hrefs at the top followed by multiple paragraphs with corresponding anchor <a> tags as shown.

January 24th, 2013, 04:25 PM

Nanomech

Contributing User

Join Date: Aug 2011

Location: The Pleiades

Posts: 192

Time spent in forums: 1 Day 23 h 7 m 18 sec
Reputation Power: 7

So, when you click the anchor it takes you to a separate HTML page where you display the question with the content below it?

Can you provide a live link at all?

Regards,

NM.

January 24th, 2013, 06:13 PM

gw1500se

Contributing User

Join Date: Jul 2003

Posts: 2,867

Time spent in forums: 1 Year 1 Week 5 Days 9 h 6 m 6 sec
Reputation Power: 581

Quote:

Originally Posted by Nanomech

So, when you click the anchor it takes you to a separate HTML page where you display the question with the content below it?

No, these are anchor labels. Everything is on the same page. You click on a link and it repositions the page to the content for that href (where the anchor label is). The problem is it positions the content for that anchor label such that it is in the middle of the page rather than at the top.