Anker Link auf div box

[Rolf B]

Hallo MartinK,

zum iPhone-Problem kann ich nichts sagen.

Um dein anderes Problem nachzuvollziehen, musste ich erstmal dein Dokument manipulieren. Warum hast Du <meta name="viewport" content="width=1020"> da drin? Und wieso zeigen deine Screenshots ein Layout, das dieser Viewport-Angabe nicht entspricht? Eine responsive Seite braucht

<meta name="viewport" content="width=device-width, initial-scale=1" >

Das habe ich eingesetzt, und dann hatte ich auch das Layout, dass Du zeigst.

Die Anzeige scrollt, weil du die entsprechenden divs per Link anspringst, um sie dann mittels :target Pseudoklasse von opacity:0 auf opacity:1 umzuschalten. Wie Du siehst, ist das nicht die beste Idee, wenn das Dokument nicht vollständig auf den Bildschirm passt.

Wenn Du eine ID per URL-Hash ansprichst, wird die Seite so positioniert, dass diese ID oben steht. Ganz oben. Egal was da noch so positioniert ist. Zum Beispiel eine fixed navigation. Deine modalDialog divs sind Kinder von .eternit-map und befinden sich alle an deren oberem Rand. Darum wird dieser obere Rand durch das Verlinken auf y=0 im Viewport positioniert, und man sieht nichts mehr.

Dieses Positionieren wird nur dann begrenzt oder verhindert, wenn das Dokument nicht lang genug ist, um die id an den oberen Rand zu bringen. Das ist in der Desktop-Ansicht der Fall.

Was tun?

Die ganz einfache Lösung: Hänge deine .modalDialog Boxen höher. Was etwas Brachialgewalt braucht, denn Typo3 pflanzt etliche Elemente mit position:relative in den Elternpfad, so dass ein Umhängen der .modalDialog divs in ein besser geeignetes Elternelement nicht so simpel ist.

Der am wenigsten komplizierte Weg wäre, wenn Du .modalDialog die CSS Eigenschaften position:absolute und top:-500px gibst. Dadurch sind diese divs ziemlich sicher oberhalb des Dokumentanfangs, mit der Folge, dass das Dokument zum Anfang scrollt, wenn ein Popup ausgewählt wird. Die .container divs platzierst Du dann mit top:450px wieder in die Karte.

Eine bessere Lösung würde die Popups aber nicht mit der :target Eigenschaft öffnen, sondern JavaScript verwenden. Dadurch entfällt der Versuch des Browsers, beim Anklicken eines Bezirks das Dokument zu scrollen.

Rolf