Absolute Positionierung von Bilder

Hallo liebe Joomla Gemeinde
nach nächtelangem rumfummeln habe ich mich entschlossen, mich hier als Anfänger zu outen.
Ich schreibe meine alte 2.5 Joomla Seite in der aktuellen Version 3.6.5 komplett neu.
Im Hauptbeitrag hatte ich mit Hilfe von Tabellen sechs Bilder kreisförmig um ein siebtes angeordnet.
Nun möchte ich diese Bilder gerne ohne Tabellen/Zellen/Zeilen mittels einer absoluten Position einfügen.
Leider unterscheidet sich das Ergebnis der Bildgrösse und Position im JCE Editor, JCE Preview und der Liveseite
(dermodellbauer.ch) erheblich und ich weiss momentan nicht warum das so ist.

Hat mir bitte jemand einen Tipp was ich hier nicht richtig mache?

Liebe Grüsse in die Nacht
Peter




Code:
<p><a href="images/home/h01c.gif" rel="zoom-position: inner" class="MagicZoomPlus"><img src="images/home/h01b.gif" alt="" width="100" height="100" style="display: block; position: absolute; top: 0pt; left: 30%;" /></a></p>
<p><a href="images/home/h02c.gif" rel="zoom-position: inner" class="MagicZoomPlus"><img src="images/home/h02b.gif" alt="" width="100" height="100" style="display: block; position: absolute; top: 0pt; right: 30%;" /></a></p>
<p><a href="images/home/h03c.gif" rel="zoom-position: inner" class="MagicZoomPlus"><img src="images/home/h03b.gif" alt="" width="100" height="100" style="display: block; position: absolute; top: 250px; left: 20%;" /></a></p>
<p><a href="images/home/h04c.gif" rel="zoom-position: inner" class="MagicZoomPlus"><img src="images/home/h04b.gif" alt="" width="100" height="100" style="display: block; position: absolute; top: 250px; right: 20%;" /></a></p>
<p><a href="images/home/h05c.gif" rel="zoom-position: inner" class="MagicZoomPlus"><img src="images/home/h05b.gif" alt="" width="100" height="100" style="display: block; position: absolute; top: 450px; left: 30%;" /></a></p>
<p><a href="images/home/h06c.gif" rel="zoom-position: inner" class="MagicZoomPlus"><img src="images/home/h06b.gif" alt="" width="100" height="100" style="display: block; position: absolute; top: 450px; right: 30%;" /></a></p>
<p><a href="images/home/m35_1.gif" rel="zoom-position: inner" class="MagicZoomPlus"><img src="images/home/m35_1.gif" alt="" width="300" height="300" style="display: block; position: absolute; top: 150px; left: 38%; z-index: -1; margin-left: auto; margin-right: auto;" /></a></p>
<p><img src="images/home/under-construction.png" alt="fixed position logo" height="300" style="position: fixed; right: 0px; bottom: 200px;" title="info in fixed position" /></p>

Interessante Frage, bin auch gespannt auf Antworten.

Ich denke mal dass es wohl nicht so einfach ist, sodass es dann auf allen Bildschirm- und Handygrössen auch passend aussieht.

Grüsse Brigitta

Hoi Modellbauer und willkommen im Forum.
Sagen wir mal so: Es ehrt dich, von Tabellenlayouts wegzugehen. Aber: Du weisst ja nicht, was ein Endgerät (sprich: Browser) kann, bezüglich Auflösung und so. Das Magic Buzzword heisst: Responsiv! Da ist meines Erachtens mit Gewusel um nichts zu machen, das Layout muss zerfallen, sobald die Auflösung nicht mehr mitmachen mag. Auf jedem mobilen Browser muss das automatisch scheisse aussehen, auch wenn dein Syntax dann richtig wäre (in Paragrafen verpackt haut eh nicht, weil das ein Blockelement ist - wenn schon müsstest du entweder eine DIV-Orgie verwenden, oder - moderner- mit Bootstrap-Spalten was machen). Forget it, es ist den Aufwand nicht wert.
Wieso packst du die 7 Bilder nicht in ein Bild und machst das dann responsive, so wie mit

Genau so mache ich es in der Regel auch (ein Foto aus allen "Einzelteilen").
Schon mal gut, dass dies hiermit bestätigt wurde - Danke Chris
Schönen Tag Brigitta

Liebe Alle

Da hätte ich gleich eine Anschlussfrage.

Ich hatte dies mal genau so gemacht (allerdings nicht responsive). Dabei hatte ich als image map alle einzelnen Regionen mit entsprechenden links unterlegt. Das hatte eigentlöich sehr gut funktioniert. Später habe ich die Seite dann responsive gemacht, aber die links auf dem Bild nicht verändert. Beim öffnen im Handy wurde das Bild dann richtig verkleinert, aber die Links blieben natürlich absolut und waren dann am falschen Ort. Weil ich nur zwei Bereiche hatte, habe ich die Bilder dann einzeln verwendet und als ganzes verlinkt. Das hat dann gut funktioniert.

Nun meine Frage: wäre es möglich (ohne grosse Programierarbeit) die Links als relative Adressen anzugeben damit sie mit dem Verkleinern des Bildes immer noch passen?

Vielen Dank schon mal und viele Grüsse
Urs

Hoi Urs,
Image Maps sind ein Relikt aus HTML 4 Zeiten und werden nicht mehr oft verwendet. Ich habe einen Artikel zum Thema gefunden, den ich dir zum Studium empfehlen kann:
Responsive Image map

Hoi Chris

Super! Vielen Dank!

Gruss
Urs

Danke für tolle Tipps!