469,352 Members | 1,694 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,352 developers. It's quick & easy.

Change location of anchor target by a few pixels

DogBot
11
I need all of my anchors to go about 30 pixels above where the anchor tags are placed (there is a floating piece of interface at the top of the page) Is this possible?

Thank you
Dec 9 '09 #1
24 27209
Dormilich
8,652 Expert Mod 8TB
Is this possible?
yes. : )
Dec 9 '09 #2
Frinavale
9,735 Expert Mod 8TB
Yes it is possible.
Please take a look into how CSS styles can help you to achieve this.
One possible way to achieve this is to use the display property combined with the position property.

This has nothing to do with JavaScript so I have moved this question to the HTML/CSS forum.
Dec 9 '09 #3
DogBot
11
hmmm...Perhaps I did not phrase my question correctly.
When I click on a link with an anchor the browser puts the line where the anchor is at the top of the browser window.
I instead want it to put that line about 30 pixels down from the top of the browser window.

Now I can see how I MIGHT be able to make a style for the anchor where it is always 30px above where it is places (margin relative -30px?) or something like that. is that what you mean?
Where does display come into that? i know very little CSS, I am just learning. Thanks

Dormilich, I did not state it so, but my question implies "how" not just "if". Still At least I know It can be done and I am not wasting my time.

Is this website not for newbie questions? Perhaps I should ask elsewhere? let me know . thanks
Dec 9 '09 #4
Frinavale
9,735 Expert Mod 8TB
DogBot, Dormilich was just playing around.
It doesn't matter what skills you have, your questions are always welcome here.

It might help me if you had a link or something to the page that you're working with so that we can see what you're talking about...I'm not sure what you're talking about.

To me, at least, an anchor is an <a> tag, which is a link (also known as a HyperLink)

So when you say:
When I click on a link with an anchor
I don't have a clue what you're talking about.
It's even more confusing when you say:
The browser puts the line where the anchor is at the top of the browser window

A picture (or a link in this case) is worth a thousand words!

-Frinny
Dec 9 '09 #5
Dormilich
8,652 Expert Mod 8TB
A picture (or a link in this case) is worth a thousand words!
yes. : )

edit: sorry, but I couldn’t resist.
Dec 9 '09 #6
Frinavale
9,735 Expert Mod 8TB
Hehe.
Dorm, are you just trying to increase your post count?
;)
Dec 9 '09 #7
drhowarddrfine
7,435 Expert 4TB
I couldn't have written this better myself:
How to get a quicker, more complete answer.
Dec 9 '09 #8
DogBot
11
here it is

The problem is with "in page links". they end up under the header.

Good point on how to ask a question. I will try to be more thorough
Dec 9 '09 #9
Dormilich
8,652 Expert Mod 8TB
The problem is with "in page links". they end up under the header.
just had a look with Firefox. I can’t spot anything obviously out of place. which links do you mean?

though I’ve spotted another problem. the apostrophes (’ like in Gouvernment’s) are not displayed correctly. there’s some kind of charset problem.

edit: didn’t see anything under the header either.
Dec 9 '09 #10
Frinavale
9,735 Expert Mod 8TB
Ohhhhh I see the problem!
Drom, scroll down the page a bit and click one of the links that says "back to top".
It doesn't scroll back to the top properly!

This IS a JavaScript question after all!

-Frinny
Dec 9 '09 #11
Dormilich
8,652 Expert Mod 8TB
no clue where the anchor is jumping to, but I see a lot of invalid (duplicate and numerical) ids.

This IS a JavaScript question after all!
really? I had JS turned off and don’t see any difference.
Dec 10 '09 #12
Frinavale
9,735 Expert Mod 8TB
You're right Dorm it's not a JavaScript question. Yesterday I thought the DogBot was using JavaScript to scroll to the place that they wanted but apparently they aren't.

DogBot, your HTML is invalid. You cannot have more than one element on the page with the same ID. It looks like you have give all of your <a> tags an ID of "ankor".

But this isn't going to fix your problem.
The page is doing exactly what you are telling it to do: it's going back to the top.

The problem is that the header/title for the page has a position:absolute style. This means that the header/title is not part of the normal page flow any more (it "floats on top" of the normal page content).

This means that the page is actually scrolling to the top.. It's going to the right place (the top of the browser window) but this isn't what you want.

I think you need to put in a spacer of some sort to make sure that the top is actually where you intend it to be.

Maybe the HTML/CSS experts will have a better idea.

-Frinny
Dec 10 '09 #13
Dormilich
8,652 Expert Mod 8TB
my guess is that the position: relative of the <a> tags screws it up.
Dec 10 '09 #14
drhowarddrfine
7,435 Expert 4TB
An immediate fix is to change the href to "#container".
Dec 10 '09 #15
DogBot
11
Thank you all.This page has no JavaScript. The reason I posted on the JavaScript forum originally is because I suspect that is where the answer lies.

The "ankor" and other errors where introduced as I tried to implement Frinalave's first suggestion which I misinterpreted. but they are irrelevant. the point is that the page's anchors work correctly, I just need them to scroll to a position about 130px from the top (right below the floating header).

Thanks for your help so far, I have reposted this on the JavaScript forum.

Dogbot
Dec 15 '09 #16
Frinavale
9,735 Expert Mod 8TB
Why did you repost this question in the JavaScript forum?
You just said there is no JavaScript on the page!
Did you try what the Doc suggested?

-Frinny
Dec 15 '09 #17
DogBot
11
Frinny. who ro what is "the Doc"? only you, dormilich and dhr.., have replied. I tried all suggestions here. Some pointed out errors in coding (thank you) which I have correcd (if not posted) but those where irrelevant to the problem.
You suggested a spacer. and I do have one. the problem is the anchors.

I reposted there because even though this page currently has no JavaScript. I suspect that is where the answer lies.
Dec 15 '09 #18
drhowarddrfine
7,435 Expert 4TB
Frinny. who ro what is "the Doc"?
That would be me. What I suggested works for me, are you saying it doesn't work for you?
Dec 15 '09 #19
DogBot
11
Yes Doc, it solves the "Back to the top" problem. Thank you it is just that I was not concerned about that., but rather in the other direction. I have modified the test page for you to see what I men. Click in one of the two test links at the top and you will see the problem. Thanks

Test File
Dec 16 '09 #20
drhowarddrfine
7,435 Expert 4TB
The difference is equal to the height of the header. That is happening because the scrollable part is also part of the header so all this is calculated together rather than being independently.
Dec 16 '09 #21
DogBot
11
That is correct doc. The scrolling is that way intentionally as it just seems more natural to have the scrollbar the full height of the browser window as opposed to right next to the content like a frames page. (it actually took some sweat to make it behave this way!) Now the challenge, as you discovered above is to make anchors work "properly". That is..not to end up under the header.
Dec 16 '09 #22
I read all the thread and didn't get an answer.
People should do a research about A (anchor) tags and their "name" attribute, before going off topic all over the place.
When you click on say <a href="#some_anchor">, the browser will look for <a name="some_anchor"> and scroll the page so that this anchor is at the top of the page. I'm having the same problem, I dont want it to be at the top of the page, but a bit lower.
All I can think of right now is some javascript that will scroll down the page a bit further when this happens.
Sep 28 '10 #23
@Rolfen
I realize this is an old thread, but Google is still taking people here. This is the solution I have just implemented.

Look for your anchor tag, i.e.:
<a name="p123"></a>

Replace it with this:
<div style="position:relative;">
<a name="p123" style="position:absolute; top:30px;"></a>
</div>

If you wanted the page to scroll above where the anchor tag was, you can make it negative, i.e. top:-30px;

This is a whole lot cleaner than a JavaScript solution because if another anchor link is clicked within the same page, the same rule can apply.
Sep 25 '12 #24
@Shamusmac

THANK the Lord. I've scoured the inter webs looking for this solution.
Thank you so much for posting despite the oldness of the thread! Saved my butt big time!! Made and account on here just to express my gratitude x)
Dec 17 '15 #25

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by ras | last post: by
2 posts views Thread by Ken Baltrinic | last post: by
1 post views Thread by klynn | last post: by
1 post views Thread by Pim Sohful | last post: by
2 posts views Thread by monomaniac21 | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.