nicht angemeldet
Christian Huml
Tabellenkalk
Rolf B
Gunnar Bittersmann
Christian Huml
Gunnar Bittersmann
Gunnar Bittersmann
marctrix
Gunnar Bittersmann
marctrix
marctrix
Hallo zusammen,
ist Grid nur möglich mit der Verwendung body oder gibt es noch andere Möglichkeiten?
Mit freundlichen Grüßen
Christian Huml
Hallo,
ist Grid nur möglich mit der Verwendung body oder gibt es noch andere Möglichkeiten?
eindeutig ja!
ja, nur möglich mit body, da sonst das html unvollständig ist.
ja, anderen Element das Grid verpassen ist möglich.
Gruß
Kalk
Hallo Christian,
die Beispiele zeigen eine Einsatzmöglichkeit. Das ist deshalb aber nicht die einzige.
Auf den ersten Blick sehe ich in der Spec keinen Hinweis, dass man Grid-Layout nur bei ganz bestimmten Elementen verwenden darf. Daher wäre die Annahme naheliegend, dass grid-Layout für alle Elemente mit Flow-Content nutzbar ist.
Rolf
@@Christian Huml
ist Grid nur möglich mit der Verwendung body oder gibt es noch andere Möglichkeiten?
Wie Jen Simmons sagt: “We’ll use Grid on certain parts of the page, and not on othe parts of the page. […] It doesn’t handle layout for the whole page. It handles layout for a particular container […] and the items on the page that are […] a direct child of that container.” (in Layout Land, Flexbox vs. CSS Grid — Which is Better?)
LLAP 🖖
Hallo Gunnar Bittersmann,
irgendwie verstehe ich Grid nicht ganz. Kann Grid und Flexbox gleichzeitig genutzt werden? Wie wäre es in meinem Beispiel überhaupt möglich das a-Element am Ende der Box zu rastern? Habe gelesen dass Grid ein eigener Container ist, dann bräuchte ich ja keinen eigenen Container nicht mehr oder?
Mit freundlichen Grüßen
Christian Huml
@@Christian Huml
Kann Grid und Flexbox gleichzeitig genutzt werden?
Wenn du mit „gleichzeitig“ gleichzeitig für dasselbe Element meinst, dann natürlich nicht.
Wenn du mit „gleichzeitig“ gleichzeitig auf einer Seite meinst, aber jadoch!
Wie wäre es in meinem Beispiel überhaupt möglich das a-Element am Ende der Box zu rastern?
Ich hatte dir doch ein Video von Jen Simmons’ YouTube-Kanal Layout Land verlinkt. Da werden doch als Empfehlungen auch andere Videos angegeben. So schwer zu finden?
Ich würde denken, in Flexbox + Grid Together = Easy Gallery Layout beschreibt sie genau das, was du willst.
LLAP 🖖
Hallo Gunnar,
Ich würde denken, in Flexbox + Grid Together = Easy Gallery Layout beschreibt sie genau das, was du willst.
in dem Video ist mir eines aufgefallen
Es werden in jedem article eine h1 vergeben. Ich dachte eine h1 sollte immer nur einmal vergeben werden?
Bis bald!
Meowsalot (Bernd)
@@Meowsalot
Es werden in jedem article eine h1 vergeben. Ich dachte eine h1 sollte immer nur einmal vergeben werden?
Gut bemerkt.
LLAP 🖖
Hej Meowsalot,
in dem Video ist mir eines aufgefallen
Es werden in jedem article eine h1 vergeben. Ich dachte eine h1 sollte immer nur einmal vergeben werden?
Dazu gibt es durchaus unterschiedliche Meinungen. @Gunnar Bittersmann wird dir zustimmen und hat Gründe dafür.
Streng genommen ist nur eines wichtig: die Überschriftenstruktur muss logisch nachvollziehbar sein und dafür sorgen, dass die hierarchische Struktur des Dokumentes für Programme und Nutzer nachvollziehbar wird. Die WCAG gibt selber daher Beispiele an, bei denen es mehrere h1gibt.
Auch ich selber vergebe in aller Regel nur eine h1…
Marc
hallo
Hej Meowsalot,
in dem Video ist mir eines aufgefallen
Es werden in jedem article eine h1 vergeben. Ich dachte eine h1 sollte immer nur einmal vergeben werden?
Dazu gibt es durchaus unterschiedliche Meinungen. @Gunnar Bittersmann wird dir zustimmen und hat Gründe dafür.
Streng genommen ist nur eines wichtig: die Überschriftenstruktur muss logisch nachvollziehbar sein und dafür sorgen, dass die hierarchische Struktur des Dokumentes für Programme und Nutzer nachvollziehbar wird. Die WCAG gibt selber daher Beispiele an, bei denen es mehrere
h1gibt.
Genauer, der im HTML-Standard beschriebene Outline-Algorithmus muss beachtet werden, natürlich im Wissen, dass dieser Algorithmus nur partiell implementiert ist.
Deshalb sollte h1-h6 idealer Weise mit der Ergebnis dieses Algorithmus übereinstimmen.
@@beatovich
Genauer, der im HTML-Standard beschriebene Outline-Algorithmus muss beachtet werden, natürlich im Wissen, dass dieser Algorithmus nur partiell implementiert ist.
Partiell implementiert?? In welchem Browser wäre welcher Teil des Outline-Algorithmus implementiert?
LLAP 🖖
hallo
@@beatovich
Genauer, der im HTML-Standard beschriebene Outline-Algorithmus muss beachtet werden, natürlich im Wissen, dass dieser Algorithmus nur partiell implementiert ist.
Partiell implementiert?? In welchem Browser wäre welcher Teil des Outline-Algorithmus implementiert?
Ich gehe davon aus, dass das DOM überall implementiert ist, und dies ist einer der Faktoren im Algorithmus.
Aber wir könnten ja mal ein Script entwickeln, das den Algorithmus anwendet, und so zum Debugging das Ergebnis in die Konsole ausgibt.
@@beatovich
Genauer, der im HTML-Standard beschriebene Outline-Algorithmus muss beachtet werden, natürlich im Wissen, dass dieser Algorithmus nur partiell implementiert ist.
Partiell implementiert?? In welchem Browser wäre welcher Teil des Outline-Algorithmus implementiert?
Ich gehe davon aus, dass das DOM überall implementiert ist, und dies ist einer der Faktoren im Algorithmus.
Ich verstehe nicht, was dass DOM überall implementiert ist damit zu tun haben sollte, ob der Outline-Algorithmus irgendwo implementiert wäre.
(Außer dass DOM Voraussetzung für Outline-Algorithmus ist. Also wenn DOM nicht implementiert wäre, dann auch nicht Outline-Algorithmus.)
LLAP 🖖
hallo
@@beatovich
Genauer, der im HTML-Standard beschriebene Outline-Algorithmus muss beachtet werden, natürlich im Wissen, dass dieser Algorithmus nur partiell implementiert ist.
Partiell implementiert?? In welchem Browser wäre welcher Teil des Outline-Algorithmus implementiert?
Ich gehe davon aus, dass das DOM überall implementiert ist, und dies ist einer der Faktoren im Algorithmus.
Ich verstehe nicht, was dass DOM überall implementiert ist damit zu tun haben sollte, ob der Outline-Algorithmus irgendwo implementiert wäre.
(Außer dass DOM Voraussetzung für Outline-Algorithmus ist. Also wenn DOM nicht implementiert wäre, dann auch nicht Outline-Algorithmus
Es braucht auch diese Konzepte:
Es gibt Geräte die ein Outline erzeugen. Dass populäre Browser das nicht tun ist kein Argument.
Ich sehe es auf jeden Fall so, dass ein Algorithmus besteht, und dass er demnach auch konsultiert werden darf, wenn's um den richtigen Umgang mit h1-h6 geht.
Dass ich dabei manchmal verbal entgleise, lass ich mir aber gern vorwerfen.
Hej beatovich,
Genauer, der im HTML-Standard beschriebene Outline-Algorithmus muss beachtet werden
Nein, der spielt weder bei meinen Ausführungen,noch bei den WCAG-Beispielen irgendeine Rolle und ist nie in irgendeinem Browser implementiert worden.
Den kannst du also getrost vergessen!
Marc
hallo
Kann Grid und Flexbox gleichzeitig genutzt werden?
Da beides Formen der display Eigenschaft sind, kannst du pro Element nur eines oder das andere anwenden. Eine Anwendung hat Konsequenzen für die unmittelbaren Kindelemente, deshalb sind deren Regeln entsprechend ihres gewünschten Verhaltens zum Elternelement zu schreiben.
Hej Christian,
Wie wäre es in meinem Beispiel überhaupt möglich das a-Element am Ende der Box zu rastern?
Häh?
Oder länger: versteh ich nicht.
Oder noch länger: was ist ein „gerastertes“ a-Element? Wie soll das aussehen, wie soll es sich verhalten?
Dein Beispiel benötigt aber dringend (mindestens) flex-wrap: wrap;
Marc
Häh?
Oder länger: versteh ich nicht.
Oder noch länger: was ist ein „gerastertes“ a-Element? Wie soll das aussehen, wie soll es sich verhalten?
Dein Beispiel benötigt aber dringend (mindestens)
flex-wrap: wrap;
Hallo marctrix,
da es ein Beispiel ist habe ich gedacht flex-wrap ist egal 😀 Nach deinen Wunsch habe ich es aber geändert 😀 In meinem Beispiel soll der Link bei den Boxen am Ende stehen, dies soll aber wiederum mit allen Boxen den gleichen Abstand haben. Dies soll auch zutreffen, wenn die Bildschirmgröße verändert wird oder der Text bei nicht ausreichenden Platz umbricht.
Mein altes Beispiel.
Mit freundlichen Grüßen
Christian Huml
Hallo nochmal,
habe ein neues Beispiel erstellt, Beispiel 2 Grid wäre diese Vorgehensweise so richtig?
Matthias Apselgrid-template-columns:1fr;
grid-template-rows:1fr;
Was ich immer noch nicht genau verstehe warum ausgerechnet der Link nun unten steht. Es geht mir jetzt nur um dass Verständnis. Könnte mir dass jemand erklären 😂
Kann man den Wert fr umrechnen?
Im Wiki steht:
Im Flexbox Modul wurde für die zusammenfassende Eigenschaft flex ein ganzzahliger, einheitenloser Wert eingeführt, der einem Bruchteil des verfügbaren zu füllenden Platzes entspricht. Im Grid Layout Module erhält dieser Wert die Einheit fr (fraction, engl. für Bruchteil).
Also wäre dass ein Bruchteil von der Höhe 12em da Breite: auto ?
Mit freundlichen Grüßen
Christian Huml
@@Christian Huml
habe ein neues Beispiel erstellt, Beispiel 2 Grid wäre diese Vorgehensweise so richtig?
Nein. Du hast dir das genannte Video angesehen?
LLAP 🖖
habe ein neues Beispiel erstellt, Beispiel 2 Grid wäre diese Vorgehensweise so richtig?
Nein. Du hast dir das genannte Video angesehen?
Hallo Gunnar Bittersmann,
ja habe ich, besser gesagt beide: https://www.youtube.com/watch?v=hs3piaN4b5I, https://www.youtube.com/watch?v=dQHtT47eH0M.
trotzdem stehe ich gerade auf der Leitung. 😂
Mit freundlichen Grüßen
Christian Huml
@@Christian Huml
trotzdem stehe ich gerade auf der Leitung. 😂
bei Jen: außen grid, innen flex, d.h. Boxen sind Griditems und Flexboxen
bei dir: außen flex, innen grid, d.h. Boxen sind Flexitems und Grids
LLAP 🖖
bei Jen: außen
grid, innenflex, d.h. Boxen sind Griditems und Flexboxenbei dir: außen
flex, innengrid, d.h. Boxen sind Flexitems und Grids
Hallo Gunnar Bittersmann,
warum darf dies nicht so sein?
Mit freundlichen Grüßen
Christian Huml
@@Christian Huml
bei Jen: außen
grid, innenflex, d.h. Boxen sind Griditems und Flexboxenbei dir: außen
flex, innengrid, d.h. Boxen sind Flexitems und GridsHallo Gunnar Bittersmann,
warum darf dies nicht so sein?
Das darf schon, ist aber vielleicht nicht das, was du willst.
LLAP 🖖
@@Gunnar Bittersmann
Das darf schon, ist aber vielleicht nicht das, was du willst.
Warum außen Grid besser ist: du brauchst keine media queries. Mindesbreite der Griditems festlegen, fertig.
Warum innen Flexbox besser ist: es geht nur in eine Richtung (vertikal), ein Flexitem, das sich ausdehnt, und eins, das dies nicht tut.
LLAP 🖖
Warum außen Grid besser ist: du brauchst keine media queries. Mindesbreite der Griditems festlegen, fertig.
Warum innen Flexbox besser ist: es geht nur in eine Richtung (vertikal), ein Flexitem, das sich ausdehnt, und eins, das dies nicht tut.
Hallo Gunnar Bittersmann,
so habe ich dies noch gar nicht betrachtet 😀
Hallo Gunnar Bittersmann,
wäre dieses Beispiel in deinem Sinne? Codepen
Hierzu noch eine Frage:
Bezieht sich der Wert minmax in diesem Beispiel 15em auf die Mindest- bzw. Maximalbreite?
grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
Mit freundlichen Grüßen
Christian Huml
@Gunnar Bittersmann @Matthias Apsel
Nachtrag:
Eventuell könnte man mein Beispiel auch im Wiki hinterlegen (wenn Beispiel korrekt). Kann ich dies auch selber hinterlegen natürlich ohne Codepen?
Mit freundlichen Grüßen
Christian Huml
Hallo Christian Huml,
Eventuell könnte man mein Beispiel auch im Wiki hinterlegen (wenn Beispiel korrekt). Kann ich dies auch selber hinterlegen natürlich ohne Codepen?
Für das Beispiel selbst brauchst du Unterstützung, für die Seite die das Beispiel als Quelltext enthalten soll, kannst du selbst aktiv werden.
Bis demnächst
Matthias
@@Christian Huml
wäre dieses Beispiel in deinem Sinne? Codepen
Der mangelnde Farbkontrast ist nicht in meinem Sinne.
Die Textabsätze sind jeweils vertikal zentriert. Das soll so? Und was, wenn in so einer Box mehrere Absätze untereinanderstehen?
Hierzu noch eine Frage:
Bezieht sich der Wert minmax in diesem Beispiel 15em auf die Mindest- bzw. Maximalbreite?
grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
15em ist der Mindestwert für die Breite. Durch die Angabe 1fr als Maximalwert sind alle Spalten im Raster gleich breit.
LLAP 🖖
wäre dieses Beispiel in deinem Sinne? Codepen
Der mangelnde Farbkontrast ist nicht in meinem Sinne.
Die Textabsätze sind jeweils vertikal zentriert. Das soll so? Und was, wenn in so einer Box mehrere Absätze untereinanderstehen?
Ja, dass mit den Farben wurde schlecht gewählt muss ich noch ändern. 😂 Dass es vertikal zentriert ist war in meinem Sinne. Bezüglich mehrere Absätze müsste ich noch testen. Werde es nochmal überarbeiten.
Mit freundlichen Grüßen
Christian Huml