Iframes nebeneinander mobil-geeignet

    Hallo, ich möchte auf einer Wordpress-Seite zwei Iframes nebeneinader platzieren.
    Schön wäre, wenn ich nicht nur bestimmen könnte, dass Iframe 1 ganz links ist und Iframe 2 ganz rechts,
    sondern dass ich z.B. angeben kann, dass Iframe 1 20px entfernt von links anfängt und Iframe 2 nach 100px folgt.
    Vielleicht ist es auch zu umständlich wie ich mir das vorstelle, wie wird das sonst von Euch gehandhabt?
    Wichtig ist mir, dass dabei die mobile Ansicht am Handy, Tablet etc nicht gestört wird, sondern es auch dort sinnvoll angezeigt wird.

    Hier ein Link zu der aktuellen Seite, es geht um den Ifrane für den Pollenflug und den Iframe für die Wetterwarnungen: http://bit.ly/2sbgis4

    LG Tim

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    IFrame ist generell für mobile Anwendungen in den meisten Fällen ungeeignet.
    In deinem Fall kannst du die beiden iFrame per float nebeneinander platzieren. Die Abstände kannst du per margin-left oder margin-right variieren.
    Das nächste Problem wird die Höhe sein. Ein height: auto; hilft dir hier nicht weiter. Eine Möglichkeit wäre per JavaScript die Höhe dynamisch zu variieren.

    Du hast deinen ersten Iframe innerhalb eines <p><iframe..></iframe></p> platziert. das <p> beansprucht 100% der Breite und verhindert, so wie ich es einschätze, jeglichen Versuch irgendwas neben das erste Iframe zu positionieren.
    Versuche mal diesem <p> eine Klasse zuzuteilen (zb <p class="wetterframe">)
    Diese Klasse solltest du dann eine Breite passend zum Iframe geben, das Attribut float: left; und margin ganz nach deinen Bedürfnissen.
    Der folgende Iframe muss dann auch mit float: left; positioniert werden - sonstiges wieder nach deinen Bedürfnissen
    Und nicht vergessen... nach dem Frame das float durch clear: all wieder aufzuheben.

    Das ist das, was dir Wordpress 'vorgaukelt' - du siehst sie nicht in der Textansicht, aber sie sind da. Werden automatisch von Wordpress gesetzt.
    Was du aber versuchen solltest, ist Wordpress zu überlisten und ein <p class="irgendein_name"><iframe....></iframe></p> in deine Textansicht des Dokumentes zu schreiben.
    Das sollte Wordpress dann auch so übernehmen und nicht noch zusätzlich irgendwelche HTML Codes in dein Dokument schmuggeln.
    Mit dem zugewiesenen Klassennamen kannst du dann mit CSS gezielt dieses <p>-Element ansprechen und formatieren.


    Nachtrag:
    Es wäre vielleicht sogar sinnvoller, statt des <p>-Elementes ein <div>- Element zu nutzen. also so..

    <div class="irgendein_name"><iframe....></iframe></div>

    Einmal editiert, zuletzt von Sailor56 (6. Juli 2017 um 07:41)

    Habe gerade nochmal näher auf dein Problem geschaut! Es ist sogar noch etwas komplizierter, denn nicht nur der IFrame, sondern auch das darüber liegende Bild befinden sich innerhalb des <p>...</p>.
    Hier mal ein Screenshot, wie das mit dem FireFox Inspector aussieht.
    Dieser blau hinterlegte Bereich im oberen Teil markiert die Ausdehnung des <p> Elementes, dass im unteren Code-Teil markiert ist!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden