tag:forum.selfhtml.org,2005:/selfResponsive Layout mit Flexbox – SELFHTML-Forum2020-05-05T21:51:28Zhttps://forum.selfhtml.org/self/2020/apr/27/responsive-layout-mit-flexbox/1769741?srt=yes#m1769741Gustav2020-04-27T17:10:17Z2020-04-27T18:07:43ZResponsive 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#m1769750Rolf B2020-04-27T18:14:59Z2020-04-27T18:14:59ZResponsive 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#m1769804Gustav2020-04-28T14:14:42Z2020-04-28T14:16:13ZResponsive 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#m1769806Rolf B2020-04-28T15:02:19Z2020-04-28T15:02:19ZResponsive 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#m1769870Gustav2020-04-30T18:07:05Z2020-04-30T18:07:05ZResponsive 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#m1769872Rolf B2020-04-30T19:00:27Z2020-04-30T19:00:27ZResponsive 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#m1770063Gustav2020-05-05T08:49:49Z2020-05-05T08:49:49ZResponsive 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#m1770066Rolf B2020-05-05T10:20:42Z2020-05-05T10:21:28ZResponsive 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#m1770117Gustav2020-05-05T21:51:28Z2020-05-05T21:51:28ZResponsive 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>