tag:forum.selfhtml.org,2005:/self Grid: Ausrichtung – SELFHTML-Forum 2021-03-25T20:12:48Z https://forum.selfhtml.org/self/2021/mar/20/grid-ausrichtung/1786099?srt=yes#m1786099 Gerrit 2021-03-20T18:24:57Z 2021-03-20T18:24:57Z Grid: Ausrichtung <p>Hallo, wie kann ich in dem <a href="https://jsfiddle.net/5scxrpm3/" rel="noopener noreferrer">Beispiel</a><br> den Block "text1 img text2" so in der Horizontalen verschieben, dass sie mittig stehen in dem Bereich vom Anfang Text1 bis zum Zeilenende, also so wie etwa <a href="https://jsfiddle.net/9k3mdo0v/1/" rel="noopener noreferrer">dies</a><br> ohne Punkte.</p> https://forum.selfhtml.org/self/2021/mar/20/grid-ausrichtung/1786108?srt=yes#m1786108 Christian Kruse https://wwwtech.de/ 2021-03-20T18:48:28Z 2021-03-20T18:48:28Z Grid: Ausrichtung <p>Hallo Gerrit,</p> <p>setze als Eigenschaften:</p> <pre><code class="block language-css"> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 20px 20px <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">max-width</span><span class="token punctuation">:</span>80%<span class="token punctuation">;</span> </code></pre> <p>Durch das <code>repeat(3, 1fr)</code> verteilst du den freien Raum gleichmäßig auf die drei Elemente und durch das <code>max-width: 80%</code> sorgst du dafür, dass <code>header</code> genau so breit wird wie <code>article</code>.</p> <p>Freundliche Grüße,<br> Christian Kruse</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> https://forum.selfhtml.org/self/2021/mar/20/grid-ausrichtung/1786111?srt=yes#m1786111 Mr.Murphy 2021-03-20T19:04:05Z 2021-03-20T19:04:05Z Grid: Ausrichtung <p>Ich biete:</p> <pre><code class="block">header { display: grid; grid-template-columns: auto auto 1fr auto 1fr; align-items: center; grid-gap: 1em; } header p { font-size: 2em; margin: 0; } header p:nth-of-type(2) { text-align: right } ... </code></pre> https://forum.selfhtml.org/self/2021/mar/20/grid-ausrichtung/1786117?srt=yes#m1786117 Rolf B 2021-03-20T22:16:37Z 2021-03-20T22:16:37Z Grid: Ausrichtung <p>Hallo Gerrit,</p> <p>das braucht mehr Informationen, um ein Seitenlayout korrekt empfehlen zu können.</p> <p>Zusammen mit den Vorschlägen, die für den Header gemacht wurden (Breite auf 80% begrenzen) sehe ich bei Dir eine Seitenaufteilung in dieser Art:</p> <p><a href="/images/d967c504-89c4-11eb-92af-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/d967c504-89c4-11eb-92af-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> <p>Wird der Header auf eine Breite von 80% gesetzt, um den 80% im main-Teil zu entsprechen, bleibt der rosa Bereich frei.</p> <p>Bereits in deinem Layout ist der blaue Bereich frei.</p> <p>Mein grundsätzlicher Vorschlag wäre, all diese Bereiche in einem Grid darzustellen, was mit Hilfe benannter Gridbereiche sehr schön in einem Template darstellbar wäre. Ich würde dann auch die nav aus dem header herausnehmen und in eigenen eigenen Gridbereich setzen, und den eigentlichen Header (x, text1, img und text2) durch ein eigenes Grid unterteilen (mit Subgrid wäre das eleganter machbar, aber das ist bislang Firefox-only).</p> <p>Aber damit da was draus wird, müsste man wissen, was mit dem rosa und dem blauen Bereich passieren soll? Kommt da was hin? Bleiben die leer? Und wie entwickelt sich das Ganze, wenn das Fenster schmaler wird - gibt es da ein anderes Layout, um besser auf - beispielsweise - ein Smartphone zu passen?</p> <p>Frage wäre auch, ob es spezielle Anforderungen an die Platzierung der x, text1, img und text2 Elemente gibt. Das hat starke Auswirkungen auf die Grid-Definition. Wenn Du das offen lässt, bilden wir alle irgendwelche Hypothesen und du bekommst Teillösungen, die zum Rest deiner Ideen vielleicht nicht passen.</p> <p>Einen möglichen Ansatz - keine Ahnung ob der für Dich passt - habe ich mal gemacht. Ich habe dafür die Breitendefinition umgedreht: statt zwei Spalten mit 80% und 1fr nehme ich drei Spalten mit 2em + 1fr + 20%. Ansonsten integriert er die Ideen von Christian und McMurphy.</p> <p><a href="https://jsfiddle.net/Rolf_b/r30tj2ms/" rel="noopener noreferrer">https://jsfiddle.net/Rolf_b/r30tj2ms/</a></p> <p>Entscheidend ist dies hier:</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</span><span class="token punctuation">:</span> <span class="token string">"nav header rest"</span> auto <span class="token string">"main main rest"</span> auto / 2em 1fr 20%<span class="token punctuation">;</span> <span class="token property">grid-gap</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> nav<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">header</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> header<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> 2em 1fr auto 1fr<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> <span class="token selector">main</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> main<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Durch die <code>grid-area</code> Angabe wird das Element dorthin platziert, wo der entsprechende Name im grid-template steht. Das body-grid hat 3 Spalten. Und das main-Element erstreckt sich von Spalte 1 bis 2. Das kann man auch mit grid-row und grid-column Angaben machen, aber grid-area ist wesentlich besser lesbar. Was Du mit dem "rest" Bereich machst - keine Ahnung, hast Du uns nichts zu erzählt.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/mar/20/grid-ausrichtung/1786307?srt=yes#m1786307 Gerrit 2021-03-25T13:20:50Z 2021-03-25T13:20:50Z Grid: Navigation bei breiterem Viewport <p>Hallo,<br> mit Hilfe von Rolfs <a href="https://jsfiddle.net/Rolf_b/r30tj2ms/" rel="noopener noreferrer">Vorschlag</a> und geduldiger Unterstützung habe ich jetzt die schmale Version meiner Seite fertig.<br> Wie empfohlen, habe ich das Nav-Icon von der Kopfzeile entfernt.<br> Jetzt möchte ich den Aufbau für die breiteren Viewports realisieren.<br> Da sollen die Punkte der Navigation in einer linken Spalte erscheinen.<br> Die notwendige Grid-Definitiion in dem @media-Anweisung ist klar.</p> <p>Ist folgende Vorgehensweise richtig?</p> <ul> <li>Bisheriges nav unsichtbar machen.</li> <li>Zweites nav definieren in dem main-Bereich (unsichtbar bei schmalen Geräten.<br> Schönen Gruß<br> Gerrit</li> </ul> https://forum.selfhtml.org/self/2021/mar/20/grid-ausrichtung/1786134?srt=yes#m1786134 Gerrir 2021-03-21T12:35:09Z 2021-03-21T12:35:09Z Grid: Ausrichtung <p>Hallo,<br> der rosa Bereich soll zu dem weißen hinzugeschlagen werden. Warum existiert dieser überhaupt?<br> Ich dachte, dass die grid-Definition in main nicht zurück nach oben wirkt.<br> Der blaue Bereich entält i.d.R. ebenfalls Text.</p> https://forum.selfhtml.org/self/2021/mar/20/grid-ausrichtung/1786153?srt=yes#m1786153 Gerrit 2021-03-21T14:55:48Z 2021-03-21T14:55:48Z Grid: Ausrichtung <p>Ergänzung:<br> Also etwa so:</p> <p><a href="/images/73083492-8a55-11eb-8397-b42e9947ef30.jpg" rel="noopener noreferrer"><img src="/images/73083492-8a55-11eb-8397-b42e9947ef30.jpg?size=medium" alt="" title="Beispiel" loading="lazy"></a></p> https://forum.selfhtml.org/self/2021/mar/20/grid-ausrichtung/1786159?srt=yes#m1786159 Rolf B 2021-03-21T18:06:18Z 2021-03-21T18:06:18Z Grid: Ausrichtung <p>Hallo Gerrit,</p> <blockquote> <p>der rosa Bereich soll zu dem weißen hinzugeschlagen werden. Warum existiert dieser überhaupt?</p> </blockquote> <p>Du hast doch geschrieben, dass "text1 img text2" über dem main Bereich zentriert werden sollen. Das kriegt man an am einfachsten hin, wenn man den Kopfbereich genauso breit wie diesen 80% Bereich von main macht. Und dann bleibt der rosa Bereich übrig.</p> <p>Allerdings bringst Du die Zähne nicht auseinander (bzw. die Finger nicht auf die Tasten), um genau festzulegen, wie die Platzierung von text1/img/text2 erfolgen soll. Da rate ich weiterhin herum.</p> <ul> <li>soll "img" immer an der gleichen Stelle stehen, egal, wie lang der Inhalt von "x", "text1" und "text2" ist?</li> <li>Oder soll der Block "text1 img text2" im Weißraum rechts von "x" zentriert werden?</li> <li>Darf der Inhalt des "text2" Elements dabei auch über den 80% Bereich von main hinausragen, wenn die Inhalte länger sind?</li> </ul> <p>Das sind alles Detailfragen, aber die müssen geklärt sein, sonst kann man kein Layout bauen.</p> <p>Du kannst in meinem Grid-Vorschlag das Template so ändern:</p> <pre><code class="block language-css"> <span class="token property">grid-template</span><span class="token punctuation">:</span> <span class="token string">"nav header header"</span> auto <span class="token string">"main main rest"</span> auto / 2em 1fr 20%<span class="token punctuation">;</span> </code></pre> <p>Dann würde der Header die Grid-Spalten 2 und 3 überdenken, also den rosa Bereich mit einnehmen. Der Block, der in den blauen Bereich hineinkommt, musst Du mit <code>grid-area: rest</code> dorthin bringen.</p> <p>Und dann kannst Du experimentieren. Du kannst dem Header einen margin-right geben, du kannst auch für das Grid im Header die Breitenverhältnisse ändern. Im Moment ist text1 und text2 1:1, aber du könntest das grid-template im Header auch als <code>grid-template-columns: 2em 3fr auto 5fr;</code> angeben, dann würden sich die Breiten von text1 und text2 wie 3:5 verhalten, was das Ganze nach links schiebt.</p> <p>Ich kann Dir nicht sagen, was "am besten" oder "richtig" ist. Jede Variante hat ihre Berechtigung, es hängt nur davon ab, was Du eigentlich willst. Siehe meinen Fragenkatalog am Anfang. Du hast deine Absichten mit "Also etwa so" nur sehr allgemein formuliert.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/mar/20/grid-ausrichtung/1786172?srt=yes#m1786172 Gerrit 2021-03-22T08:52:23Z 2021-03-22T08:52:23Z Grid: Ausrichtung <p>Hallo Rolf,</p> <blockquote> <blockquote> <p>der rosa Bereich soll zu dem weißen hinzugeschlagen werden. Warum existiert dieser überhaupt?</p> </blockquote> <p>Du hast doch geschrieben, dass "text1 img text2" über dem main Bereich zentriert werden sollen. Das kriegt man an am einfachsten hin, wenn man den Kopfbereich genauso breit wie diesen 80% Bereich von main macht. Und dann bleibt der rosa Bereich übrig.</p> </blockquote> <p>Ich habe nichts von einer Zentrierung über dem main-Bereich geschrieben.</p> <p>Im ersten Beitrag hatte ich geschrieben:</p> <blockquote> <blockquote> <p>Hallo, wie kann ich in dem Beispiel den Block "text1 img text2" so in der Horizontalen verschieben, dass sie mittig stehen in dem Bereich vom Anfang Text1 bis zum Zeilenende, also so wie etwa <a href="https://jsfiddle.net/9k3mdo0v/1/" rel="noopener noreferrer">dies</a> ohne Punkte.</p> </blockquote> </blockquote> <p>Also hier ist schon vom Zeilenende die Rede.</p> <blockquote> <ul> <li>soll "img" immer an der gleichen Stelle stehen, egal, wie lang der Inhalt von "x", "text1" und "text2" ist?</li> </ul> </blockquote> <p>Nein</p> <blockquote> <ul> <li>Oder soll der Block "text1 img text2" im Weißraum rechts von "x" zentriert werden?</li> </ul> </blockquote> <p>Ja</p> <blockquote> <ul> <li>Darf der Inhalt des "text2" Elements dabei auch über den 80% Bereich von main hinausragen, wenn die Inhalte länger sind?</li> </ul> </blockquote> <p>Ja, dies ist auch in meinem ersten Beitrag schon der Fall. In einem Satz: "text1 img text2" sollen in der angegebenen Reihenfolge in dem Bereich zentriert werden, der hinter dem x beginnt und am Ende der Zeile (am rechten Viewportrand) endet, unabhängig davon wie main aufgeteilt wird.</p> <blockquote></blockquote> https://forum.selfhtml.org/self/2021/mar/20/grid-ausrichtung/1786175?srt=yes#m1786175 Rolf B 2021-03-22T09:40:14Z 2021-03-22T09:40:14Z Grid: Ausrichtung <p>Hallo Gerrit,</p> <p>gut. Dann wäre das geklärt. Einen margin-right am Header-Element brauchst Du dann nicht, und Spielereien mit den fr-Verhältnissen von text1 und text2 auch nicht.</p> <p>Du müsstest mit dem, was ich Dir vorgeschlagen habe, experimentieren und zum Erfolg kommen können.</p> <blockquote> <blockquote> <p>Oder soll der Block "text1 img text2" im Weißraum rechts von "x" zentriert werden?</p> </blockquote> </blockquote> <blockquote> <p>Ja</p> </blockquote> <p>Für diesen Fall solltest Du das 2em im Grid-Template des header Elements noch durch auto ersetzen, damit ein unterschiedlich langes "x" berücksichtigt wird:</p> <pre><code class="block language-css"> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> auto 1fr auto 1fr<span class="token punctuation">;</span> </code></pre> <blockquote> <p>...</p> </blockquote> <p>Bitte. Gern geschehen.</p> <p>Viele Grüße<br> <em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/mar/20/grid-ausrichtung/1786320?srt=yes#m1786320 Rolf B 2021-03-25T17:50:07Z 2021-03-25T17:50:07Z Grid: Navigation bei breiterem Viewport <p>Hallo Gerrit,</p> <blockquote> <ul> <li>Bisheriges nav unsichtbar machen.</li> <li>Zweites nav definieren in dem main-Bereich</li> </ul> </blockquote> <p>Tjaaa - ich hätte Dir ja gerne einen Trick verraten, die Liste der Menüpunkte nicht zu duplizieren. Aber es scheint (noch) keinen Weg zu geben, um ein geschlossenes details-Element mit CSS Mitteln zum öffnen zu bringen. Die Frage findet sich im Netz öfter, und die Antwort zeigt jedesmal, dass die Leute unfähig sind, eine Frage zu lesen. Sie fragen zurück: "Warum setzt Du nicht das open Attribut?"</p> <p>Weil das JavaScript braucht und einen Resize-Handler und nervig ist.</p> <p>Ich hätte einen Trick gefunden, analog zum Checkbox-Hack, aber der müsste erstmal von Accessibility-Experten begutachtet werden. Man stelle das ul Element <strong>hinter</strong> das Details-Element, und verwende CSS, um es bei Existenz des open-Attributes am details-Element anzuzeigen.</p> <p>Man kann dann eine Media-Query benutzen, um bei breitem Bildschirm das Grid-Template zu ändern, die Liste einzublenden und das Details-Element zu verstecken.</p> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>navigation-list<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>☰<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>navigation-list<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Startseite (Home)><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Seite 1><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Seite 2><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Seite 3><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> <pre><code class="block language-css"><span class="token selector">nav ul</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav details[open] + ul</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token punctuation">}</span> <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">main</span> <span class="token punctuation">{</span> <span class="token property">border-color</span><span class="token punctuation">:</span> blue<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">grid-template</span><span class="token punctuation">:</span> <span class="token string">"header header header"</span> auto <span class="token string">"nav main rest"</span> auto / 10em 1fr 20%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav details</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav ul</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Aber keine Ahnung was der IE dazu sagt, oder ein Screenreader.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/mar/20/grid-ausrichtung/1786321?srt=yes#m1786321 JürgenB https://www.j-berkemeier.de 2021-03-25T18:07:12Z 2021-03-25T18:07:12Z Grid: Navigation bei breiterem Viewport <p>Hallo Rolf,</p> <blockquote> <p>Weil das JavaScript braucht und einen Resize-Handler und nervig ist.</p> </blockquote> <p>warum ist das nervig?</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2021/mar/20/grid-ausrichtung/1786324?srt=yes#m1786324 Gästin 2021-03-25T19:49:22Z 2021-03-25T19:49:22Z Grid: Navigation bei breiterem Viewport <p>Hi,</p> <p>wenn ich es richtig verstehe, liegt das Problem bei dem "Details/Summary".</p> <p>Warum verwendet man dann nicht andere Möglichkeiten der POPUP-Menus wie z.B. die Beispiele <a href="https://www.w3schools.com/Css/css_dropdowns.asp" rel="nofollow noopener noreferrer">hier.</a></p> https://forum.selfhtml.org/self/2021/mar/20/grid-ausrichtung/1786322?srt=yes#m1786322 Rolf B 2021-03-25T18:12:35Z 2021-03-25T18:12:35Z Grid: Navigation bei breiterem Viewport <p>Hallo JürgenB,</p> <p>weil man JavaScript einfügen muss, um Layout zu steuern.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/mar/20/grid-ausrichtung/1786323?srt=yes#m1786323 JürgenB https://www.j-berkemeier.de 2021-03-25T18:43:00Z 2021-03-25T18:43:00Z Grid: Navigation bei breiterem Viewport <p>Hallo Rolf,</p> <blockquote> <p>weil man JavaScript einfügen muss, um Layout zu steuern.</p> </blockquote> <p>und ist das ein Problem, wenn man fehlende Funktionalität aus html und css in Javascript nachbildet? Es geht hier doch nur darum, den Platz zu ermitteln und ein „open“ und evtl. eine Klasse zu setzen.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2021/mar/20/grid-ausrichtung/1786325?srt=yes#m1786325 Rolf B 2021-03-25T20:12:48Z 2021-03-25T20:12:48Z Grid: Navigation bei breiterem Viewport <p>Hallo Gästin,</p> <p>weil CSS Dropdowns nicht bedienbar sind. Hovere mal mit einer Tastatur, oder eine Braille-Zeile.</p> <p>Entweder braucht man JavaScript, oder bei einfachen Menüs details/summary. Leider hat Gerrit - wie jeder reale Auftraggeber - seine Wünsche nicht auf Anhieb vollständig geäußert.</p> <p>Ich habe jetzt eine unschöne details/summary Lösung gefunden, aber vermutlich wird es, um bedienbar und zugänglich zu bleiben, auf ein Duplikat des Menüs oder auf eine JavaScript-Lösung hinauslaufen müssen.</p> <p>Hätten und die Götter der Spec das menu-Element gegeben, sähe es vielleicht besser aus. Hamseabanich.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div>