tag:forum.selfhtml.org,2005:/self Responsive Layout mit Flexbox – SELFHTML-Forum 2020-05-05T21:51:28Z https://forum.selfhtml.org/self/2020/apr/27/responsive-layout-mit-flexbox/1769741?srt=yes#m1769741 Gustav 2020-04-27T17:10:17Z 2020-04-27T18:07:43Z Responsive Layout mit Flexbox <p>Hallo</p> <p>ich möchte gern eine selfhtml-Design-Vorlage an meine Bedürfnisse anpassen und komme in der Navigationszeile an meine Grenzen. Sie sieht so aus:</p> <p><a href="/images/a76801c2-88a8-11ea-bdc3-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/a76801c2-88a8-11ea-bdc3-b42e9947ef30.png?size=medium" alt="Navigation IST" title="Nav_Ist" loading="lazy"></a></p> <p>Sollte aber so aussehen: <a href="/images/ba5670de-88a8-11ea-aa50-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/ba5670de-88a8-11ea-aa50-b42e9947ef30.png?size=medium" alt="Navigation SOLL" title="Nav_Soll" loading="lazy"></a></p> <p>HTML</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</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> <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">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>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>./Kat1.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Kat 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>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>./Kat2.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Kat 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>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>./Kat3.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Kat 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>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>./de/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>de<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>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> </code></pre> <p>CSS</p> <pre><code class="block language-css"><span class="token selector">nav ul</span> <span class="token punctuation">{</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav a</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> transparent<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 95%<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> .5em 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> .5em 1em<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid gray<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> .5em<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Es dürften wohl zwei Punkte anzupassen sein:</p> <ol> <li>Statt des 'Home'-Textes soll eine home.svg Grafik eingebunden werden.</li> <li>Die Menu-Punkte 'Home' und 'de' sollen bei horizontaler Navigationsleisten-Darstellung in der Breite kleiner ausfallen als die Übrigen.</li> </ol> <p>Ich habe bei beiden Punkten schon viel ausprobiert. Hat jemand einen Rat, wie ich weiter komme?</p> <p>Schöne Grüße, Gustav</p> https://forum.selfhtml.org/self/2020/apr/27/responsive-layout-mit-flexbox/1769750?srt=yes#m1769750 Rolf B 2020-04-27T18:14:59Z 2020-04-27T18:14:59Z Responsive Layout mit Flexbox <p>Hallo Gustav,</p> <p>hast Du die SVG Grafik? Dann setze an Stelle des Wortes Home ein <img> Element, natürlich mit alt="Home".</p> <p>Für die Breite solltest Du Dich mit den Attributen flex-grow, flex-shrink und flex-basis beschäftigen. Die geben die "Normalgröße" eines Elements an (-basis), sowie den Anteil, den das Element bei Vergrößerungen oder Verkleinerungen übernimmt.</p> <p>In deinem Fall sollten Home und de ein flex-grow von 0 haben und die normalen Menüpunkte ein flex-grow von 1. Als flex-basis kannst Du auto nehmen.</p> <p>flex-grow, flex-shrink und flex-basis kann man zum Attribut flex zusammenfassen (dahinter dann die Werte für grow, shrink und basis). Könnte man z.B. so machen:</p> <pre><code class="block language-css"><span class="token selector">nav a</span> <span class="token punctuation">{</span> <span class="token property">flex</span><span class="token punctuation">:</span> 1 0 auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav a:first-of-type(), nav a:last-of-type()</span> <span class="token punctuation">{</span> <span class="token property">flex-grow</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Dein nav ul Element braucht natürlich noch display: flex. Das display:inline-block für die li Elemente ist dann unnötig.</p> <p>Für schmale Viewports musst Du Dir eine passende Media-Abfrage überlegen, die die Menüpunkte dann wieder untereinander setzt.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2020/apr/27/responsive-layout-mit-flexbox/1769804?srt=yes#m1769804 Gustav 2020-04-28T14:14:42Z 2020-04-28T14:16:13Z Responsive Layout mit Flexbox <p>Hallo Rolf,</p> <p>vielen Dank für Deine detaillierten Anregungen.</p> <p>Ich habe zunächst alles so umgesetzt, doch leider nicht den gewünschten Effekt erzielen können.</p> <pre><code class="block">nav ul { text-align: center; display: flex; margin: 0; padding: 0; list-style: none; } nav a { background-color: transparent; color: black; text-decoration: none; flex: 1 0 auto; width: 95%; margin: .5em 0; padding: .5em 1em; border: 1px solid gray; border-radius: .5em; } nav a:first-of-type(), nav a:last-of-type() { flex-grow: 0; } </code></pre> <p>Die mittleren Menu-Punkte füllen den verbliebenen Platz nicht auf und wie du schon anmerktest, zerschießt es bei schmaleren Viewports die dann über die gesamte Bildschirmbreite angelegte Darstellung der Naviagtionspunkte untereinander.</p> <p><a href="/images/506a3568-895a-11ea-aa5b-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/506a3568-895a-11ea-aa5b-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> <p>Zwischenzeitig habe ich auch noch diverse modifizierte Eingaben ausprobiert, aber auch damit nicht die beabsichtigte Darstellung hinbekommen. Habe ich vielleicht irgend etwas falsch gemacht?</p> <p>Schöne Grüße, Gustav</p> https://forum.selfhtml.org/self/2020/apr/27/responsive-layout-mit-flexbox/1769806?srt=yes#m1769806 Rolf B 2020-04-28T15:02:19Z 2020-04-28T15:02:19Z Responsive Layout mit Flexbox <p>Hallo Gustav,</p> <p>sorry, ich war unaufmerksam.</p> <p>Das ul Element ist die Flexbox und die li Elemente sind demnach die Flex-Items. Die Flex-Eigenschaft auf den a Elementen findet keine Beachtung.</p> <p>D.h. man muss das so stylen:</p> <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> flex<span class="token punctuation">;</span> ... etc <span class="token punctuation">}</span> <span class="token selector">nav li</span> <span class="token punctuation">{</span> <span class="token property">flex</span><span class="token punctuation">:</span> 1 0 auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav li:first-of-type(), nav li:last-of-type()</span> <span class="token punctuation">{</span> <span class="token property">flex-grow</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav a</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> ... etc <span class="token punctuation">}</span> </code></pre> <p>Du musst gucken, welche Styles Du den <li> und welche den <a> gibst, damit es so aussieht wie Du es haben möchtest.</p> <p>Wenn Du Flexbox besser verstehen willst, ist <a href="https://flexboxfroggy.com/" rel="nofollow noopener noreferrer">dieses Spielchen hier</a> eine gute Übung .</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2020/apr/27/responsive-layout-mit-flexbox/1769870?srt=yes#m1769870 Gustav 2020-04-30T18:07:05Z 2020-04-30T18:07:05Z Responsive Layout mit Flexbox <p>Hallo Rolf,</p> <p>ich habe einiges ausprobiert, aber bekomme es leider nicht hin. Nach der Eingabe deiner letzten Anregungen, kann ich bei den flex-Parametern oder bei padding eingeben, was ich will, an der Darstellung ändert es nichts und sieht so aus, wie in meiner vorherigen Mail dargestellt.</p> <p>Da sich wie zuvor beschrieben damit auch die Ansicht bei kleineren Viewports zerschiesst, bin ich inzwischen soweit, die im ursprünglichen Design angelegte gleichmäßige Breite aller Menueinträge hinzunehmen.</p> <p>Mich würde höchstens noch grundsätzlich interessieren, ob ich irgend etwas vergessen oder falsch gemacht habe oder ob es mit display:flex auch nicht besser geht.</p> <p>Herzlichen Dank in jedem Fall für deine Anregungen und übrigens auch für den Link zu den Fröschen ;o)</p> <p>Schönen Feiertag, Gustav</p> https://forum.selfhtml.org/self/2020/apr/27/responsive-layout-mit-flexbox/1769872?srt=yes#m1769872 Rolf B 2020-04-30T19:00:27Z 2020-04-30T19:00:27Z Responsive Layout mit Flexbox <p>Hallo Gustav,</p> <p>hast Du einen Ort, wo man sich deine Experimente anschauen kann?</p> <p>Oder kannst Du das Problem in einem Code-Labor wie Codepen oder jsFiddle demonstrieren? Es ist sicherlich ein einfaches Mistverständnis.</p> <p>Ich habe mal was <a href="https://jsfiddle.net/Rolf_b/p1tLkcro/" rel="noopener noreferrer">gebastelt</a>. Da ich kein Home-SVG hatte, benutze ich ein Haus-Emoji.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2020/apr/27/responsive-layout-mit-flexbox/1770063?srt=yes#m1770063 Gustav 2020-05-05T08:49:49Z 2020-05-05T08:49:49Z Responsive Layout mit Flexbox <p>Hallo Rolf,</p> <p>entschuldige erst einmal, dass es etwas gedauert hat, ich war am WE weitestgehend anderweitig eingebunden.</p> <p>Dann habe ich versucht, das bei jfiddle aufzusetzen, habe aber nicht den Button gefunden, der das ganze anzeigt :o) <a href="https://jsfiddle.net/ukzoc023/1/#&togetherjs=pvV99pnIUx" rel="noopener noreferrer">https://jsfiddle.net/ukzoc023/1/#&togetherjs=pvV99pnIUx</a></p> <p>Also habe ich es heute nun auf einer Subdomain angelegt: <a href="http://1.eyes2k.com" rel="nofollow noopener noreferrer">http://1.eyes2k.com</a></p> <p>Schöne Grüße, Gustav</p> https://forum.selfhtml.org/self/2020/apr/27/responsive-layout-mit-flexbox/1770066?srt=yes#m1770066 Rolf B 2020-05-05T10:20:42Z 2020-05-05T10:21:28Z Responsive Layout mit Flexbox <p>Hallo Gustav,</p> <blockquote> <p>Dann habe ich versucht, das bei jfiddle aufzusetzen, habe aber nicht den Button gefunden, der das ganze anzeigt :o)</p> </blockquote> <p>Oben links in jsFiddle steht "> Run", und ein Tooltip der den Hotkey Ctrl+Enter verrät.</p> <p>Ein Fehler bei Dir stammt aus meinem Posting oben, und den hab ich in meinem Fiddle korrigiert: Es heißt :first-of-type und :last-of-type, ohne die Klammern. Damit funktioniert schon mal die Breitenverteilung.</p> <p>Und dann gib deinen a Elementen noch display:inline-block, damit sie sich in der Breite beeinflussen lassen, und box-sizing:border-box, damit dein width:95% auch Rand und Padding beinhaltet. Andernfalls müsstest Du Rand und Padding aus der width herausrechnen.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2020/apr/27/responsive-layout-mit-flexbox/1770117?srt=yes#m1770117 Gustav 2020-05-05T21:51:28Z 2020-05-05T21:51:28Z Responsive Layout mit Flexbox <p>Ja, super!</p> <p>Ich glaube, ich werde noch mal in mich gehen, ob das jetzt nicht doch die bessere Lösung ist.</p> <p>Herzlichen Dank Rolf, dass du noch dran geblieben bist.</p> <p>Beste Grüße, Gustav</p>