#TOP - Link funktioniert nicht

designfjord · Post by **designfjord** » Wed Sep 03, 2014 5:02 pm

Hallo
ich muss blind sein!

Der Link "Seitenanfang" (<?php echo top();?>) funktioniert mit einem Template nicht, obwohl dort im Template steht:

Code: Select all

<body id="body" <?php echo onload();?>>
  <!-- utf-8 check: äöüß -->
  <a name="TOP"></a>
......

Wenn ich den Quelltext aus dem Browser kopiere und als HTML-Datei abspeichere klappts aber

testen : klick-hier

Für Tipps dankbar
Jochen

cmb · Post by **cmb** » Wed Sep 03, 2014 5:33 pm

designfjord wrote:Wenn ich den Quelltext aus dem Browser kopiere und als HTML-Datei abspeichere klappts aber

Bei mir (Chrome 37 64-bit) klappt es sogar, wenn ich nach dem Klick auf den Link einfach in der Adressleiste noch mal Enter drücke.

Ich vermute, das Problem kommt durch das invalide HTML zustande (das DOM im Browser enthält ein leeres <head>, und das, was eigentlich dort enthalten sein sollte, befindet sich am Anfang vom <body>). Wo nun genau das Problem liegt, kann ich nicht sagen. Unter HTML5 ist das <html> Tag optional, glaube ich -- ich würde es aber dennoch notieren (v.a. wenn das schließende </html> da ist). Auch das BOM in template.htm könnte Problem machen, da der DOCTYPE evtl. vom Browser nicht akzeptiert wird, und dieser dann in den Quirksmode fällt. Alles in allem ist es vermutlich das beste, wenn Du einfach http://validator.w3.org/check?verbose=1 ... e.de/?ESIS von oben nach unten abarbeitest (die meisten Fehler lösen sich dann zwischendurch vermutlich in Luft auf).

Übrigens wird <a name=""> nicht mehr empfohlen; statt dessen sollte <a id=""> verwendet werden. (Leider spielt der TinyMCE da nicht mit, aber beim Template kann man das ja zumindest machen.)

designfjord · Post by **designfjord** » Wed Sep 03, 2014 5:43 pm

Danke.

...auf den Validator hätte ich auch kommen können

cmb · Post by **cmb** » Wed Sep 03, 2014 8:54 pm

cmb wrote:Ich vermute, das Problem kommt durch das invalide HTML zustande

Sieht nicht wirklich so aus.

Interessant: wenn ich CSS deaktiviere, dann funktioniert der "Seitenanfang"-Link. Es genügt schon, wenn ich #frameLeft, #frameLeftBorder und #frameRight position:static setze (beim FF muss ich für body noch overflow:scroll definieren, damit ich überhaupt zum Link scrollen kann).

Wenn ich die Seite dann neu aufrufe und in der JS-Konsole window.scroll(0,0) eingebe, dann passiert auch nichts (eigentlich sollte dann ganz nach oben gescrollt werden). Irgendwie scheint das Layout die Browser zu verwirren (zumindest Chrome und Firefox).

designfjord · Post by **designfjord** » Sun Sep 07, 2014 9:40 pm

cmb wrote:Irgendwie scheint das Layout die Browser zu verwirren (zumindest Chrome und Firefox).

Also Chrome, Firefox, Opera, IE9 und sogar der Browser von Kindle stellen die Seite wie beabsichtigt dar, verweigern aber geschlossen nach wie vor diesen internen Link.

Naja, dann eben nicht...

cmb · Post by **cmb** » Mon Sep 08, 2014 10:50 am

designfjord wrote:
cmb wrote:Irgendwie scheint das Layout die Browser zu verwirren (zumindest Chrome und Firefox).
Also Chrome, Firefox, Opera, IE9 und sogar der Browser von Kindle stellen die Seite wie beabsichtigt dar, verweigern aber geschlossen nach wie vor diesen internen Link.

Ich habe mir das noch mal angeschaut. Setze ich mitten in der rechten Spalte eine ID, dann kann diese angesprungen werden. Aber weder #body, #wrapper noch #frameRight funktionieren. Was aber klappt, ist wenn ich div#top entferne, und direkt oberhalb von div#header folgendes Element einfüge:

Code: Select all

<div id="TOP"></div>

(Wichtig ist, dass TOP groß geschrieben wird.)

lck · Post by **lck** » Mon Sep 08, 2014 11:11 am

Oder anstatt

Code: Select all

<a href="#TOP">Seitenanfang</a>

einfach

Code: Select all

<a href="#header">Seitenanfang</a>

designfjord · Post by **designfjord** » Wed Sep 10, 2014 10:13 pm

Danke stoa und cmb!

Funktioniert!

Wo der TOP-Anker jetzt positioniert ist (vor dem Header), macht es zwar fast mehr Sinn, aber seltsam ist das Verhalten meiner Meinung nach schon.

Danke Jochen

cmb · Post by **cmb** » Wed Sep 10, 2014 11:28 pm

designfjord wrote:Wo der TOP-Anker jetzt positioniert ist (vor dem Header), macht es zwar fast mehr Sinn, aber seltsam ist das Verhalten meiner Meinung nach schon.

Ja, das ist tatsächlich seltsam. Ich habe aber noch mal drüber nachgedacht, und das Verhalten wird nachvollziehbar, wenn man bedenkt, dass der vertikale Scrollbalken zu div#frameRight gehört, und nicht etwa außerhalb des <html> Elements liegt wie es sonst "üblich" ist. Für den Browser passt also die gesamte Seite in den Viewport, und wenn er dann den Anfang der Seite anzeigen soll, muss er nichts machen.

Anders ausgedrückt: die Höhe von <body> ist 0px, was man in den Developer-Tools des Browsers sehen kann. Das liegt daran, dass dessen drei Enkel-Elemente allesamt aus dem Fluß heraus gerissen sind (position fixed bzw. absolute), und damit die innere Höhe von div#wrapper 0px ist. Das <html> Element hat eine Höhe von 30px, weil div#wrapper ein margin-top von 30px hat. Bei einer Höhe von 30px gibt es aber nichts zu scrollen, wenn der Viewport wenigstens 30px hoch ist (was wohl fast immer der Fall sein dürfte).

Danke für die interessante Fragestellung; auch wenn ich die Details des Phänomens nicht wirklich verstehe, habe ich wohl doch ein bisschen was dazu gelernt.

CMSimple_XH–Forum

#TOP - Link funktioniert nicht

#TOP - Link funktioniert nicht

Re: #TOP - Link funktioniert nicht

Re: #TOP - Link funktioniert nicht

Re: #TOP - Link funktioniert nicht

Re: #TOP - Link funktioniert nicht

Re: #TOP - Link funktioniert nicht

Re: #TOP - Link funktioniert nicht

Re: #TOP - Link funktioniert nicht(gelöst)

Re: #TOP - Link funktioniert nicht