Willkommen, Gast
Benutzername: Passwort: Angemeldet bleiben:
  • Seite:
  • 1

THEMA: Absolute Positionierung von Bilder

Absolute Positionierung von Bilder 11 Apr 2017 23:51 #44508

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>
Anhang:

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Letzte Änderung: von DerModellbauer.

Absolute Positionierung von Bilder 12 Apr 2017 08:36 #44509

  • Brigitta
  • Brigittas Avatar
  • Offline
  • Silber Mitglied
  • Silber Mitglied
  • Beiträge: 155
  • Dank erhalten: 6
  • Punkte: 691.00
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

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Wissenschaft ist der aktuelle Stand des Irrtums.
(Dr. Eckart von Hirschhausen)

www.personal-office.ch

Absolute Positionierung von Bilder 13 Apr 2017 07:28 #44510

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
position:absolute
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
img {
  max-width: 100%;
  height: auto;
}
Folgende Benutzer bedankten sich: Brigitta, DerModellbauer

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

/* --- übrigens: Firebug gehört in jede Wekzeugtrucke! --- */
Joomla 3 in 10 einfachen Schritten von Hagen Graf
Wer nicht über den Anstand verfügt, ein kleines "Thänx" auszusprechen, muss sich nicht wundern, künftig ignoriert zu werden!
Ich biete keinen Support via PM oder Mail.
Letzte Änderung: von Chris Hoefliger.

Absolute Positionierung von Bilder 13 Apr 2017 08:43 #44511

  • Brigitta
  • Brigittas Avatar
  • Offline
  • Silber Mitglied
  • Silber Mitglied
  • Beiträge: 155
  • Dank erhalten: 6
  • Punkte: 691.00
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

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Wissenschaft ist der aktuelle Stand des Irrtums.
(Dr. Eckart von Hirschhausen)

www.personal-office.ch

Absolute Positionierung von Bilder 13 Apr 2017 09:48 #44512

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

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Viele Grüsse
King Louis

Absolute Positionierung von Bilder 13 Apr 2017 09:51 #44513

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
Folgende Benutzer bedankten sich: King Louis, DerModellbauer

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

/* --- übrigens: Firebug gehört in jede Wekzeugtrucke! --- */
Joomla 3 in 10 einfachen Schritten von Hagen Graf
Wer nicht über den Anstand verfügt, ein kleines "Thänx" auszusprechen, muss sich nicht wundern, künftig ignoriert zu werden!
Ich biete keinen Support via PM oder Mail.
Letzte Änderung: von Chris Hoefliger.

Absolute Positionierung von Bilder 13 Apr 2017 09:56 #44514

Hoi Chris

Super! Vielen Dank!

Gruss
Urs

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Viele Grüsse
King Louis

Absolute Positionierung von Bilder 12 Jun 2017 22:08 #44725

  • minze
  • minzes Avatar
  • Offline
  • Neu hier
  • Neu hier
  • Beiträge: 1
  • Dank erhalten: 0
  • Punkte: 0.00
Danke für tolle Tipps!

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

  • Seite:
  • 1