tag:forum.selfhtml.org,2005:/self grid, 1. areas, 2. text-positionierung – SELFHTML-Forum 2020-09-13T09:41:43Z https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1774992#m1774992 michaah 2020-08-29T00:01:30Z 2020-08-29T00:01:30Z grid, 1. areas, 2. text-positionierung <p>Die genannte Seite ist Ergebnis meiner heutigen Bemühungen grid design zu verstehen.</p> <p>Das (heutige) Detailproblem bestand eigentlich nur darin, Text in einer Zelle statt links oben eben rechts unten auszurichten (Text "wie und wo").</p> <p>Versucht habe ich es sowohl mit jusitfy-items+align-items als auch mit position:relative ... um nun nach Stunden festzustellen dass von mir verwendete Chromebrowser (Vivaldi und Chromium) den Text auf Basis einen UA-stylesheets mittels margin-block-start etc. zentrieren (soweit ich das verstanden habe). Jedenfalls ist es mir nicht gelungen diesen Wert zu überschreiben oder sonstwie den Text nach meinen Wünschen zu positionieren. Hilfe dazu wäre nett.</p> <p>Beim Zusammenbasteln des Beispiels zeigte sich ausserdem, das ich das Grid-design nicht verstehe, obwohl ich mich nun schon länger immer wieder damit befasse. Ich weiß garnicht genau was ich überhaupt fragen soll, weil kaum etwas so funktioniert wie ich es zu verstehen glaubte (und ich habe die entsprechenden Seiten mehrmals durchgelesen):</p> <p>Ich versteh nicht warum man jede area nochmals individuell definieren muß, obwohl die entsprechenden infos bereits in grid-template-ares enthalten sind. Das Ergebnis ist jedoch ernüchternd, denn die Anordnung entspricht nicht dem Template ... und ich habe keine Idee wo mein Denkfehler liegt. Auch hierzu wäre es nett einen Hinweis zu erhalten.</p> <p>Gute Nacht erstmal ...</p> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1774993#m1774993 Matthias Scharwies mscharwies@selfhtml.org 2020-08-29T05:06:07Z 2020-08-29T06:04:08Z grid, 1. areas, 2. text-positionierung <p>Hallo Michaah,</p> <p>ich verzichte immer öfter auf eine andere Positionierung, wil ich grid gut finde. Warum - dazu später mehr!</p> <blockquote> <p>Beim Zusammenbasteln des Beispiels zeigte sich ausserdem, das ich das Grid-design nicht verstehe, obwohl ich mich nun schon länger immer wieder damit befasse. Ich weiß garnicht genau was ich überhaupt fragen soll, weil kaum etwas so funktioniert wie ich es zu verstehen glaubte (und ich habe die entsprechenden Seiten mehrmals durchgelesen):</p> </blockquote> <p>Grundproblem: Im Layouten mit float und selbst mit Flexbox formatierst du die <strong>Kindelemente</strong> - im <strong>Grid Layout zuerst aber den Grid-Container</strong>:</p> <h3>1. Grid-Container</h3><pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>6<span class="token punctuation">,</span> 1fr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">gap</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">min-height</span><span class="token punctuation">:</span> 90vh<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">body > *</span> <span class="token punctuation">{</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>kein <code>position:relative; margin, padding</code> etc. (<em>BTW: <code>padding: 0%em;</code> <code>%em</code> kann nicht funzen.</em>)</p> <p>Wir haben jetzt ein Grid mit 6 Spalten - was aber nur auf Desktops gut aussieht und auf dem Handy Scheiße, das lösen wir später. Der Übersicht halber habe ich <code>gap: 1em</code> gesetzt.</p> <p>Damit sich die Kindelemente gut verteilen, habe ich den body mal auf 90vh (Viewport-Höhe) gesetzt.</p> <p><code>body > *</code>ist nur der Optik wegen und muss später weg.</p> <h3>2. Kind-Elemente</h3><p>Ich habe eine h1 eingesetzt, die aber nur in Feld 1/1 nicht gut aussieht, deshalb:</p> <pre><code class="block language-css"><span class="token selector">h1</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / -1<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> gold<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> min-content<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Die h1 erstreckt sich nun von der 1. Rasterlinie links am body bis zur -1. (der letzten am rechten Rand).</p> <p>Ich will ja nur die Überschrift als Reihe, deshalb habe ich die Höhe mit min-content gesetzt. (-> Hier müsstest Du jetzt <code>body: {grid-template-rows: min-content auto auto auto;}</code> setzen, damit die Reihe nur so hoch ist wie die h1).</p> <blockquote> <p>Das (heutige) Detailproblem bestand eigentlich nur darin, Text in einer Zelle statt links oben eben rechts unten auszurichten (Text "wie und wo").</p> </blockquote> <p>Das div #wiewo soll unten rechts hin:</p> <pre><code class="block language-css"><span class="token selector">#wowie</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> -2 / -1<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> 4 / 5<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Vorgehensweise ist wie bei h1:</p> <ul> <li><code>grid-column: -2 / -1;</code>geht vom rechten Rand (-1) eins weiter links</li> <li><code>grid-row: 4 / 5;</code> setzt das Element zwischen 4. und 5. Linie <ul> <li>Warum geht hier nicht <code>grid-row: -2 / -1;</code> ? - weil wir keinen Wert für grid-template-rows gesetzt haben.</li> </ul> </li> </ul> <p>Hier ist das Beispiel online: <a href="https://jsr-hersbruck.de/apps/michaah.html" rel="nofollow noopener noreferrer">michaah.html</a></p> <p>(Setz mal <code>#wowie {grid-column: -3 / -1; grid-row: 3 / 5;}</code>. Wenn dir der Text(inhalt) an den Rand stößt, kannst du padding, text-align, etc verwenden.)</p> <blockquote> <p>Versucht habe ich es sowohl mit jusitfy-items+align-items als auch mit position:relative ... um nun nach Stunden festzustellen dass von mir verwendete Chromebrowser (Vivaldi und Chromium) den Text auf Basis einen UA-stylesheets mittels margin-block-start etc. zentrieren (soweit ich das verstanden habe). Jedenfalls ist es mir nicht gelungen diesen Wert zu überschreiben oder sonstwie den Text nach meinen Wünschen zu positionieren. Hilfe dazu wäre nett.</p> </blockquote> <p>Ohne das im einzelnen zu analysieren, das waren zu viele CSS-Regelsätze, weniger ist beim Testen mehr.</p> <blockquote> <p>Ich versteh nicht warum man jede area nochmals individuell definieren muß, obwohl die entsprechenden infos bereits in grid-template-ares enthalten sind.</p> </blockquote> <p>Nein, dem ist nicht so!</p> <blockquote> <p>Das Ergebnis ist jedoch ernüchternd, denn die Anordnung entspricht nicht dem Template ... und ich habe keine Idee wo mein Denkfehler liegt. Auch hierzu wäre es nett einen Hinweis zu erhalten.</p> </blockquote> <pre><code class="block language-css"> <span class="token selector">div #wowie</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> wowie<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Du selektierst ein #wowie, das ein <strong>Kind</strong> von div ist; entferne mal das Leerzeichen (oder den div-Selektor) und du wirst sehen, dass es funzt. (Wenn Du zum Testen ein background:red oder eine border: 1px dashed; festgelegt hättest, hättest du dich gewundert, dass selbst das nicht funzt.)</p> <h3>3. Was muss / sollte man bei Grid Layout definieren?</h3><p>Verquere Welt, ich hatte zuerst das Tutorial im SELF-Wiki geschrieben, bevor ich Grid praktisch angewendet habe. Gerade Kapitel 4 (<a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/benannte_Linien_und_Rasterbereiche" rel="nofollow noopener noreferrer">CSS/Tutorials/Grid/benannte_Linien_und_Rasterbereiche</a>) schien mir mit seinen template-areas eine Lösung für Layouts zu sein. Leider musst Du hier mit media queries jede Eventualität festlegen.</p> <p>Mitterweile verwende ich bei Grid nur noch 2 Anwendungsfälle:</p> <pre><code class="block language-css"><span class="token selector">footer *</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>3<span class="token punctuation">,</span> 1fr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">gap</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Wenn ich 3 kleine(re) Elemente nebeneinander postioneren will, z.B in einem footer.</p> <p>Wenn ich nicht weiß, wie groß der Viewport ist (also fast immer!), ist es besser <strong>keine</strong> festen Raster im Grid-Container festzulegen (siehe Bsp. am Anfang: 6 Spalten am Handy). Hier ist es besser für die Grid-Elemente Mindestgrößen festzulegen:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/responsive_Raster_ohne_Media_Queries" rel="nofollow noopener noreferrer">CSS/Tutorials/Grid/responsive_Raster_ohne_Media_Queries</a></li> </ul> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 40em<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>auto-fill<span class="token punctuation">,</span> <span class="token function">minmax</span><span class="token punctuation">(</span>20em<span class="token punctuation">,</span> 1fr<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>Ab einer Breite von 40 em (vorher macht es keinen Sinn, kleine Blöcke nebeneinander zu positionieren) werden Rasterfelder angelegt, die mindestens 20em und maximal in den Grid-Container passen, und zwar so viele, wie's geht:</p> <p>60em Breite 3 Felder mit je 20em</p> <p>70em Breite: 3 Felder mit je 23.3em</p> <p>75em Breite: 3 Felder mit je 25em;</p> <p>80em Breite: 4 Felder mit je 20em;</p> <p>99em Breite: 4 Felder mit je 24.xem Breite</p> <p>Lass die Elemente dorthin fallen, wo sie hinpassen! Wenn du ein Rasterfeld anders positionieren willst, auch ok.</p> <p>Ich hoffe, ein bisschen zur Aufklärung beigetragen zu haben.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775212#m1775212 Matthias Scharwies mscharwies@selfhtml.org 2020-09-03T05:39:26Z 2020-09-03T05:39:26Z Lösung? Tutorial im SELF-Wiki <p>Servus!</p> <p>Ich habe das vereinfachte Beispiel mal ins SELF-Wiki übernommen:</p> <p><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Ausrichtung_von_Grid-Items#Impressum_unten_rechts" rel="nofollow noopener noreferrer">CSS/Tutorials/Grid/Ausrichtung_von_Grid-Items#Impressum_unten_rechts</a></p> <p>Auch wenn ich dafür teilweise meine Glaskugel verwenden musste glaube ich, dass ein Verständnisproblem neben den fehlerhaften CSS-Selektoren die Tatsache ist, dass das Grid Layout nur auf die direkten Kindelemente des Grid-Containers wirkt und nicht auf Kindeskind-Elemente wie <code>#wiewo p </code>.</p> <p>Ich habe das in <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Grid-Container#display:_grid" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Grid-Container</a> noch einmal erwähnt und dort den Absatz subgrid in ein eigenes Kapitel ausgelagert:</p> <p><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Verschachtelte_Raster" rel="nofollow noopener noreferrer">Verschachtelte Raster</a> mit subgrid gehen bis jetzt nur im FF - ich schau schon mal nach guten Beispielen.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775007#m1775007 michaah 2020-08-29T10:01:33Z 2020-08-29T10:01:33Z grid, 1. areas, 2. text-positionierung <p>Hi, erstmal vielen Dank für diese ausführliche, detaillierte Hilfestellung. Das ist beeindruckend.</p> <p>Viel kann ich dazu noch nicht sagen weil ich das erstmal durcharbeiten muß, nur soviel zur Erläuterung weil es von dir angesprochen wurde: Dass dies Beispiel handy-untauglich ist und nur auf dem Desktop funktionert (wenn es das dann mal tut ;-) ) ist klar. Die Komplettlösung soll aber mittels media-queries auf drei Grunddesigns aufgespalten werden, handy einspaltiger "Schlauch", handy landscape/tabletts zweispaltig, Desktop dreispaltig. Die areas hier im Beispiel verdeutlichen den dreispaltigen Ansatz, die columms sind nur Detail.</p> <p>Zugegebenermaßen habe ich von der Desktopvariante eine bestimmte gestalterische Vorstellung, die, salopp gesagt, mit "lass den Browser und die Gridlogik mal machen und herumschieben" nicht erreicht werden kann. Aber das ist definitiv eine Hürde ich mir selbst dahingestellt habe ;-) .</p> <p>Jetzt muß ich deine Hinweise erstmal durchkauen …</p> <p>Gruß</p> <p>m.</p> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775043#m1775043 michaah 2020-08-30T00:11:01Z 2020-08-30T00:11:01Z grid, 1. areas, 2. text-positionierung <p>Mein Hauptproblem bleibt leider unbeantwortet: Wie positioniere ich den Text in der Box, nicht die Box selbst, unten rechts? Besonders augenfällig wäre es in <em>deinem</em> Beispiel mit den von dir vorgeschlagenen alternativen Werten für die rote Box.</p> <p>Zitat: (Setz mal #wowie {grid-column: -3 / -1; grid-row: 3 / 5;}. Wenn dir der Text(inhalt) an den Rand stößt, kannst du padding, text-align, etc verwenden.)</p> <p>Wie kann ich den Text in dieser Box wie gewünscht anordnen.</p> <p>Im weiteren fand ich dein Beispiel eher verwirrend, auch weil du mir ja auch eine andere Gestaltung nahelegst. Vor allem aber sehe ich nach wie vor das Grundprinzip nicht, aber meine Fragen will ich hier jetzt nicht weiter ausführen weil ich sie nicht mit dem hier oben genannten Problem vermischen möchte.</p> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775213#m1775213 Code_Lisa 2020-09-03T05:51:48Z 2020-09-03T05:51:48Z grid, 1. areas, 2. text-positionierung <p>Wow dankeschön für deine Mühe alles soo detailliert aufzuschreiben :-) Da habe ich heute Nachmittag richtig etwas durchzuarbeiten.</p> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775503#m1775503 michaah 2020-09-11T20:54:18Z 2020-09-11T20:54:18Z grid, 1. areas, 2. text-positionierung <blockquote> <p>Hallo Michaah,</p> </blockquote> <p>...</p> <blockquote> <p>Das div #wiewo soll unten rechts hin:</p> <pre><code class="block language-css"><span class="token selector">#wowie</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> -2 / -1<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> 4 / 5<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Vorgehensweise ist wie bei h1:</p> <ul> <li><code>grid-column: -2 / -1;</code>geht vom rechten Rand (-1) eins weiter links</li> <li><code>grid-row: 4 / 5;</code> setzt das Element zwischen 4. und 5. Linie <ul> <li>Warum geht hier nicht <code>grid-row: -2 / -1;</code> ? - weil wir keinen Wert für grid-template-rows gesetzt haben.</li> </ul> </li> </ul> <p>Hier ist das Beispiel online: <a href="https://jsr-hersbruck.de/apps/michaah.html" rel="nofollow noopener noreferrer">michaah.html</a></p> </blockquote> <p>A) Das Onlinebeispiel ist jedoch anders strukturiert als das hier oben dargestellte. Ersteres weiß ich nicht mit meinen Layout in Zusammenhang zu bringen, letzters hat mir dann doch weitergeholfen ... auch wenn ich die Prinzipien (templates vs. konkrete Definitionen) nach wie vor nicht verstehe.</p> <p>B) Das jedoch mal beiseite, grid-im-grid ("#wowie {display: grid;}" im onlinebspl.) ist oder ist <em>nicht</em> das selbe wie ein subgrid? Ich verstehe nicht warum ich #wowie ein "display:grid;" mitgeben muß?</p> <p><a href="ac52.de/test-rechtsunten_grid.html" rel="noopener noreferrer">Siehe neue problematische Seite:</a></p> <p>C) Hier ist nun mein Hauptanliegen: warum ist zwischen p#adresse und p#kontakt soviel Platz, bzw. woran richtet p#adresse sich aus?</p> <p>In den Entwicklertools (F12) habe ich nichts ausmachen können was diesen Abstand definiert.</p> <p>Die einzige (unschöne und unerwünschte) Möglichkeit p#adresse weiter nach unten zu drücken besteht für mich darin oben ein paar "br" drauf zu packen. Ginge das nicht anders? <a href="http://ac52.de/test-rechtsunten_grid.html" rel="nofollow noopener noreferrer">http://ac52.de/test-rechtsunten_grid.html</a></p> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775045#m1775045 Matthias Scharwies mscharwies@selfhtml.org 2020-08-30T04:17:30Z 2020-08-30T05:15:21Z grid, 1. areas, 2. text-positionierung <p>Servus!</p> <blockquote> <blockquote> <p>(Setz mal #wowie {grid-column: -3 / -1; grid-row: 3 / 5;}. Wenn dir der Text(inhalt) an den Rand stößt, kannst du padding, text-align, etc verwenden.)</p> </blockquote> </blockquote> <blockquote> <p>Mein Hauptproblem bleibt leider unbeantwortet: Wie positioniere ich den Text in der Box, nicht die Box selbst, unten rechts?</p> </blockquote> <p>Dein Hauptproblem war imho a. das fehlende Verständnis von Grid und b. eine chaotische Vorgehensweise (nicht ohne Grund heißt dein Beispiel Michaahs Gridchaos ).</p> <p>Ich hatte dir einen Weg gezeigt, wie man mit wenigen Selektoren ein Grid aufbaut und dann dieses peu à peu gestaltet.</p> <h3>Wie positioniere ich den Text in der Box, nicht die Box selbst, unten rechts?</h3><p>Wenn Du dafür nicht padding, text-align etc, sondern grid verwenden willst, benötigst du für <code>#wowie</code>ein <em><strong>zweites</strong></em> Grid Layout und dann noch zwei Deklarationen für <code>#wowie p</code>:</p> <pre><code class="block language-css"><span class="token selector">#wowie</span> <span class="token punctuation">{</span> ... <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#wowie p</span> <span class="token punctuation">{</span> <span class="token property">align-self</span><span class="token punctuation">:</span> end<span class="token punctuation">;</span> <span class="token property">justify-self</span><span class="token punctuation">:</span> end<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>(Du hattest in Michaahs Grid-Chaos align-<strong>items</strong> und justify-<strong>items</strong> auskommentiert. Das hätte sich aber auf den Grid-Container, nicht auf das Grid-Element bezogen.)</p> <p>Live-Beispiel: <a href="https://jsr-hersbruck.de/apps/michaah.html" rel="nofollow noopener noreferrer">michaah.html (mit #wowie p unten rechts)</a></p> <p>SELF-Wiki: <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Ausrichtung_von_Grid-Items" rel="nofollow noopener noreferrer">CSS/Tutorials/Grid/Ausrichtung_von_Grid-Items (Kapitel 6)</a></p> <h3>Entwerfen von CSS-Layouts</h3><blockquote> <p>Im weiteren fand ich dein Beispiel eher verwirrend, auch weil du mir ja auch eine andere Gestaltung nahelegst.</p> </blockquote> <p>Ich hatte extra drauf geachtet, mein Beispiel von Anfang an ausgehend zu entwickeln, so dass du die Schritte nachvollziehen und dann dein eigenes Ding machen kannst.</p> <p>Ich fand <strong>Dein Beispiel</strong> verwirrend, weil du in deinem CSS mehrere ungültige Selektoren (div #wowie), sowie ungültige Werte (%em) hattest.</p> <p>Beim Testen einer solchen Webseite solltest du</p> <ol> <li>Überlegen, welche Eigenschaft du in die Seite einfügen möchtest</li> <li>mit möglichst wenig HTML und wenig CSS-Regelsätzen anfangen</li> <li>den Seiteninspektor verwenden: <ul> <li>SELFWiki: <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML_%26_CSS_mit_dem_Seiteninspektor_untersuchen" rel="nofollow noopener noreferrer">HTML/Tutorials/HTML_&_CSS_mit_dem_Seiteninspektor_untersuchen</a></li> <li>codemakery.ch: <a href="https://code.makery.ch/de/library/html-css/part4/" rel="nofollow noopener noreferrer">Teil 4: Entwicklertools im Browser</a></li> </ul> </li> </ol> <p>Dann hättest Du gesehen, dass dein CSS-Markup aus einem Chaos sich widersprechender und fehlerhafter Regeln besteht:</p> <pre><code class="block bad language-css"> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 3em<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 0px solid<span class="token punctuation">;</span> <span class="token property">border-color</span><span class="token punctuation">:</span> #cbcbcb<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0%em<span class="token punctuation">;</span> <span class="token property">gap</span><span class="token punctuation">:</span> 0em<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>6<span class="token punctuation">,</span> 1fr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> auto auto auto auto auto<span class="token punctuation">;</span> <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">"graphik-1 graphik-2 angebot-1 angebot-1 zugang zugang"</span> <span class="token string">"graphik-3 graphik-4 angebot-1 angebot-1 zugang zugang"</span> <span class="token string">"head head head head plan plan"</span> <span class="token string">"graphik-5 graphik-6 angebot-2 angebot-2 wowie wowie"</span> <span class="token string">"graphik-7 graphik-8 angebot-2 angebot-2 wowie wowie"</span><span class="token punctuation">;</span> <span class="token comment">/* grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(7, 1fr); grid-template-rows: auto auto auto auto auto; grid-template-areas: "aside aside aside aside aside aside" "aside aside aside aside aside aside" "foot foot foot foot foot foot"; */</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1.2em<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Auskommentieren ist schon mal gut, lösche aber alles was du nicht für dein Problem brauchst.</p> <p>Ich habe so mit dem Grid-Container angefangen:</p> <pre><code class="block good language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>6<span class="token punctuation">,</span> 1fr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> min-content auto auto auto auto auto<span class="token punctuation">;</span> <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">"h1 h1 h1 h1 h1 h1 "</span> <span class="token string">"graphik-1 graphik-2 angebot-1 angebot-1 zugang zugang"</span> <span class="token string">"graphik-3 graphik-4 angebot-1 angebot-1 zugang zugang"</span> <span class="token string">"head head head head plan plan"</span> <span class="token string">"graphik-5 graphik-6 angebot-2 angebot-2 wowie wowie"</span> <span class="token string">"graphik-7 graphik-8 angebot-2 angebot-2 wowie wowie"</span><span class="token punctuation">;</span> <span class="token property">gap</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">min-height</span><span class="token punctuation">:</span> 90vh<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Ich habe die Bereiche im ASCII-Schema mit Leerzeichen aufgefüllt, damit das Grid erkennbar ist.</p> <p>Jetzt müssen die einzelnen Grid-Elemente im Raster positioniert werden:</p> <pre><code class="block bad language-css"> <span class="token selector">div #wowie</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> wowie<span class="token punctuation">;</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 5 / 7<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> 4 / 6<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Du überschreibst die grid-area ja wieder. Das ist dir selbst aufgefallen, also muss der Fehler irgendwo vorher liegen.</p> <p>Im Seiteninspektor hättest du sehen können, dass <strong>keine</strong> CSS-Formatierung auf wowie angewandt wird - warum?</p> <p>Weil du jeden <strong>Selektor</strong> (außer header) falsch angelegt hattest:</p> <pre><code class="block language-css,bad">aside #graphik-1 { ... } </code></pre> <p>Meine Version:</p> <pre><code class="block good language-css"><span class="token selector">h1</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> h1<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> gold<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> min-content<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#wowie</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> wowie<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> lime<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <ol> <li>Ich färbe die gewünschten Elemente mit einer Signalfarbe, damit ich gleich erkenne, ob der Selektor auch greift.</li> <li>Ich fange mit h1 an, weil ich das schon mal gemacht habe und dann das bewährte Prinzip weiter ausbaue.</li> </ol> <p>Live-Beispiel: <a href="https://jsr-hersbruck.de/apps/michaah-2.html" rel="nofollow noopener noreferrer">michaah-2.html (mit grid-template-area)</a></p> <p>Ich habe nicht alle Elemente so formatiert, das kannst du jetzt tun. Ob man alle img in aside-Elemente packt, ohne das es einen Inhalt gibt, könnte man auch diskutieren, aber das war ja nicht Deine Frage.</p> <blockquote> <p>Vor allem aber sehe ich nach wie vor das Grundprinzip nicht, aber meine Fragen will ich hier jetzt nicht weiter ausführen weil ich sie nicht mit dem hier oben genannten Problem vermischen möchte.</p> </blockquote> <p>Ich habe jetzt die oben genannten Fragen beantwortet, hoffe aber, dass du auch das Grundprinzip bald siehst.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775047#m1775047 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2020-08-30T07:12:19Z 2020-08-30T07:12:19Z grid, 1. areas, 2. text-positionierung <p>Hallo michaah,</p> <blockquote> <p>Mein Hauptproblem bleibt leider unbeantwortet: Wie positioniere ich den Text in der Box, nicht die Box selbst, unten rechts?</p> </blockquote> <p>Eine Möglichkeit wäre, der box ein display: <code>table-cell</code> zu geben und mit <code>text-align</code> und <code>vertical-align</code> zu arbeiten, eine weitere, <code>display: flex</code> in Verbindung mit <code>text-align</code> und <code>flex-direction</code> zu nutzen.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775239#m1775239 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-09-04T11:12:54Z 2020-09-04T11:12:54Z Lösung? Tutorial im SELF-Wiki <p>@@Matthias Scharwies</p> <blockquote> <p>Tatsache ist, dass das Grid Layout nur auf die direkten Kindelemente des Grid-Containers wirkt und nicht auf Kindeskind-Elemente</p> </blockquote> <p>Ach, ist das so?</p> <p>Was dem einen seine Tatsachen, das dem anderen <a href="https://codepen.io/gunnarbittersmann/pen/ExKbEWy" rel="noopener noreferrer">seine Nachtigall</a>.</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“</em> —@Ann_Waeltin </div> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775217#m1775217 Matthias Scharwies mscharwies@selfhtml.org 2020-09-03T08:43:05Z 2020-09-03T09:02:48Z Gesucht: Ideen für verschachtelte Grids? <p>Servus!</p> <blockquote> <p>Wow dankeschön für deine Mühe alles soo detailliert aufzuschreiben :-) Da habe ich heute Nachmittag richtig etwas durchzuarbeiten.</p> </blockquote> <p>Danke für's Lob!</p> <blockquote> <blockquote> <p><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Verschachtelte_Raster" rel="nofollow noopener noreferrer">Verschachtelte Raster</a> mit subgrid gehen bis jetzt nur im FF - ich schau schon mal nach guten Beispielen.</p> </blockquote> </blockquote> <p>Ich wollte hier (<a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Grid-Items#feststehender_Footer" rel="nofollow noopener noreferrer">Grid-Items#feststehender_Footer</a> (Bsp. mit Rechtsklick im neuen Tab öffnen)) eigentlich die Navi als subgrid realisieren, aber <code>body nav ul li</code> sind ja keine Kindeskinder sondern fast schon Ururenkel. Hast du /habt ihr eine Idee für ein Beispiel mit 3 Ebenen??</p> <p>Evtl. <code>body > article > img</code> oder <code>body > footer > *</code></p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775218#m1775218 Rolf B 2020-09-03T09:05:32Z 2020-09-03T09:05:32Z grid, 1. areas, 2. text-positionierung <p>Hallo Matthias,</p> <blockquote> <p>Navi als subgrid</p> </blockquote> <p>das kann man so langsam angehen. Bisher war der Fuchs der Einzige, der Subgrid implementiert.</p> <p>Aber im Juni stand im <a href="https://blog.chromium.org/2020/06/improving-chromiums-browser.html" rel="nofollow noopener noreferrer">Chromium Blog</a>, dass das MS Edge Team sich daran gemacht hätte, die Grid-Engine von Chromium zu modernisieren und dabei auch Subgrid einbauen wolle.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775246#m1775246 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-09-04T13:24:49Z 2020-09-04T13:24:49Z Gesucht: Ideen für verschachtelte Grids? <p>@@Matthias Scharwies</p> <blockquote> <p>Hast du /habt ihr eine Idee für ein Beispiel mit 3 Ebenen??</p> </blockquote> <p><a href="https://codepen.io/gunnarbittersmann/pen/gOrXKML" rel="noopener noreferrer">Darf’s auch etwas mehr sein?</a></p> <p> LLAP</p> <div class="signature">-- <br> <em>„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“</em> —@Ann_Waeltin </div> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775242#m1775242 Rolf B 2020-09-04T11:51:17Z 2020-09-04T11:51:17Z Lösung? Tutorial im SELF-Wiki <p>Hallo Gunnar,</p> <blockquote> <p><code>display:contents</code>; </p> </blockquote> <p>Was es nicht alles gibt!</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775243#m1775243 Matthias Scharwies mscharwies@selfhtml.org 2020-09-04T11:52:55Z 2020-09-04T11:52:55Z Lösung? Tutorial im SELF-Wiki <p>Servus!</p> <blockquote> <p>Hallo Gunnar,</p> <blockquote> <p><code>display:contents</code>; </p> </blockquote> <p>Was es nicht alles gibt!</p> </blockquote> <ul> <li><a href="https://rachelandrew.co.uk/archives/2017/07/20/why-display-contents-is-not-css-grid-layout-subgrid/" rel="nofollow noopener noreferrer">Why display: contents is not CSS Grid Layout subgrid</a> Rachel Andrew am 20.07. 2017</li> </ul> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775244#m1775244 Rolf B 2020-09-04T12:03:39Z 2020-09-04T12:03:39Z Lösung? Tutorial im SELF-Wiki <p>Hallo Matthias,</p> <p>Rachel für Gunnar zu zitieren ist schon eine besondere Form von Revanche (um mal die Kombination von Rachel und Rache zu vermeiden).</p> <p>Mich würde auch interessieren, wieso caniuse.com für display:contents wegen Bugs eine eingeschränkte Nutzbarkeit bei Chrodge attestiert, bei Chrome aber nicht. Laut Chromium Bugtracker ist das nicht behoben, sollte also für beide gelten.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775276#m1775276 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-09-05T11:11:53Z 2020-09-05T11:11:53Z Lösung? Tutorial im SELF-Wiki <p>@@Rolf B</p> <blockquote> <p>Rachel für Gunnar zu zitieren ist schon eine besondere Form von Revanche (um mal die Kombination von Rachel und Rache zu vermeiden).</p> </blockquote> <p>Das ist aber wirklich nur Rachel (Verkleinerungsform von Rache), da ich mich lediglich auf die zweifelhafte Aussage, nur Kindelemente könnten Grid-Items sein, bezog und die Nützlichkeit von Subgrid gar nicht in Abrede stellte.</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“</em> —@Ann_Waeltin </div> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775264#m1775264 Matthias Scharwies mscharwies@selfhtml.org 2020-09-05T09:27:03Z 2020-09-05T09:55:58Z Gesucht: Ideen für verschachtelte Grids? <p>Servus!</p> <blockquote> <p>@@Matthias Scharwies</p> <blockquote> <p>Hast du /habt ihr eine Idee für ein Beispiel mit 3 Ebenen??</p> </blockquote> <p><a href="https://codepen.io/gunnarbittersmann/pen/gOrXKML" rel="noopener noreferrer">Darf’s auch etwas mehr sein?</a></p> </blockquote> <p>Das ist ja mal cool. Aber als Anfangsbeispiel braucht man halt etwas, was von der HTML-Struktur und auch dem CSS für Anfänger durchschaubar ist.</p> <p>Ich hab dein Beispiel mal <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Verschachtelte_Raster#Weblinks" rel="nofollow noopener noreferrer">unten</a> verlinkt.</p> <blockquote> <blockquote> <blockquote> <p>Hast du /habt ihr eine Idee für ein Beispiel mit 3 Ebenen?? das kann man so langsam angehen. Bisher war der Fuchs der Einzige, der Subgrid implementiert.</p> </blockquote> </blockquote> </blockquote> <p>Ja, aber dass halt schon mal was dasteht. Ich habe jetzt <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Verschachtelte_Raster#verschachtelte_Raster" rel="nofollow noopener noreferrer">Produktkarten</a> als Beispiel genommen.</p> <p>Komplexere Beispiele kann man dann erstellen, wenn der Browser-Support besser ist.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775278#m1775278 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-09-05T11:22:16Z 2020-09-05T13:13:02Z Gesucht: Ideen für verschachtelte Grids? <p>@@Matthias Scharwies</p> <blockquote> <blockquote> <blockquote> <p>Hast du /habt ihr eine Idee für ein Beispiel mit 3 Ebenen??</p> </blockquote> <p><a href="https://codepen.io/gunnarbittersmann/pen/gOrXKML" rel="noopener noreferrer">Darf’s auch etwas mehr sein?</a></p> </blockquote> <p>Das ist ja mal cool. Aber als Anfangsbeispiel braucht man halt etwas, was von der HTML-Struktur und auch dem CSS für Anfänger durchschaubar ist.</p> </blockquote> <p>Och, die HTML-Struktur ist doch sehr überschaubar. Wo das jetzt als Beispiel herhalten soll, hab ich mal den Pug-Quelltext durch richtiges HTML ersetzt.</p> <p>Ich hatte auch mit dem Gedanken gespielt, nur die Start-Tags zu notieren:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token comment"><!-- End tags are for loosers. --></span> </code></pre> <p>Aber als Beispiel taugt eher ein praktisch sinnvolles, nicht Kunst.</p> <p>BTW, ich hatte erst an den <a href="https://de.wikipedia.org/wiki/Sierpinski-Teppich" rel="nofollow noopener noreferrer">Sierpiński-Teppich</a> gedacht, aber braucht man dann schon eine weniger durchschaubare HTML-Struktur.</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“</em> —@Ann_Waeltin </div> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775281#m1775281 Tabellenkalk 2020-09-05T12:43:52Z 2020-09-05T12:44:21Z Gesucht: Ideen für verschachtelte Grids? <p>Hallo,</p> <blockquote> <p><!-- End tags are for loosers. --></p> </blockquote> <p>Schließ-Tags sind für Löser? Also etwas, das was befestigt, ist nur für Jemanden der etwas lockern will. So gesehn…</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775560#m1775560 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-09-13T09:08:06Z 2020-09-13T09:09:18Z Gesucht: Ideen für verschachtelte Grids? <p>@@Gunnar Bittersmann</p> <blockquote> <p>BTW, ich hatte erst an den <a href="https://de.wikipedia.org/wiki/Sierpinski-Teppich" rel="nofollow noopener noreferrer">Sierpiński-Teppich</a> gedacht</p> </blockquote> <p>☞ <a href="https://twitter.com/pickover/status/1304968916393955334" rel="nofollow noopener noreferrer">https://twitter.com/pickover/status/1304968916393955334</a></p> <p>(Huch, der <a href="/users/2" class="mention registered-user" rel="noopener noreferrer">@Matthias Apsel</a> ist ja mit auf dem Bild!)</p> <p> LLAP</p> <p>PS: Um das Vorposting wiederzufunden, hatte ich nach „sierpinski“ gesucht. 0 Treffer. Erst die Suche nach „sierpiński“ mit ń brachte Erfolg.</p> <p>Sollte nicht ein Suchebegriff ohne diakritische Zeichen auch Treffer liefern, wo dieser richtig geschrieben ist – und andersrum? <a href="/users/1" class="mention registered-user" rel="noopener noreferrer">@Christian Kruse</a></p> <div class="signature">-- <br> <em>„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“</em> —@Ann_Waeltin </div> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775282#m1775282 Der Martin 2020-09-05T12:54:27Z 2020-09-05T12:54:27Z Gesucht: Ideen für verschachtelte Grids? <p>Hi,</p> <blockquote> <blockquote> <p><!-- End tags are for loosers. --></p> </blockquote> </blockquote> <p>das ist mir auch unangenehm aufgefallen.</p> <blockquote> <p>Schließ-Tags sind für Löser?</p> </blockquote> <p>Dann wären es ja <strong>loosener</strong>. Nein, <strong>looser</strong> kann nur der Komparativ des Adjektivs <strong>loose</strong> sein. Also noch lockerer.</p> <p>Aber die Unsitte, die englische Vokabel für <em>verlieren</em> mit Doppel-o zu schreiben, ist irgendwie weit verbreitet. Warum auch immer.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Home is where my beer is. </div> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775284#m1775284 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-09-05T13:09:56Z 2020-09-05T13:11:00Z Gesucht: Ideen für verschachtelte Grids? <p>@@Tabellenkalk</p> <blockquote> <blockquote> <p><!-- End tags are for loosers. --></p> </blockquote> <p>Schließ-Tags sind für Löser?</p> </blockquote> <p><em lang="en">I’m lost.</em> Ich bin völlig aufgelöst.</p> <p>Englische Orthografie ist aber auch eher Glückssache, oder?</p> <p lang="en"><em>“It’s a town full of <strong>losers</strong> and I’m pulling out of here to win”</em><br> —Bruce Springsteen, <a href="https://www.youtube.com/watch?v=x5kXnq5IjdU" rel="nofollow noopener noreferrer">Thunder Road</a></p> <p> LLAP</p> <div class="signature">-- <br> <em>„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“</em> —@Ann_Waeltin </div> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775283#m1775283 Tabellenkalk 2020-09-05T12:58:41Z 2020-09-05T12:58:41Z Gesucht: Ideen für verschachtelte Grids? <p>Hallo,</p> <blockquote> <p>Dann wären es ja <strong>loosener</strong>. Nein, <strong>looser</strong> kann nur der Komparativ des Adjektivs <strong>loose</strong> sein. Also noch lockerer.</p> </blockquote> <p>i hatt vong Satzstellung her halt a Substantiv erwart't. N Komparativ krieg i da nit gbacken…</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775301#m1775301 MudGuard http://www.andreas-waechter.de/ 2020-09-05T15:11:32Z 2020-09-05T15:11:32Z Gesucht: Ideen für verschachtelte Grids? <p>Hi,</p> <blockquote> <p>Englische Orthografie ist aber auch eher Glückssache, oder?</p> </blockquote> <p>ja, daß sich loser auf user reimt, ist schon erstaunlich.</p> <p>Da besteht einfach kein Zusammenhang zwischen Schreibweise und Aussprache, siehe z.B. tough, though, thought, through trough, thorough …</p> <p>Ich find's immer nett, wenn Englisch-Sprecher in einem Forum die Aussprache anhand von geschriebenen Beispielen zu erklären versuchen - besonders oft werden dann Beispiele verwendet, die regional äußerst unterschiedlich ausgesprochen werden …</p> <p>cu,<br> Andreas a/k/a MudGuard</p> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775504#m1775504 Matthias Scharwies mscharwies@selfhtml.org 2020-09-12T03:37:20Z 2020-09-12T03:42:17Z grid, 1. areas, 2. text-positionierung <p>Servus!</p> <blockquote> <blockquote> <p>Hallo Michaah, ...</p> </blockquote> <blockquote> <p>Das div #wiewo soll unten rechts hin:</p> <pre><code class="block language-css"><span class="token selector">#wowie</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> -2 / -1<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> 4 / 5<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> </blockquote> <p>Das klappt - du hast in aber Deinem neuen Online-Beispiel <a href="http://ac52.de/test-rechtsunten_grid.html" rel="nofollow noopener noreferrer">http://ac52.de/test-rechtsunten_grid.html</a> immer noch die Doppelung grid-area vs grid-column.</p> <p>→ <code>grid-area: wo-und-wie;</code>wird überschrieben.</p> <blockquote> <blockquote> <p>Vorgehensweise ist wie bei h1:</p> <ul> <li><code>grid-column: -2 / -1;</code>geht vom rechten Rand (-1) eins weiter links</li> <li><code>grid-row: 4 / 5;</code> setzt das Element zwischen 4. und 5. Linie <ul> <li>Warum geht hier nicht <code>grid-row: -2 / -1;</code> ? - weil wir keinen Wert für grid-template-rows gesetzt haben.</li> </ul> </li> </ul> </blockquote> </blockquote> <blockquote> <p>A) Das Onlinebeispiel ist jedoch anders strukturiert als das hier oben dargestellte. Ersteres weiß ich nicht mit meinen Layout in Zusammenhang zu bringen, letzters hat mir dann doch weitergeholfen ... auch wenn ich die Prinzipien (templates vs. konkrete Definitionen) nach wie vor nicht verstehe.</p> </blockquote> <p>In den ASCII-Templates legst du ein Raster fest. Auch mit der Kombi</p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>5<span class="token punctuation">,</span> 1fr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>5<span class="token punctuation">,</span> 1fr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>legst du ein Raster fest. Was passiert aber, wenn ein neues Kindelement auftaucht? Also könntest du die letzte Deklaration weglassen und so viel Reihen bilden lassen wie möglich.</p> <p>Dann kannst du aber nicht mit -1 die <strong>letzte</strong> Rasterlinie ansprechen, sondern musst mit <strong>4/5</strong> das grid item zwischen 4. und 5. Linie definieren.</p> <blockquote> <p>B) Das jedoch mal beiseite, grid-im-grid ("#wowie {display: grid;}" im onlinebspl.) ist oder ist <em>nicht</em> das selbe wie ein subgrid? Ich verstehe nicht warum ich #wowie ein "display:grid;" mitgeben muß?</p> </blockquote> <p>Weil grid eben <strong>nur auf direkte Kindelemente</strong> wirkt.</p> <p>Es gibt <code>subgrid</code> (<a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Verschachtelte_Raster" rel="nofollow noopener noreferrer">CSS/Tutorials/Grid/Verschachtelte_Raster</a>), das läuft aber nur im Firefox.</p> <blockquote></blockquote> <blockquote> <p>Hier ist nun mein Hauptanliegen: warum ist zwischen p#adresse und p#kontakt soviel Platz, bzw. woran richtet p#adresse sich aus?</p> <p>In den Entwicklertools (F12) habe ich nichts ausmachen können was diesen Abstand definiert.</p> </blockquote> <p>Weil du nur <code>#wowie p</code> selektierst:</p> <pre><code class="block language-css"><span class="token selector">#wowie</span> <span class="token punctuation">{</span> <span class="token property">align-items</span><span class="token punctuation">:</span> end<span class="token punctuation">;</span> <span class="token property">justify-items</span><span class="token punctuation">:</span> end<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#wowie p</span> <span class="token punctuation">{</span> <span class="token property">align-self</span><span class="token punctuation">:</span> end<span class="token punctuation">;</span> <span class="token property">justify-self</span><span class="token punctuation">:</span> end<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <blockquote> <p>Die einzige (unschöne und unerwünschte) Möglichkeit p#adresse weiter nach unten zu drücken besteht für mich darin oben ein paar "br" drauf zu packen. Ginge das nicht anders?</p> </blockquote> <p>Doch. Du hast hier wieder doppelt gemoppelt:</p> <p><code>#wowie {align-items:end}</code> legt <strong>alle</strong> Rasterfelder nach unten</p> <p><code>#wowie p {align-self:end}</code> legt <strong>alle</strong> p innerhalb von #wowie nach unten</p> <p>Du hast aber mittlerweile 2p-Elemente, die unterschiedlich formatiert werden sollen.</p> <p>Mit p#adresse , bzw besser nur #adresse könntest du jetzt der Adresse eine eigene Festlegung geben. Abstände werden nicht mit br sondern im CSS mit margin, padding und gap realisiert.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775520#m1775520 michaah 2020-09-12T10:10:07Z 2020-09-12T10:10:07Z grid, 1. areas, 2. text-positionierung <blockquote> <p>Weil grid eben <strong>nur auf direkte Kindelemente</strong> wirkt.</p> </blockquote> <p>Ok, <em>das</em> werde ich mir mal ebenso dick und fett notieren </p> <blockquote> <p>Es gibt <code>subgrid</code> (<a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Verschachtelte_Raster" rel="nofollow noopener noreferrer">CSS/Tutorials/Grid/Verschachtelte_Raster</a>), das läuft aber nur im Firefox.</p> <blockquote></blockquote> </blockquote> <p>Danke für die Klärung. Ich will hier bestimmt keine Auszeichnungen verwenden die zu browserspezifisch sind. Das war der Grund meiner Nachfrage, auch das hat sich damit geklärt. Danke.</p> <p>...</p> <blockquote> <p>Doch. Du hast hier wieder doppelt gemoppelt:</p> </blockquote> <p>Ich weiß nicht warum ich mir bei grid soooo schwer tue die Zusammenhänge in ihrer Grundstruktur zu erkennen ....</p> <blockquote> <p><code>#wowie {align-items:end}</code> legt <strong>alle</strong> Rasterfelder nach unten</p> </blockquote> <p>"Rasterfelder" meint hier "alle 4 Zellen der grid-area "wo-und-wie""?</p> <blockquote></blockquote> <blockquote> <p><code>#wowie p {align-self:end}</code> legt <strong>alle</strong> p innerhalb von #wowie nach unten</p> </blockquote> <p>Diesen Satz würde ich verstehen, wenn das Ergebnis wäre dass sich beide "p" überschneiden/überdecken. Weil sie genau das nicht tun verstehe ich "alle nach unten" nicht. Vermutlich ist aber hier gemeint "von unten her aufeinander gestapelt".</p> <blockquote> <p>Du hast aber mittlerweile 2p-Elemente, die unterschiedlich formatiert werden sollen.</p> <p>Mit p#adresse , bzw besser nur #adresse könntest du jetzt der Adresse eine eigene Festlegung geben. Abstände werden nicht mit br sondern im CSS mit margin, padding und gap realisiert.</p> </blockquote> <p>Das ist mir klar. Aber das Problem ist doch gerade dass alle Werte auf "0" stehen, und dennoch dieser große Abstand vorhanden ist, im Seiteninspector zwischen den beiden p Elementen kein definierter Abstand vorzufinden ist ... und meine Frage bleib: Woran richtet sich #adresse aus? Was verursacht den Abstand zwischen #adresse und #kontakt?</p> <blockquote> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> </blockquote> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775521#m1775521 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-09-12T10:14:16Z 2020-09-12T10:14:16Z grid, 1. areas, 2. text-positionierung <p>@@michaah</p> <blockquote> <blockquote> <p>Weil grid eben <strong>nur auf direkte Kindelemente</strong> wirkt.</p> </blockquote> <p>Ok, <em>das</em> werde ich mir mal ebenso dick und fett notieren </p> </blockquote> <p>Tu das, aber nimm nicht den dicksten Stift, den du hast. Den brauchst du nämlich, um das Notierte gleich wieder durchzustreichen. <a href="https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775239#m1775239" rel="noopener noreferrer">Weil es nicht stimmt.</a></p> <p>Warum der <a href="/users/3833" class="mention registered-user" rel="noopener noreferrer">@Matthias Scharwies</a> das trotzdem wiederholt hat? ‍♂️</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“</em> —@Ann_Waeltin </div> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775545#m1775545 michaah 2020-09-12T15:38:05Z 2020-09-12T15:42:34Z grid, 1. areas, 2. text-positionierung <p>Ok, ich habs herausbekommen:</p> <p>Die neu verlinkte "problematische Seite" zeigt das, man ist in einer grid-area nicht ganz so frei wie ich hoffte.</p> <p>#adresse richtet sich an der die area durchquerenden grid Rasterlinie aus. Und die hängt eben auch von benachbartem Inhalt ab, im Beispiel von den benannten areas graphik-6 und graphik-8. Löscht man diese verschwindet der freie Raum zwischen #adresse und #kontakt. :-(</p> <p>Man kann das auch mit einem oberen margin erzwingen, was mir jedoch sehr verkrampft erscheint.</p> <p>Möglicherweise kann man auch eine 2p-in-div-in-grid-suppe zubereiten (nicht ausprobiert), oder den Inhalt der beiden p in ein p packen, letzteres wäre zwar eine technische Lösung, gefällt mir aber formal nicht.</p> <p>Kurz, wenn jemand ne idee hat wie ich dem obern p austreibe sich an der Rasterlinie zu orientieren und sich einfach auf das untere p setzt ... her damit.</p> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775524#m1775524 michaah 2020-09-12T10:56:29Z 2020-09-12T10:56:29Z grid, 1. areas, 2. text-positionierung <blockquote> <p>Tu das, aber nimm nicht den dicksten Stift, den du hast. Den brauchst du nämlich, um das Notierte gleich wieder durchzustreichen. <a href="https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775239#m1775239" rel="noopener noreferrer">Weil es nicht stimmt.</a></p> </blockquote> <p>Da bin ich natürlich ganz der Rechte das zu beurteilen. Das habe ich mir auf für den Zeitpunkt wo ich das durchblicke ... aber könnte es nicht sein, dass er vor dem Komma und du hinter dem Komma recht hast? Dein sehr schönes Beispiel hatte ich schon vor diesem Posting angeschaut. ich würde es verwenden wenn ich es ansatzweise durchblicken würde.</p> <p>Würdest du meiner Annahme zustimmen, dass <em>im Normalfall</em> (und jetzt nicht spitzfindig werden ) grid sich auf die Kindelemente beschränkt, diese Einschränkung jedoch sinnvoll ausgehebelt werden kann?</p> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775526#m1775526 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-09-12T11:10:10Z 2020-09-12T11:10:10Z grid, 1. areas, 2. text-positionierung <p>@@michaah</p> <blockquote> <p>aber könnte es nicht sein, dass er vor dem Komma und du hinter dem Komma recht hast?</p> </blockquote> <p>Ja. Nur dass er den Teil nach dem Komma verschwiegen hat.</p> <p>Grid-Items sind die Kindelemente des Grid-Elements (das war der Teil vor dem Komma), <code>::before</code>- und <code>:after</code>-Pseudoelemente des Grid-Elements und andere Elemente, die per CSS dazu gebracht werden sich so zu verhalten, als wären sie Kindelemente (das war der Teil nach dem Komma).</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“</em> —@Ann_Waeltin </div> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775543#m1775543 michaah 2020-09-12T14:22:09Z 2020-09-12T14:22:09Z grid, 1. areas, 2. text-positionierung <p>Mercie.</p> <p>Gruß</p> <p>mhld</p> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775555#m1775555 michaah 2020-09-12T18:48:46Z 2020-09-12T18:48:46Z grid, 1. areas, 2. text-positionierung <p>So, nun also doch die 2p-in-div-in-grid-suppenlösung. Funktioniert und hat eine innere Stimmigkeit. <a href="http://ac52.de/2p-in-div_suppenl%C3%B6sung.html" rel="nofollow noopener noreferrer">Ist halt suppig.</a></p> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775561#m1775561 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2020-09-13T09:32:41Z 2020-09-13T09:32:41Z Gesucht: Ideen für verschachtelte Grids? <p>Hallo Gunnar Bittersmann,</p> <blockquote> <p>(Huch, der <a href="/users/2" class="mention registered-user" rel="noopener noreferrer">@Matthias Apsel</a> ist ja mit auf dem Bild!)</p> </blockquote> <p>Aber nur am Rande </p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775562#m1775562 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-09-13T09:39:41Z 2020-09-13T09:39:41Z Gesucht: Ideen für verschachtelte Grids? <p>@@Matthias Apsel</p> <blockquote> <blockquote> <p>(Huch, der <a href="/users/2" class="mention registered-user" rel="noopener noreferrer">@Matthias Apsel</a> ist ja mit auf dem Bild!)</p> </blockquote> <p>Aber nur am Rande </p> </blockquote> <p>Aber mit Strapsen. </p> <p> LLAP</p> <div class="signature">-- <br> <em>„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“</em> —@Ann_Waeltin </div> https://forum.selfhtml.org/self/2020/aug/29/grid-1-areas-2-text-positionierung/1775563#m1775563 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2020-09-13T09:41:43Z 2020-09-13T09:41:43Z Gesucht: Ideen für verschachtelte Grids? <p>Hallo Gunnar Bittersmann,</p> <blockquote> <p>Aber mit Strapsen. </p> </blockquote> <p>und mit nicht viel mehr am Leib. </p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div>