Anchor tags on doc pages get positioned wrongly under top menu

[Vikas Saurabh <vi...@gmail.com>]

Hi,

I'm sure we all have noticed that our anchor tags scroll the page a
little too much such that the actual position gets hidden under the
same menu.

With google and this link [0], it seems, we can just plug-in

```
:target:before {
content:"";
display:block;
height:40px; /* fixed header height*/
margin:-40px 0 0; /* negative fixed header height */
}
```
in oak-doc/src/site/resources/site.css to fix the issue.

But, since I suck at html/css, I wasn't sure if this is fine. '40px'
is manual hit-and-trial. Is there something better?

Thanks,
Vikas

[0]: https://www.itsupportguides.com/tech-tips-tricks/how-to-offset-anchor-tag-link-using-css/

Re: Anchor tags on doc pages get positioned wrongly under top menu

[Davide Giannella <da...@apache.org>]

On 14/02/2016 17:42, Julian Sedding wrote:
> Hi Vikas
>
> I agree that having the anchor text hidden is a usability hazard. I
> tried your suggested approach in Firefox (via FireBug) and didn't have
> any success. However, a slight variation of the scheme, still relying
> on the ":target" pseudo selector, did the trick for me.
>
> h2 > a:target {
>     position: relative;
>     top: -40px;
> }
>
> I scoped the rule to the "h2" element, which is defined to have a
> height of 40px. I think it's then ok to repeat this value.
>
Another point I remember from my past in HTML+CSS is that instead of
using `px`, use `pt`. Rather than being a fixed amount of pixels which
will vary in rendition from device to device, it will vary according to
the user selected text size (points). Or was something around such
explanation. :)

HTH
Davide

Re: Anchor tags on doc pages get positioned wrongly under top menu

[Julian Sedding <js...@gmail.com>]

Hi Vikas

I agree that having the anchor text hidden is a usability hazard. I
tried your suggested approach in Firefox (via FireBug) and didn't have
any success. However, a slight variation of the scheme, still relying
on the ":target" pseudo selector, did the trick for me.

h2 > a:target {
    position: relative;
    top: -40px;
}

I scoped the rule to the "h2" element, which is defined to have a
height of 40px. I think it's then ok to repeat this value.

Regards
Julian


On Fri, Feb 12, 2016 at 6:24 PM, Vikas Saurabh <vi...@gmail.com> wrote:
> Hi,
>
> I'm sure we all have noticed that our anchor tags scroll the page a
> little too much such that the actual position gets hidden under the
> same menu.
>
> With google and this link [0], it seems, we can just plug-in
>
> ```
> :target:before {
> content:"";
> display:block;
> height:40px; /* fixed header height*/
> margin:-40px 0 0; /* negative fixed header height */
> }
> ```
> in oak-doc/src/site/resources/site.css to fix the issue.
>
> But, since I suck at html/css, I wasn't sure if this is fine. '40px'
> is manual hit-and-trial. Is there something better?
>
> Thanks,
> Vikas
>
> [0]: https://www.itsupportguides.com/tech-tips-tricks/how-to-offset-anchor-tag-link-using-css/