iFrame im Platzhalter zentrieren

christian-juhasz schrieb am 26.01.2018 um 09:33 Uhr

Servus,

wie ist es möglich, dass ein iFrame, welches via Platzhalter auf einer Seite eingebunden wird, immer zentriert dargestellt wird.

Hintergrund:

Ich muss mehrere iFrames auf einer Page einfügen, welche allerdings unterschiedliche Breiten haben. Diese iFrames sollen hinterher immer zentriert auf der HP dargestellt werden. Ich möchte mir aber keinen Kopf darüber machen müssen, wie breit der Platzhalter sein muss, damit keine horizontalen Scrollbalken auftauchen. Die Idee war, den Platzhalter einfach über die komplette Seitenbreite laufen zu lassen und den Inhalt des Platzhalters dafür immer zentriert dar zu stellen.

Gruss, Chris

Kommentare

BeRo schrieb am 27.01.2018 um 00:04 Uhr

Wenn Du im iframe Code die Werte für die Größe der einzufügenden Seite auf je 100% setzt, wird der Seiteninhalt automatisch horizontal zentriert, wenn der Platzhalter breiter als der Inhalt ist.

So kann ein passender iframe Code aussehen:

<iframe src="https://www.magix.info/de/forum/" width="100%" height="100%" frameborder="0" scrolling="auto" name="xara_iframe" ><p>Your browser does not support iframes.</p></iframe>

Probier's mal damit...

Viel Erfolg

christian-juhasz schrieb am 27.01.2018 um 10:40 Uhr

Servus BeRo,

das habe ich bei mir bereits so getestet, aber es wird nicht zentriert.

Was bewirkt das scrolling="auto" ?

Gruss, Chris

marboe schrieb am 27.01.2018 um 12:19 Uhr

Was bewirkt das scrolling="auto" ?

Dass bei Bedarf automatisch ein Scrollbalken eingeblendet wird.

Gruß marboe

christian-juhasz schrieb am 27.01.2018 um 12:37 Uhr

Ah, Danke.

Heisst das im Umkehrschluss, wenn ich den Wert aus "0" setze, dass nie ein Balken kommt, auch wenn einer notwendig wäre, das die Seiter länger ist als der Screen?

Gruss, Chris

marboe schrieb am 27.01.2018 um 14:25 Uhr

dass nie ein Balken kommt, auch wenn einer notwendig wäre, das die Seiter länger ist als der Screen?

Richtig.

Die korrekte Syntax lautet: no

Gruß marboe

BeRo schrieb am 27.01.2018 um 23:28 Uhr

[...] das habe ich bei mir bereits so getestet, aber es wird nicht zentriert. [...]

Die Ursache ist die Programmierung, mit der DHL das Retouren Formular erstellt hat. Die Ausgabe wird PHP gesteuert und mit JS und CSS "aufgehübscht".
Wenn Du so ein "Konstrukt" mit einem iframe in deine Seite einbindest, bleiben die ursprünglichen Formatierungen-, Positions- und Größenangaben erhalten. Damit werden die Standardeinstellungen überschrieben, die der WD normalerweise für die per iframe eingebundenen Inhalte verwendet. 😖

Aber, "kein Schatten ohne Licht", wenn ich den bekannten Sinnspruch mal umdrehen darf... 😇

Du kannst die DHL Vorgaben teilweise wieder rückgängig machen, wenn Du ebenfalls CSS Code einsetzt. Damit kannst Du z. B. die Größe- und die Position des eingebundenen Formulars so korrigieren, dass es problemlos in den vorgesehenen Platzhalter passt.

So kann das aussehen:

Hier noch der dazu nötige iframe Code:

<iframe style="display: block; position: absolute; transform: scale(0.85);
transform-origin: 13% 0%; width: 1060px; height: 850px;"
src="https://amsel.dpwn.net/abholportal/gw/lp/portal/handyreparaturmayer/customer/RpOrder.action?delivery=RetourenLager01"
scrolling="no" name="xara_iframe"><p>Your browser does not support iframes.</p>
</iframe>

Der "Trick" ist die im Code eingebundene CSS Sequenz "style=.........", die dafür sorgt, dass die DHL Seite auf 85% verkleinert wird "transform: scale(0.85);" und dass die Position der Ausgabe im Platzhalter optimiert wird "transform-origin: 13% 0%;". In der Positionsangabe steht der erste Wert für die "x" Achse und der zweite Wert für die "y" Achse.

Und, wenn Du schon planst, Dich in PHP einzuarbeiten, wäre das die Gelegenheit, gleich noch einen Blick in ein CSS Tutorial zu werfen. 😇

Viel Erfolg

christian-juhasz schrieb am 28.01.2018 um 00:11 Uhr

Super, danke!

Werd ich gleich morgen testen.

Wenn das so weitergeht, muss ich Dich noch im Impressum erwähnen. 😉

Gruss, Chris