offsetLeft, offsetTop eines fließenden Textabsatzes

[Der Martin]

Hi,

offsetLeft und offsetTop sind relativ zum Elternelement.

Das weiß ich und lasse die Elternelemente durchlaufen:

was aber, wenn ich mir die Markup-Struktur ansehe, vielleicht doch nicht nötig ist.

Die offsets der Vorfahrenelemente

Verstehe ich nicht, HTML-mäßig davor auf gleicher Ebene ist die Grafik. Die wäre wohl ein sibling, aber das Stichwort fehlt in deinem Link.

Stimmt. Aber der Ansatz ist richtig. Sie haben dasselbe Elternelement, also beziehen sich ihre offsetTop und offsetLeft auf denselben Referenzpunkt.

<div id=canvas_1 class=mb05 style="position:relative; height:10em;">
  <div class=li style="position:relative; width:10em; height:10em;">
    <img src="img/animiertes_segelboot.gif" style="width:100%;height:100%" alt="Segelschiff" />
    <div class=anker id=fock        style="left:20%; top:65%"></div>
    <div class=anker id=gross       style="left:42%; top:50%"></div>
    <div class=anker id=besan       style="left:65%; top:50%"></div>
  </div>
  <p><b>Segel eines Dreimasters:</b></p>
  <p id=fock_x>Fock</p>
  <p id=gross_x>Grosssegel</p>
  <p id=besan_x>Besansegel</p>
  <div class=clear></div>
  <script>
  // die transparente SVG-Grafik, die id=canvas_1 mit position:absolute vollflächig bedeckt
  </script>
</div>

Und die p-Elemente sind gefloatet?

So sollte es NICHT aussehen, die roten Linien müssen nach rechts zu den Texten laufen.

Javascript findet aber nicht dessen Abstand zum linken Rand des SVG

Ja, das Problem ist ein anderes. Im DOM-Inspektor würdest du sehen, dass der linke Rand der p-Elemente tatsächlich ganz links liegt. Denn float verschiebt nicht das ganze Blockelement, sondern nur dessen Inline-Inhalt.

Wie man "sauber" an diesen Versatz kommt, kann ich dir im Moment auch nicht sagen - mir fällt nur ein ganz dreckiger Workaround ein: Setze den Text innerhalb der Absätze in ein span-Element und bestimme dessen offsetLeft.

PS: groß schreibt man auch nach der Rechtschreibdeform noch mit ß. Nur nach einem kurzen Vokal ist ß zu ss geworden (z.B. Fluss, krass).

Einen schönen Tag noch
 Martin