Dugh Dugh: iFRAMES richtig anordnen

Guten Abend zusammen!

Mein aktuelles Website-Projekt ist ein kleines, das aus genau zwei Basis-Komponenten besteht. Die index.htm verweist auf zwei iframes, in denen jeweils eine htm-Datei lauert. Die erste steht als Einleitung über der zweiten, in der ständig neue Artikel eingefügt werden.

Die Basisprogrammierung mache ich auf einem Mini-Notebook mit 1800 x 1200 px. Die Größenangaben definiere ich in Prozent. Was auf dem Mini prächtig funktioniert, nämlich, dass die beiden iframes brav übereinander erscheinen, klappt auf anderen, größeren Monitoren leider erst einmal nicht. Einleitung und Artikel erscheinen überraschenderweise nebeneinander.

Vielen Dank für jeden Tipp!

Dugh Dugh

  1. @@Dugh Dugh

    Einleitung und Artikel erscheinen überraschenderweise nebeneinander.

    Link zu deiner Seite und relevanter Quelltext erscheinen überraschenderweise hier gar nicht.

    LLAP 🖖

    --
    „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
    „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

    —Marc-Uwe Kling
  2. Hallo Dugh,

    iframes sind inline Elemente, d.h. wenn Platz genug ist, stellt der Browser sie nebeneinander. Das kannst du ändern, indem du den iframes per CSS die Eigenschaft display:block gibst.

    Eine Alternative könnte eine Flexbox mit vertikaler Anordnung sein. Es hat dann aber schon einen Smell - baust du Framesets mit iframes nach?

    Ob zwei iframes übereinander grundsätzlich die beste Idee sind, ist die Frage. Mein Gefühl sagt Nein, aber für Argumente müsste man mehr über deine Seite und die bei dir vorliegenden Sachzwänge wissen. Magst du davon erzählen? Vielleicht gibt es für deine Aufgabe Lösungen, die dir weniger Probleme bereiten.

    Rolf

    --
    sumpsi - posui - clusi
    1. Hallo Rolf,

      als allererstes ein herzliches Dankeschön für Deinen ausgesprochen klaren Ton, der erkennen lässt, dass Du gerne erst einmal weisst, um was es geht! Mind. drei Küsschen!

      Die Eigenschaft für die iframes habe ich eben ausprobiert, funktioniert leider aber noch nicht, Aber auf diesem Pfad werde ich mal nach der nächsten Abzweigung suchen.

      Die Sache mit dem Stacken der iframes habe ich aus anderen, allerdings meist CMS/PHP-gestrickten Seiten geklaut. Für meine Zwecke sind CMS-Seiten schlicht mit Kanonen auf Spatzen geschossen, das Stacken vom Layout her aber durchaus sinnvoll.

      Ich kämpfe weiter...

      Schlafts gut! DD Achja - und DANKE!

      1. @Rolf,

        man sollte vor der Behautung "funktioniert nicht" schon mal auf Tippfehler achten! Natürlich funktioniert {display:block;} wenn man sie nicht in den CSS Block "iframes" sondern "iframe" setzt!

        DANKE!! Hab gerade keine Asche für meine Haupt da, aber hole die Dusche demnächst nach 😀

        DD

      2. Hallo Dugh,

        wenn es nicht funktioniert, hast Du vielleicht etwas falsch gemacht. Wenn Du deinen Code nicht zeigst, können wir da nur schlecht Hinweise geben.

        Du kannst z.B. jsfiddle benutzen, um Teile zu demonstrieren (bei iframes ist das allerdings so leicht), hier ein Beispiel von mir, dass zwei Dummytexte von meiner (ungenutzten) Homepage einbindet:

        https://jsfiddle.net/tna20hoq/

        Edit: Ah 😆 - Parallelarbeit...
        Schön, dass Du es selbst gefunden hast.

        Rolf

        --
        sumpsi - posui - clusi
      3. Hallo Dugh Dugh,

        das Stacken vom Layout her aber durchaus sinnvoll.

        Es ist nur sinnvoll, wenn die geframeten Seiten außerhalb deiner Kontrolle stehen, bzw. auch ungeframed anderswo sinnvoll existieren können.

        Zunächst mal würde ich darüber nachdenken, den Kopfteil und den Listenteil in zwei Boxen einer normalen HTML Seite zu bringen. Das hat insofern Vorteile, dass Du dann nur ein Dokument hast und ggf. mit JavaScript übergreifend Dinge tun kannst, die Dir die Isolation der iframes erschweren könnte.

        Du wolltest ja auch erreichen, dass der obere iframe aus dem Bild gescrollt wird, sobald man anfängt, etwas im unteren iframe zu klicken. Solche Operationen sind - denke ich - einfacher, wenn alles ein DOkument ist. Ich würde allerdings deinen konkreten Plan ebenfalls nicht umsetzen, denn nichts ist lästiger als schüchterne Inhalte, die bei Klick mit der Maus abrupt woanders hinhüpfen, so dass der zweite Mausklick, den man schon im Finger hatte, die falsche Stelle trifft. Wenn der Kopfteil nicht zu groß ist, dann ist ein einziges Dokument, dass keinen in sich scollenden iframe enthält, die einfachere Lösung. Man dreht kurz am Mausrädchen oder wischt kurz nach oben - und der Kopfteil ist weg. Mit Tastatur mag es umständlicher sein, je nach dem, wieviele interaktive Elemente über der Liste stehen, aber für sowas gibt es Start-Links, also ein <a> Element ganz oben, das als erstes den Fokus bekommt, und den Sprung zu deinem Listenanker auslöst. Sowas siehst Du ggf. in Google. Mach eine Suche, und sobald die Suchergebnisse da stehen, drücke 1x Tab. Bei mir poppt dann oben links ein Fenster auf "Zu den Hauptinhalten springen". Wenn Du sowas brauchen kannst, können wir über die Realisierungsmöglichkeiten reden.

        Wenn Du möchtest, dass der Top-Teil sichtbar bleibt, wenn man in der Dokumentliste scrollt (oder sich dann sogar verkleinert und sichtbar bleibt, wie man es auf manchen Seiten sieht), dann reden wir von sticky headers, sowas geht auch und braucht etwas JavaScript. Auch dazu kannst Du Tipps bekommen.

        Oder Du bleibst bei deinen iframes - das ist für mich auch legitim. Es ist deine Aufgabe, deine Zeit, im Zweifelsfall deine Prügel wenn deine User unzufrieden sind, und niemand kann dich zwingen, zu einem Dir unpassenden Zeitpunkt Lernaufwand zu investieren. Der lohnt sich zwar sicherlich, aber die Zeit muss man ja erstmal haben.

        Rolf

        --
        sumpsi - posui - clusi
        1. Tach auch Rolf!

          Hallo Dugh Dugh,

          das Stacken vom Layout her aber durchaus sinnvoll.

          Es ist nur sinnvoll, wenn die geframeten Seiten außerhalb deiner Kontrolle stehen, bzw. auch ungeframed anderswo sinnvoll existieren können.

          Sollen bzw. dürfen sie durchaus ...

          Zunächst mal würde ich darüber nachdenken, den Kopfteil und den Listenteil in zwei Boxen einer normalen HTML Seite zu bringen. Das hat insofern Vorteile, dass Du dann nur ein Dokument hast und ggf. mit JavaScript übergreifend Dinge tun kannst, die Dir die Isolation der iframes erschweren könnte.

          Du wolltest ja auch erreichen, dass der obere iframe aus dem Bild gescrollt wird, sobald man anfängt, etwas im unteren iframe zu klicken. Solche Operationen sind - denke ich - einfacher, wenn alles ein DOkument ist.

          Um zu verstehen, was Du meinst: Ich habe eine index.htm , aus der in iframes zwei Seiten intro.htm und texte.htm aufgerfufen werden. Ist index.htm dann das EINE Dokument?

          Wenn Du möchtest, dass der Top-Teil sichtbar bleibt, wenn man in der Dokumentliste scrollt (oder sich dann sogar verkleinert und sichtbar bleibt, wie man es auf manchen Seiten sieht), dann reden wir von sticky headers, sowas geht auch und braucht etwas JavaScript. Auch dazu kannst Du Tipps bekommen.

          Genau das will ich ja nicht... also den sticky header - Tipps gerne 😀

          Oder Du bleibst bei deinen iframes - das ist für mich auch legitim. Es ist deine Aufgabe, deine Zeit, im Zweifelsfall deine Prügel wenn deine User unzufrieden sind, und niemand kann dich zwingen, zu einem Dir unpassenden Zeitpunkt Lernaufwand zu investieren. Der lohnt sich zwar sicherlich, aber die Zeit muss man ja erstmal haben.

          Auweia - manchmal ist es so einfach: Ein entsprechender <a> am Ende der Einleitung - und schon stehen meine Artikel oben auf der Seite …

          WICHTIGE ERGÄNZUNG: Weitere Bitten und Danken um/für Tipps werde ich nur noch in diesem Thread absondern. Es geht tatsächlich um genau ein Projekt (das ich nach Fertigstellung hier auch gerne veröffentliche) und dann ist ein Verzetteln in mehrere Threads sicher nicht notwendig. Die wesentlichen technischen Fragen wurden durch Eure Unterstützung gelöst.

          DAFÜR VIELEN DANK!

          Habe eben zu Mittag gegrillt und natürlich die Asche auf mein Haupt bezgl iframes und iframe gekippt 😉 DD