1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

IFrame responsive und zentriert

Dieses Thema im Forum "Design" wurde erstellt von willi008, 31. Mai 2017.

Schlagworte:
  1. willi008

    willi008 Active Member

    Registriert seit:
    18. März 2017
    Beiträge:
    37
    Zustimmungen:
    0
    Hallo!

    Ich möchte ein Inlineframe (IFrame) einbinden. Richtig, es gibt kostenlose Generatoren. Leider habe ich nicht das Passende gefunden. Der IFrame soll responsive und zentriert in der Websitemitte sein. Leider habe ich keine Programmierkenntnisse. Kann jemand den HTML- Code erstellen?

    Vielen Dank für Antworten

    [FONT=Arial, sans-serif]willi008[/FONT]
     
  2. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.341
    Zustimmungen:
    417
    Responsive und Iframe widersprechen sich. Du solltest dir was anderes einfallen lassen
     
  3. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.557
    Zustimmungen:
    84
    Nicht zwangsläufig. Wenn der Inhalt komplett Fluid ist oder man selbst Zugriff auf den Content (postMessage) hat, geht das schon.

    Aber für die allermeisten Fälle hast du Recht :)
     
  4. willi008

    willi008 Active Member

    Registriert seit:
    18. März 2017
    Beiträge:
    37
    Zustimmungen:
    0
    Der linke und rechte Rand des Iframes soll 130px von der jeweiligen Bildschirmkante entfernt sein. Wenn ich left=130px festlege, bleibt die Kante auch auf kleinen Bildschirmen bestehen und passt sich nicht automatisch der Verkleinerung an. Was jemand dazu Rat?

    Viele Grüße,

    willi008
     
  5. Edi

    Edi Well-Known Member

    Registriert seit:
    26. Juli 2006
    Beiträge:
    3.728
    Zustimmungen:
    1
  6. willi008

    willi008 Active Member

    Registriert seit:
    18. März 2017
    Beiträge:
    37
    Zustimmungen:
    0
    Habe beide Seiten durchgelesen. Aber als absoluter Anfänger bekomme ich nicht heraus wie oder welche Media Queries ich nun verwenden soll. Hat jemand eine Idee?

    Viele Grüße,

    willi008
     
  7. Edi

    Edi Well-Known Member

    Registriert seit:
    26. Juli 2006
    Beiträge:
    3.728
    Zustimmungen:
    1
    Beide Seiten erklären einfach und mit Beispielen Media Queries... Was ist nicht klar?
     
  8. willi008

    willi008 Active Member

    Registriert seit:
    18. März 2017
    Beiträge:
    37
    Zustimmungen:
    0
    Hallo!

    Ich habe vom Programmieren keine Erfahrung. Die Webseite um die es geht ist www.flyradar.org Oben sehen Sie das IFrame, das noch zu weit links ist und wo die Höhe nicht 100% ist. Um das Iframe zu zentrieren damit es mit dem unter Teil links und rechts abschließt suche ich eine Lösung. Wenn ich bei dem IFramecode bei left: 134px eingebe ist es auf meinem Bildschirm mit dem unteren Teil bündig. Aber dieser Rand bleibt bei kleineren Ausgabegeräten starr bestehen. Das ist das Problem. Vielleicht liegt im folgenden Link eine Lösung? https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Tipps_und_Tricks_f%C3%BCr_media_queries#relative_Gr.C3.B6.C3.9Fen

    Viele Grüße,

    willi008
     
  9. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.557
    Zustimmungen:
    84
    Genau genommen ist es lingsbündig und der Rest der Seite zentriert. Da wird die Lösung mit einem festen Abstand links icht viel bringen.

    Versuch es mal so:

    Dem Div, das den iFrame umschließt, gibts du eine Klasse. Z.b. Class="iframe-wrap".
    Dann ergänzt du folgende CSS Regeln unter "zusätzliches CSS":
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

    Was meinst du damit? Höhe 100% bedeutet, so hoch wie das Browser-Fenster. Soll das so sein?
     
  10. Edi

    Edi Well-Known Member

    Registriert seit:
    26. Juli 2006
    Beiträge:
    3.728
    Zustimmungen:
    1
    Oder Du versuchst es so:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  11. willi008

    willi008 Active Member

    Registriert seit:
    18. März 2017
    Beiträge:
    37
    Zustimmungen:
    0
    Hallo!

    Vielen herzlichen Dank. Die erste Lösung mit zusätzlichem CSS war erfolgreich!

    Viele Grüße,

    willi008
     
  12. Edi

    Edi Well-Known Member

    Registriert seit:
    26. Juli 2006
    Beiträge:
    3.728
    Zustimmungen:
    1
    Auch die zweite Lösung wäre "zusätzliches CSS". ;)
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden