Jens: divs, iframes,flexboxes u.a.

Hallo, vor vielen Monaten hatte ich hier eine Diskussion verfolgt, wie nach neuestem Stand Homepages mit mehreren auf der Seite verteilten Blöcken zu realisieren sind. Wenn ich recht erinnere waren es früher DIVs, dann war von flexboxes und iframes(?) die Rede. Erinnert sich jemand an die lange Diskussion oder besser an das Ergebnis bzw. eine entsprechende Anleitung? Gruß Jens

  1. Hallo Jens,

    da kämen viele Threads in Frage. Und auch wie mans nicht machen sollte.

    Vielleicht meinst du diesen hier, der eigentlich am Anfang ein anderes Thema hatte. Oder sonst mal "suche" mit den Begriffen die du genannt hast.

    Gruss
    Henry

    --
    Meine Meinung zu DSGVO & Co:
    „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
  2. @@Jens

    Wenn ich recht erinnere waren es früher DIVs, dann war von flexboxes und iframes(?) die Rede.

    Du bringst hier drei Dinge in einen Satz, die so ziemlich gar nichts miteinander zu tun haben.

    • „früher DIVs“ – heute auch main, header, footer, nav, section, article, aside (und immer schon html und body): HTML-Elemente zur Strukturierung des Inhalts

    • „flexboxes“: eine Möglichkeit, die CSS zum Layouten einer Seite anbietet. Eine andere ist Grid. Beides kann man auf Elemente jeglichen Typs anwenden, also auf body, main, header, footer, nav, section, article, aside, … – auch auf div.

    • „iframes“: eine Möglichkeit, Inhalte aus anderen Quellen einzubinden.

    … das Ergebnis bzw. eine entsprechende Anleitung?

    Die Anleitung ist schnell zusammengefasst:

    1. Erstelle für den Seiteninhalt das strukturelle Markup. (Die entsprechenenden Elemente dazu hab ich oben genannt.)

    2. Wähle die Layout-Technik (Grid, Flexbox), mit der das vorgesehene Layout am besten umsetzbar ist. (Fürs Seitenlayout dürfte das meist eher Grid als Flexbox sein.) Schreibe ein paar Zeilen CSS – fertig.

    😷 LLAP

    --
    “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
    1. Danke für die guten Erläuterungen.
      Ich möcht jetzt mit dem grid beginnen.
      Auf drweb habe ich ein einfaches Beispiel für das strukturelle Markup gefunden.
      Grid-Beispiel

      Dies ist aber wohl für Desktop-Anwendungen gedacht.
      Muss ich also eine zweite Struktue für kleine Displays definieren?

      1. Hallo

        Danke für die guten Erläuterungen.
        Ich möcht jetzt mit dem grid beginnen.
        Auf drweb habe ich ein einfaches Beispiel für das strukturelle Markup gefunden.
        Grid-Beispiel

        Dies ist aber wohl für Desktop-Anwendungen gedacht.
        Muss ich also eine zweite Struktue für kleine Displays definieren?

        Nein, das musst du nicht. Du bringst die Boxen einfach nur in eine andere Reihenfolge (nur optisch). Dafür bietet sich der Ansatz „Mobile first“ an, der die für das Layout nötigen CSS-Regeln beginnend mit schmal hin zu breit definiert.

        Dabei wird zuerst das Layout für den schmalen Viewport eines Smartphones definiert. Typischerweise werden die in deinem Screenshot gezeigten Blöcke in der im HTML-Quelltext vorhandenen Reihenfolge untereinander dargestellt, also muss da außer Abständen nichts eingetragen werden. Die erste Ebene der CSS-Regeln für schmale Viewports beinhaltet auch die sich nicht oder nur in seltenen Fällen verändernden Dinge wie Farben und Schriftgrößen.

        Mit einem „Media-Query“, der einen eigenen Block, der eine Bedingung enthält (hier eine Mindestbreite des Viewports), definiert, werden die paar Regeln mit neuen Werten überschrieben oder auch hinzugefügt, die das sich ab dieser Grenze ändernde Layout beschreiben.

        Es gilt für breitere Browserfenster (Viewports) nur das hinzuzufügen und zu überschreiben, was für diesen Fall nötig ist.

        /*
        Es beginnt mit allen möglichen grundsätzlich gültige Regeln
        und solchen, die nur für schmale Viewports gedacht sind.
        Lasse alles weg, was automatisch schon so ist, wie benötigt.
        */
        
        /*
        Es folgen die speziell für breitere Viewports gültigen Regeln.
        Der Wert von 36em ist für das Beispiel willkürlich gewählt.
        */
        @media screen and (min-width: 36em) {
         body {
           display: grid;
            /* … */
          }
          header {
            /* … */
          }
          /* … */
        }
        

        Tschö, Auge

        --
        Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
        Hohle Köpfe von Terry Pratchett
        1. Hallo,

          Mit einem „Media-Query“, der einen eigenen Block, der eine Bedingung enthält (hier eine Mindestbreite des Viewports), definiert, werden die paar Regeln mit neuen Werten überschrieben oder auch hinzugefügt, die das sich ab dieser Grenze ändernde Layout beschreiben.

          evtl. kann man auch auf den „Media-Query“ verzichten. Mit

          #id { 
            display: grid; 
            gap: .3em; 
            grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
          }
          

          werden die beiden Kinder des Elements bei genügend Platz nebeneinander angeordnet, sonst untereinander. Die Breite des Elements wird ausgenutzt. Link.

          Gruß
          Jürgen

      2. Servus!

        Danke für die guten Erläuterungen.
        Ich möcht jetzt mit dem grid beginnen.

        +1 Meiner Ansicht nach die einfachere Variante gegenüber Flexbox und 1000x besser als das bisherige Layout mit floats.

        Hier ist ein Tutorial über Grid Layout:

        Herzliche Grüße

        Matthias Scharwies

        --
        Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
      3. @@Jens

        Auf drweb habe ich ein einfaches Beispiel für das strukturelle Markup gefunden.
        Grid-Beispiel

        <article> ist falsch; <main> sollte es sein.

        😷 LLAP

        --
        “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
        1. <article> ist falsch; <main> sollte es sein.

          Hier steht aber auch <article>

          Wiki-Eintrag

          Was ist nun richtig?

          1. Servus!

            <article> ist falsch; <main> sollte es sein.

            Hier steht aber auch <article>

            Wiki-Eintrag

            Was ist nun richtig?

            Ich könnte mit beidem leben. Evtl. würde ich sogar nur header und footer auszeichnen und den Hauptinhalt einfach so (ohne ein umschließendes Block-Element) notieren. (Die meisten Webseiten haben imho keine 17 Kapitel, die man extra voneinander abtrennen müsste.)

            Das aside kann dann auch figure, blockquote oder ausnahmsweise auch mal div heißen.

            Herzliche Grüße

            Matthias Scharwies

            --
            Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
            1. Hallo Matthias,

              hier https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5/Seitenstrukturierung#So_sieht_das_fertige_Beispiel_aus: ist aber auch ein main vorhanden. Sollte man das hier https://wiki.selfhtml.org/wiki/CSS/Tutorials/mehrspaltige_Layouts#Grundstruktur nicht ergänzen? Weiter unten ist dann auch ein Main drin.

              Gruß
              Jürgen

              1. Servus!

                Hallo Matthias,

                hier https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5/Seitenstrukturierung#So_sieht_das_fertige_Beispiel_aus: ist aber auch ein main vorhanden. Sollte man das hier https://wiki.selfhtml.org/wiki/CSS/Tutorials/mehrspaltige_Layouts#Grundstruktur nicht ergänzen? Weiter unten ist dann auch ein Main drin.

                ✔ Done!

                Herzliche Grüße

                Matthias Scharwies

                --
                Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“