Change location of anchor target by a few pixels

[DogBot]

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

[Dormilich]

Is this possible?

yes. : )

[Frinavale]

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.

[DogBot]

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

[Frinavale]

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

[Dormilich]

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

yes. : )

edit: sorry, but I couldn’t resist.

[Frinavale]

Hehe.
Dorm, are you just trying to increase your post count?
;)

[drhowarddrfine]

I couldn't have written this better myself:
How to get a quicker, more complete answer.

[DogBot]

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

[Dormilich]

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.

[Frinavale]

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

[Dormilich]

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.

[Frinavale]

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:absolu te 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

[Dormilich]

my guess is that the position: relative of the <a> tags screws it up.

[drhowarddrfine]

An immediate fix is to change the href to "#container ".