I have found a possible solution for this which so far seems to be working in Firefox and Google Chrome.
By defining a new css class .anchor:target {
padding-top: 65px; }
and then adding to all the targets the class="anchor".
I am not quite sure, however how "correct" this actually is and that the "padding-top" should not actually change the spaces between the elements in the actual layout in some cases. So not quite sure, as I have the impression that definitions of new HTML and CSS standards always change and one can search a lot on the many Q&A sites about problems like this or others and various "tricks" that people use, but usually always there is some doubt and some caveats.
It could take a lot of time to include this in all files. I have downloaded it all and will try to change it.
So far it also seems to work to just add :target {
padding-top: 65px; }
to the CSS, so this applies to all elements when they are targeted by an anchor link, and this idea of using a new class "anchor" was not necessary.
It does not seem to change the layout in any way, except for the case when the targeted element is an <a class="back"> "back to the top" link, which has the upward arrow as a background image. The image is then displayed 65 pixels above its usual place when one jumps to it through an anchor link.
So in this case one should maybe remove the anchor id from the "back to top" arrow element and put it inside some normal text part where this problem does not occur. Or maybe somehow one could change the css for the <a class="back"> somehow that it works with the new :target css which would make it all easier and not necessary to change thousands of html files then.
Maybe not the best topic to get lost thinking about much for too long. But just mentioning for the case that someone with more experience in this has an idea.
a.back:target {
position:relative;
top:68px;
}
The info, inspirations and simply ideas have been maybe enough. Seems to work. Does its?
No. Just puts it behind the transparent part. How could it possible.
Sure it works, just that the position of background is defined somewhere else. The text included version would not work since it is about the background image.
Added a.back:target and a.back:hover:target
a.back {
background:url('img/up1.gif') 0 0 no-repeat;
position:inherit;
top:-3px;
padding-left:16px;
padding-bottom:4px; /*zze addition to lift the sign up to be not hidden half*/
}
a.back:target {
background:url('img/up1.gif') 0 65px no-repeat;
}
a.back:hover {
background:url('img/up1-hover.gif') 0 0 no-repeat;
border:none;
}
a.back:hover:target {
background:url('img/up1-hover.gif') 0 65px no-repeat;
Added also a bottom for normal anchors, so its now real nice to see and no more so difficult like before.
:target {
padding-top:65px;
border-bottom:2px solid #4d94ff;
}
Not sure about the color, but that is Atma guesses just a matter of getting used to it. The background of the menu area is set white again.
Atma trusts that it look better now.
Made some additional edits in css. Tried to make it a little better for mobile devices, since it is a very poor browser that Atma has to test and the way of work is more a test by test rather a knowledge based, it a little bit limited.
To get something useful, its maybe good to write a "new" css for mobiles since the mobile browser seems not accept many kinds of stylings. How ever, here are the terrible hacks so far, but merely a test field.
/******************Mobile*************/
@media screen and (max-width: 680px) {
#H_crumbtrail {position:fixed;top:2px;left:0px;float:left;width:initial;}
#H_search {position:fixed;top:2px;right;0px;z-index:0;float:right;width:initial;}
#F_langSymbol_en,
#F_langSymbol_de {position:fixed;top:2px;clear:right;width:35px;}
#H_container,
#H_billboard,
#H_content,
#H_content_untranslated,
#H_homage{width:initial;}
#F_read,
#F_reload {right:0px;text-align:right;float:right}
input[type=text] {width:100px;position:relative;top:2px;right:1px;}
/*input[type="submit"] {position:relative;top:30px;right:1px;}*/
Diese Sektoren Bezuge sind "wundervoll", damit kann man so ziemlich alles treiben, ohne groß das html zu ändern.
Atma hat sich erlaubt die Fußnoten, wie schon lange "ersehnt", zu entschärfen, obgleich diese irgendwie ein Markenzeichen für einen ATI-Text waren. Deshalb auch gerne um Feedback, wenn die mächtigen Klammern lieber waren. Abstände sind damit nun auch nicht mehr nötig und Zeichen werden nicht mehr aufeinandere picken, im Gegenteil viel händisches ist damit wieder zurück zu bringen, das die Fußnoten nicht wie hingestellt und nicht abgeholt aussehen, wenn davor ein Leerraum ist.
a[href^="#fn-"] {
font-size:65%;
position:relative;
bottom:0.5em;
}