tag:forum.selfhtml.org,2005:/self Mosaik + Detailzeile mit CSS – SELFHTML-Forum 2018-02-23T07:33:39Z https://forum.selfhtml.org/self/2018/feb/21/mosaik-plus-detailzeile-mit-css/1714269?srt=yes#m1714269 x51398 2018-02-21T14:49:36Z 2018-02-21T15:05:54Z Mosaik + Detailzeile mit CSS <p>Hallo,</p> <p>ich möchte folgendes Layout erreichen: ein Raster mit beliebig vielen Quadraten, responsiv mit x.., 4, 3, 2 oder einem Element pro Zeile. Beim :hover auf ein beliebiges Quadrat soll unter dessen Zeile ein 100% breiter dazugehöriger Inhalt eingeblendet werden, die restlichen Zeilen rutschen also nach unten.</p> <p>Hier zur Veranschaulichung: Augangszustand</p> <p><a href="/images/fee3ea6d-9cd8-40d7-b8e0-7f0e72b448c1.png" rel="noopener noreferrer"><img src="/images/fee3ea6d-9cd8-40d7-b8e0-7f0e72b448c1.png?size=medium" alt="Zustand 1" loading="lazy"></a></p> <p>Hover</p> <p><a href="/images/f5aa44c4-4f81-4095-8198-9f7c8ebd5a2d.png" rel="noopener noreferrer"><img src="/images/f5aa44c4-4f81-4095-8198-9f7c8ebd5a2d.png?size=medium" alt="Zustand 2" loading="lazy"></a></p> <p>Ist das nur mit CSS möglich? Ein Denkanstoß oder weiterführender Suchbegriff wäre sehr nett.</p> <p>Danke und viele Grüße Basti</p> https://forum.selfhtml.org/self/2018/feb/21/mosaik-plus-detailzeile-mit-css/1714271?srt=yes#m1714271 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-02-21T15:34:30Z 2018-02-21T15:34:30Z Mosaik + Detailzeile mit CSS <p>@@x51398</p> <blockquote> <p>Ist das nur mit CSS möglich?</p> </blockquote> <p>Ja.</p> <blockquote> <p>Ein Denkanstoß oder weiterführender Suchbegriff wäre sehr nett.</p> </blockquote> <p>Grid, <code>grid-auto-flow: row dense</code>, <code>grid-column: 1/-1;</code></p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/feb/21/mosaik-plus-detailzeile-mit-css/1714290?srt=yes#m1714290 Henry 2018-02-21T20:23:07Z 2018-02-21T20:23:07Z Mosaik + Detailzeile mit CSS <p>Hallo x51398,</p> <p>nur ein paar Fragen um das zu verstehen:</p> <p>dein Codepenbeispiel hat ja noch Rechtecke. Sollen aber schon Quadrate sein? Was ist als Inhalt vorgesehen, Bilder oder Text?</p> <p>Was soll im Hoverzustand erscheinen im Quadrat und in der Zeile?</p> <p>Soll in der mobilen(responsive) Ansicht wirklich nur eine Verkleinerung des Ganzen stattfinden oder auch eine Verschiebung?</p> <p>Gruss<br> Henry</p> https://forum.selfhtml.org/self/2018/feb/21/mosaik-plus-detailzeile-mit-css/1714365?srt=yes#m1714365 Martl 2018-02-23T07:33:39Z 2018-02-23T07:33:39Z Mosaik + Detailzeile mit CSS <p>Hallo zusammen,</p> <p>beim Querlesen der Thread-Überschriften: Mosaik‽ Da gibts doch was von <a href="https://de.wikipedia.org/wiki/NCSA_Mosaic" rel="nofollow noopener noreferrer">NCSA?</a> Ihr könnt einem aber auch einen Schreck einjagen.</p> <p>Grüße, Martl</p> https://forum.selfhtml.org/self/2018/feb/21/mosaik-plus-detailzeile-mit-css/1714280?srt=yes#m1714280 x51398 2018-02-21T17:20:14Z 2018-02-21T17:20:14Z Mosaik + Detailzeile mit CSS <p>Lieber Gunnar,</p> <p>vielen Dank! Wen es interessiert: Hier eine erste Umsetzung -> <a href="https://codepen.io/x51398/pen/YeLRQp" rel="noopener noreferrer">https://codepen.io/x51398/pen/YeLRQp</a></p> <p>Über die richtige Elementwahl zur Darstellung einer solchen Struktur bin ich noch am Nachdenken...</p> <p>Grüße</p> https://forum.selfhtml.org/self/2018/feb/21/mosaik-plus-detailzeile-mit-css/1714281?srt=yes#m1714281 Rolf B 2018-02-21T17:51:34Z 2018-02-21T17:57:11Z Mosaik + Detailzeile mit CSS <p>Hallo x51398,</p> <p>ich weiß noch nicht, wie man es besser machen kann ohne andere lästige Auswirkungen zu bekommen, aber dein Layout flackert. Mach den Ausgabebereich deines Pen mal so hoch, dass es gerade noch keinen vertikalen Scrollbar gibt und durch den hover einer entstehen würde.</p> <p>Und nun halte den Mauszeiger mal ganz knapp an den rechten Rand von einer der Boxen.</p> <p>Was passiert: Durch den Hover erscheint der div, der lässt die Scrollbar erscheinen, das macht den Clientbereich schmaler, das macht die Box schmaler, nun ist die Maus im Zwischenraum, es hovert nicht mehr, der div verschwindet, die Scrollbar verschwindet, der Clientbereich wird breiter, das macht die Box breiter, nun hovert es wieder - goto start; goto Disco;</p> <p>Problem ist die variable Breite des grid, man muss eine Lösung finden mit der die Breite nicht vom Scrollbar des Containers abhängt. Der naïve Ansatz wäre, dem Body ein <code>overflow-y: scroll;</code> zu geben; der zweite bestände darin, das grid auf eine Breite von calc(100vw - X) zu setzen - das führt aber zu einer mühsamen Rechnerei mit den Paddings und Margins der Eltern-Elemente. Bei mir hat X=50px funktioniert. Alles noch nicht gut.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2018/feb/21/mosaik-plus-detailzeile-mit-css/1714282?srt=yes#m1714282 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-02-21T18:04:34Z 2018-02-21T18:04:34Z Mosaik + Detailzeile mit CSS <p>@@x51398</p> <blockquote> <p>vielen Dank! Wen es interessiert: Hier eine erste Umsetzung -> <a href="https://codepen.io/x51398/pen/YeLRQp" rel="noopener noreferrer">https://codepen.io/x51398/pen/YeLRQp</a></p> </blockquote> <p>Nicht tastaturbedienbar, meh! Die „Quadrate“ (bei dir gegenwärtig <code>h3</code>) mit <code>tabindex="0"</code> per Tastatur fokussierbar machen und die Stile nicht nur für <code>:hover</code>, sondern auch für <code>:focus</code> angeben! (Nicht, dass das Ding damit schon für alle Nutzer zugänglich wäre …)</p> <p>Als Nutzer ist man versucht, mit der Maus von dem „Quadrat“ in die „Lasche“ zu fahren – und schwupps ist die Lasche weg! Wie gedenkst du dieses Problem zu lösen?</p> <blockquote> <p>Über die richtige Elementwahl zur Darstellung einer solchen Struktur bin ich noch am Nachdenken...</p> </blockquote> <p>Heißt du vielleicht … Beschreibungsliste? <code>section</code> →<code>dl</code>; <code>h3</code> → <code>dt</code>; <code>div</code> → <code>dd</code>.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/feb/21/mosaik-plus-detailzeile-mit-css/1714286?srt=yes#m1714286 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-02-21T19:34:35Z 2018-02-21T19:34:35Z Mosaik + Detailzeile mit CSS <p>@@x51398</p> <blockquote> <p>vielen Dank! Wen es interessiert: Hier eine erste Umsetzung -> <a href="https://codepen.io/x51398/pen/YeLRQp" rel="noopener noreferrer">https://codepen.io/x51398/pen/YeLRQp</a></p> </blockquote> <p>BTW: <code class="bad">grid-template-columns: 25% 25% 25% 25%</code> ist nicht so toll. Das Gute an Grid ist ja, dass man sich die Breiten nicht selber ausrechnen muss, sondern einfach sagen kann: Hömmal Browser, mach mal alle Spalten gleich breit:<br> <code>grid-template-columns: 1fr 1fr 1fr 1fr</code></p> <p>Oder noch besser: <code class="good">grid-template-columns: repeat(4, 1fr)</code> – sprechender Code.</p> <p>Aber du wolltest doch gar nicht 4 Spalten, sondern „responsiv mit x.., 4, 3, 2 oder einem Element pro Zeile“‽<br> Also <code>grid-template-columns: repeat(auto-fill, minmax(⟨Mindestbreite⟩, 1fr))</code> ☞ <a href="https://codepen.io/gunnarbittersmann/pen/JNvpea" rel="noopener noreferrer">flexible grid</a>.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/feb/21/mosaik-plus-detailzeile-mit-css/1714287?srt=yes#m1714287 x51398 2018-02-21T19:49:30Z 2018-02-21T19:49:30Z Mosaik + Detailzeile mit CSS <p>Da ist noch viel zu tun... Danke!</p> https://forum.selfhtml.org/self/2018/feb/21/mosaik-plus-detailzeile-mit-css/1714335?srt=yes#m1714335 x51398 2018-02-22T14:04:42Z 2018-02-22T14:04:42Z Mosaik + Detailzeile mit CSS <p>Hallo Henry,</p> <p>das Codepenbeispiel war nur ein erster Test, ob das Konzept "Detailbereich mit 100% Breite unter der jeweiligen Zeile einblenden" überhaupt funktioniert. Das Ganze soll evtl. so eine Art dynamische Sitemap werden - allerdings stehe ich momentan noch vor dem Problem, dass die übergeordneten "aktiven" Elemente dann auch beim Hover des eingeblendeten Unterelements aktiviert bleiben.</p> <p>Vielleicht ist ein Ansatz mit verschachtelten Listen und dem Erzeugen des o.g. Erscheinungsbildes via Javascript der bessere Weg - mal sehen.</p> <p>Grüße Basti</p>