divs, iframes,flexboxes u.a.

[Jens]

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

[Henry]

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

[Gunnar Bittersmann]

@@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

[Jens]

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.

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

[Auge]

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.

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

[JürgenB]

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

[Matthias Scharwies]

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:

• SELF-Wiki: CSS/Tutorials/Grid

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Jens

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

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

😷 LLAP

[Jens]

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

Hier steht aber auch <article>

Wiki-Eintrag

Was ist nun richtig?

[Matthias Scharwies]

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

[JürgenB]

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

[Matthias Scharwies]

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