-1

I have a website (that is quite long so, you need to scroll) that lists some tutorials/presentations. For the convenience I decided to create a menu on the top of the page, where the user can click on it and jump to the right place (on the same page). The code for the menu:

<ul>
<li><a href="#tutorial1">Tutorial 1</a></li>
...
</>

So now on the site, I have couple of hidden anchors, that look the following:

<p><a name="tutorial1" ></a></p>

The idea is, that the user clicks on the link and jumps to the right spot on the website.

BUT there is a Problem: The site's template has a menu on the top, that is always visible (also when you scroll). So whats happening is that when I click on a menu item the correct spot is covered by this menu. So what I actually want is that after the click the site jumps to the achnor minus the offset, that is created by this menu.

So I was wondering, whether I could achieve this by adding some CSS to my anchor like here:

<p><a name="tutorial1" style="positioning:relative; top:-60px" ></a></p>

I dont see any effect though. What am I doing wrong?

Martin
  • 22,212
  • 11
  • 70
  • 132
JennyDong
  • 9
  • 3
  • can you please explain and give us a screen short – Arindam Sarkar Sep 05 '19 at 10:00
  • Ok sorry guys, the explanation was not idea. I edit it. – JennyDong Sep 05 '19 at 11:42
  • Have you seen [offset scroll to in html?](https://stackoverflow.com/q/38923230/1115360) – Andrew Morton Sep 05 '19 at 12:11
  • The question looks an exact duplicate of this question: https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors and See this answer: https://stackoverflow.com/a/28824157/3536236 – Martin Sep 05 '19 at 12:38
  • 1
    Possible duplicate of [Fixed page header overlaps in-page anchors](https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors) – Martin Sep 05 '19 at 12:39

1 Answers1

-1

Make sure you add a semicolon at the end of every CSS property except for the last one. 

<p><a name="tutorial1" style="positioning:relative; top:-60px" ></a></p>

You want to set the height of the menu to what it is now. Then place the rest of your website in a website container. That way the fixed header will not overlap with the content of your website.

DerpyCoder
  • 127
  • 1
  • 6
  • Semi-colons *separate* rules in CSS. They don't terminate them. There is no need for one after the last rule in a rule-set. – Quentin Oct 31 '19 at 17:16