Gestaltung mit Flexbox – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self?srt=yes Gestaltung mit Flexbox Wed, 21 Feb 18 10:19:45 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714256?srt=yes#m1714256 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714256?srt=yes#m1714256 <p>Hallo zusammen</p> <p>Ich möchte meine neue Homepage wie folgt mit Flexboxen gestallten:</p> <p><a href="/images/40cde74b-82b8-404c-997a-1b35c76b1d59.jpg" rel="noopener noreferrer"><img src="/images/40cde74b-82b8-404c-997a-1b35c76b1d59.jpg?size=medium" alt="neue Homepage" title="flexbox" loading="lazy"></a></p> <p>Das einzige was ich hinkriege ist ein grosser grauer Rahmen. Mir sind die einzelnen Boxen zu nahe beieinander und die inneren Rahmen fehlen ganz.</p> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</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> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<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>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<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>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></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>index.css<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>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>shortcut icon<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/x-icon<span class="token punctuation">"</span></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>/robbisoft_logo.ico<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>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/gif<span class="token punctuation">"</span></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>/robbisoft_logo.gif<span class="token punctuation">"</span></span> <span class="token attr-name">sizes</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>32x32<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>title</span><span class="token punctuation">></span></span>robbisoft<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://code.jquery.com/jquery-latest.js<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SCRIPT</span> <span class="token attr-name">Language</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>JavaScript<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>program.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>SCRIPT</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>inhalt</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<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>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A<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>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> document<span class="token punctuation">.</span><span class="token function">writeln</span><span class="token punctuation">(</span> <span class="token function">menu</span><span class="token punctuation">(</span> <span class="token string">"Impressum"</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>B<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>div</span> <span class="token attr-name">class"textbox"</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>header<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>titel</span><span class="token punctuation">></span></span>Impressum<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>titel</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class"text"</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span><span class="token punctuation">></span></span> In der Informatik bin ich vielfältig interessiert. Ich beherrsche die Programmiersprachen C++, Java und weitere. Im weitern habe ich Kenntnisse in HTML, XML und Java-Script. Die Hilfedateien wurden mit dem HTML Help WorkShop von Microsoft erstellt. Die in dieser Homepage vorgestellten Programme wurden alle mit dem RAD Studio Tokyo 10.2 entwickelt. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</span><span class="token punctuation">></span></span> Meine Freizeit widme ich meiner Familie. Für den Ausgleich zur Arbeit mache ich viel Sport. Ich schwimme regelmässig bei der SLRG in Bern mit. Weiter singe ich in einem klassischen Chor. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</span><span class="token punctuation">></span></span> Gibt es Fragen zur Programmierung oder meinen Programmen oder suchen Sie einen vielseitigen und tüchtigen Mitarbeiter, dann melden Sie sich unter der folgenden E-Mail Adresse. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</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>mailto:support@robbisoft.ch<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Mail an den Support senden<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>support(at)robbisoft.ch<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>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<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>fus</span><span class="token punctuation">></span></span>letzte Änderung : <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SCRIPT</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> document<span class="token punctuation">.</span><span class="token function">writeln</span><span class="token punctuation">(</span><span class="token function">modifyString</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">"<BR>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>SCRIPT</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fus</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</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>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>inhalt</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>und</p> <pre><code class="block language-css"><span class="token selector">.main</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">min-height</span><span class="token punctuation">:</span> 25em<span class="token punctuation">;</span> <span class="token comment">/* für IE */</span> <span class="token property">background</span><span class="token punctuation">:</span> #c4ced3<span class="token punctuation">;</span> <span class="token property">border-color</span><span class="token punctuation">:</span> #8a9da8<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.box</span><span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">flex-direction</span><span class="token punctuation">:</span> row<span class="token punctuation">;</span> <span class="token property">flex-wrap</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span> <span class="token property">align-content</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0.25em<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0.25em<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 0.1em solid #ccc<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 0.5em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.box div.A</span><span class="token punctuation">{</span> <span class="token property">order</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">flex-grow</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">flex-shrink</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">flex-basis</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">align-self</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span> <span class="token property">min-width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">min-height</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.box div.B</span><span class="token punctuation">{</span> <span class="token property">order</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token property">flex-grow</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span> <span class="token property">flex-shrink</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">flex-basis</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">align-self</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">min-width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">min-height</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.textbox</span><span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-flex<span class="token punctuation">;</span> <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span> <span class="token property">flex-wrap</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span> <span class="token property">align-content</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0.25em<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0.25em<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 0.1em solid #ccc<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 0.5em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.textbox div.header</span><span class="token punctuation">{</span> <span class="token property">order</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">flex-grow</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">flex-shrink</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">flex-basis</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">align-self</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span> <span class="token property">min-width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">min-height</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.textbox div.text</span><span class="token punctuation">{</span> <span class="token property">order</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">flex-grow</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span> <span class="token property">flex-shrink</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">flex-basis</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">align-self</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span> <span class="token property">min-width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">min-height</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.textbox div.footer</span><span class="token punctuation">{</span> <span class="token property">order</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">flex-grow</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">flex-shrink</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">flex-basis</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">align-self</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span> <span class="token property">min-width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">min-height</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">titel</span> <span class="token punctuation">{</span><span class="token property">font-stretch</span><span class="token punctuation">:</span>expanded<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span>bold<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span>x-large<span class="token punctuation">;</span> <span class="token property">font-family</span><span class="token punctuation">:</span><span class="token string">"Comic Sans MS"</span><span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>maroon<span class="token punctuation">}</span> <span class="token selector">ueberschrift</span> <span class="token punctuation">{</span><span class="token property">font-stretch</span><span class="token punctuation">:</span>expanded<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span>bold<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span>xx-large<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>maroon<span class="token punctuation">}</span> <span class="token selector">.rahmen</span> <span class="token punctuation">{</span> <span class="token property">border</span><span class="token punctuation">:</span>0.1em solid #aaaaaa<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">fus</span> <span class="token punctuation">{</span><span class="token property">font-stretch</span><span class="token punctuation">:</span>condensed<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span>normal<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span>small<span class="token punctuation">;</span> <span class="token property">font-style</span><span class="token punctuation">:</span>italic<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">text</span> <span class="token punctuation">{</span><span class="token property">font-weight</span><span class="token punctuation">:</span>normal<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span>medium<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">font-family</span><span class="token punctuation">:</span>Verdana<span class="token punctuation">,</span> Helvetica<span class="token punctuation">,</span> <span class="token string">"Times New Roman"</span><span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> Geneva<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">td</span> <span class="token punctuation">{</span><span class="token property">border</span><span class="token punctuation">:</span>0.1em solid<span class="token punctuation">;</span> <span class="token property">border-color</span><span class="token punctuation">:</span>#05aa02<span class="token punctuation">}</span> <span class="token selector">table</span> <span class="token punctuation">{</span><span class="token property">border</span><span class="token punctuation">:</span>0.1em solid<span class="token punctuation">;</span> <span class="token property">border-collapse</span><span class="token punctuation">:</span>collapse<span class="token punctuation">;</span> <span class="token property">border-color</span><span class="token punctuation">:</span>#05aa02<span class="token punctuation">}</span> <span class="token selector">.ohne</span> <span class="token punctuation">{</span><span class="token property">border</span><span class="token punctuation">:</span>0.2em solid<span class="token punctuation">;</span> <span class="token property">border-color</span><span class="token punctuation">:</span>#ffffff<span class="token punctuation">}</span> <span class="token selector">menuhel</span> <span class="token punctuation">{</span><span class="token property">font-weight</span><span class="token punctuation">:</span>normal<span class="token punctuation">;</span> <span class="token property">font-style</span><span class="token punctuation">:</span>italic<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span>medium<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>gray<span class="token punctuation">}</span> <span class="token selector">menudunkel</span> <span class="token punctuation">{</span><span class="token property">font-weight</span><span class="token punctuation">:</span>normal<span class="token punctuation">;</span> <span class="token property">font-style</span><span class="token punctuation">:</span>normal<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span>medium<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 selector">sektor</span> <span class="token punctuation">{</span><span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 180px<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">div.scrollmenu</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> Azure<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 70em<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>22em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">div.scrollmenu a</span> <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">color</span><span class="token punctuation">:</span> white<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">padding</span><span class="token punctuation">:</span> 0.5em<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 punctuation">}</span> <span class="token selector">div.scrollmenu a:hover</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> yellow<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Was muss ich ändern damit meine Homepage meinen Wünschen entspricht?</p> <p>Gruss Renato</p> Gestaltung mit Flexbox Wed, 21 Feb 18 10:39:11 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714258?srt=yes#m1714258 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714258?srt=yes#m1714258 <p>Hallo</p> <blockquote> <p>Was muss ich ändern damit meine Homepage meinen Wünschen entspricht?</p> </blockquote> <p>Zunächst die Grundlagen von HTML und CSS lernen.</p> <p>Zur Darstellung: Um die Darstellung mit Flexbox zu erreichen benötigst du um Titel, Inhalt und Fußzeile herum einen nicht sichtbaren Hilfscontainer.</p> <p>Menü und Hilfscontainer werden dann mit Flexbox nebeneinander angeordnet.</p> <p>Gruss</p> <p>MrMurphy</p> Gestaltung mit Flexbox Wed, 21 Feb 18 11:09:44 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714259?srt=yes#m1714259 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714259?srt=yes#m1714259 <p>@@Renato</p> <blockquote> <p>Ich möchte meine neue Homepage wie folgt mit Flexboxen gestallten</p> </blockquote> <p>Das ist wenig sinnvoll. Du willst ein 2D-Raster-Layout. Flexbox ist dafür nicht das geeignete Werkzeug, sondern Grid. ☞ <a href="https://css-tricks.com/snippets/css/complete-guide-grid/" rel="nofollow noopener noreferrer">Complete Guide</a></p> <p>Das ist total einfach und – bei entsprechendem Code – selbsterklärend. ☞ <a href="https://codepen.io/gunnarbittersmann/pen/wyjqMO" rel="noopener noreferrer">Beispiel</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> Gestaltung mit Flexbox Wed, 21 Feb 18 11:49:54 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714260?srt=yes#m1714260 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714260?srt=yes#m1714260 <p>Hallo Gunnar,</p> <blockquote> <p>Das ist wenig sinnvoll. Du willst ein 2D-Raster-Layout. Flexbox ist dafür nicht das geeignete Werkzeug, sondern Grid. ☞ <a href="https://css-tricks.com/snippets/css/complete-guide-grid/" rel="nofollow noopener noreferrer">Complete Guide</a></p> </blockquote> <p>stimmt, aber grid auch nicht.</p> <blockquote> <p>Das ist total einfach und – bei entsprechendem Code – selbsterklärend. ☞ <a href="https://codepen.io/gunnarbittersmann/pen/wyjqMO" rel="noopener noreferrer">Beispiel</a></p> </blockquote> <p>Nicht wenn man es im IE11 betrachtet.</p> <p><a href="/images/f0aa53e1-2a33-4628-99d7-65b50e41f18f.jpg" rel="noopener noreferrer"><img src="/images/f0aa53e1-2a33-4628-99d7-65b50e41f18f.jpg?size=medium" alt="" loading="lazy"></a></p> <p>@@Renato Bei so einem einfachen Layout, braucht es überhaupt keine Grid, Flex oder sonstwas... lediglich ein wenig CSS-Basis, siehe zb. <a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/display" rel="nofollow noopener noreferrer">display: inline-block, usw....</a>. Wichtiger in der heutigen Zeit ist allerdings mobiltauglich. Stichwort <a href="https://t3n.de/news/responsive-webdesign-html5-css3-grundlagen-335305/" rel="nofollow noopener noreferrer">Responsive</a></p> <p>Gruss<br> Henry</p> <p>ps. wäre schön, wenn einer der Negativbewerter das auch mal begründen würde...</p> Gestaltung mit Flexbox Wed, 21 Feb 18 12:16:24 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714261?srt=yes#m1714261 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714261?srt=yes#m1714261 <p>@@Henry</p> <blockquote> <p>Nicht wenn man es im IE11 betrachtet.</p> </blockquote> <p>Doch. Alle Inhalte sind zu sehen, und das auch auch in der sinnvollen Reihenfolge. Alles bestens. <a href="http://dowebsitesneedtolookexactlythesameineverybrowser.com/" rel="nofollow noopener noreferrer">Müssen Webseiten in jedem Browser exakt gleich aussehen?</a></p> <p>Laut <a href="https://caniuse.com/#feat=css-grid" rel="noopener noreferrer">Can I use</a> hat IE 11 in Deutschland noch eine Verbreitung von 3.4%. Lohnt es für so wenige Nutzer zusätzlichen Aufwand zu betreiben? Wenn die Antwort „ja“ sein sollte, kann man einen Fallback auf Floats implementieren:</p> <pre><code class="block language-css"><span class="token selector">nav</span> <span class="token punctuation">{</span> <span class="token property">float</span><span class="token punctuation">:</span> left <span class="token punctuation">}</span> <span class="token selector">header, main, footer</span> <span class="token punctuation">{</span> <span class="token property">float</span><span class="token punctuation">:</span> right <span class="token punctuation">}</span> </code></pre> <blockquote> <p>Bei so einem einfachen Layout, braucht es überhaupt keine Grid, Flex oder sonstwas...</p> </blockquote> <p>Es ist unsinnig, wegen ein paar Hanseln mit alten Browsern für die vielen mit modernen Browsern nicht moderne Techniken einsetzen zu wollen.</p> <blockquote> <p>ps. wäre schön, wenn einer der Negativbewerter das auch mal begründen würde...</p> </blockquote> <p>✔︎</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> Gestaltung mit Flexbox Thu, 22 Feb 18 09:42:53 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714304?srt=yes#m1714304 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714304?srt=yes#m1714304 <p>Hej Henry,</p> <blockquote> <p>Bei so einem einfachen Layout, braucht es überhaupt keine Grid, Flex oder sonstwas...</p> </blockquote> <blockquote> <p>ps. wäre schön, wenn einer der Negativbewerter das auch mal begründen würde...</p> </blockquote> <p>Weil ich es schade fände, ein „einfaches Layout“ unnötig kompliziert zu machen.</p> <p>Marc</p> Gestaltung mit Flexbox Wed, 21 Feb 18 12:42:56 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714262?srt=yes#m1714262 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714262?srt=yes#m1714262 <p>Hallo Gunnar,</p> <blockquote> <p>Doch. Alle Inhalte sind zu sehen, und das auch auch in der sinnvollen Reihenfolge. Alles bestens. <a href="http://dowebsitesneedtolookexactlythesameineverybrowser.com/" rel="nofollow noopener noreferrer">Müssen Webseiten in jedem Browser exakt gleich aussehen?</a></p> </blockquote> <p>LOL... dein Ernst? Dann könnten wir ja sofort alle Styleoptionen und Kompatibilitäten vergessen, weil... irgendwie erscheint ja doch immer der gleiche Inhalt.…</p> <p>Du denkst doch jetzt nicht wirklich es wäre egal ob so:</p> <p><a href="/images/9acd342c-c3b2-40d6-b546-56446ba0fdeb.jpg" rel="noopener noreferrer"><img src="/images/9acd342c-c3b2-40d6-b546-56446ba0fdeb.jpg?size=medium" alt="" loading="lazy"></a></p> <p>oder so:</p> <p><a href="/images/6c313196-07f6-46b1-b517-c95692aa03a7.jpg" rel="noopener noreferrer"><img src="/images/6c313196-07f6-46b1-b517-c95692aa03a7.jpg?size=medium" alt="" loading="lazy"></a></p> <blockquote> <p>Laut <a href="https://caniuse.com/#feat=css-grid" rel="noopener noreferrer">Can I use</a> hat IE 11 in Deutschland noch eine Verbreitung von 3.4%. Lohnt es für so wenige Nutzer zusätzlichen Aufwand zu betreiben? Wenn die Antwort „ja“ sein sollte, kann man einen Fallback auf Floats implementieren:</p> </blockquote> <p>Ob diese Statistik stimmt bzw. repräsentativ ist, sei mal dahin gestellt. Aber was Float betrifft, sind wohl die Schwächen allzu bekannt, falls nicht hier im Forum gibt's genug davon zu berichten und wurde auch verbessert/ersetzt eben durch Einbringung der besagten Displayeigenschaften.</p> <blockquote> <blockquote> <p>Bei so einem einfachen Layout, braucht es überhaupt keine Grid, Flex oder sonstwas...</p> </blockquote> <p>Es ist unsinnig, wegen ein paar Hanseln mit alten Browsern für die vielen mit modernen Browsern nicht moderne Techniken einsetzen zu wollen.</p> </blockquote> <p>Dann sagt der "Hansel" dir mal, dass er sich weigert schlimmere Datenkraken einzusetzen als den IE, solange es geht. Und davon abgesehen, ist der IE alles andere als antik, nur weil son paar "ich will aber immer die neusten Spielereien nutzen Hanseln ;-) " meinen es wäre nicht mehr up2date.</p> <p>Gruss<br> Henry</p> Gestaltung mit Flexbox Thu, 22 Feb 18 09:26:40 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714302?srt=yes#m1714302 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714302?srt=yes#m1714302 <p>Hej Gunnar, @@Henry</p> <blockquote> <p>Laut <a href="https://caniuse.com/#feat=css-grid" rel="noopener noreferrer">Can I use</a> hat IE 11 in Deutschland noch eine Verbreitung von 3.4%. Lohnt es für so wenige Nutzer zusätzlichen Aufwand zu betreiben? Wenn die Antwort „ja“ sein sollte, kann man einen Fallback auf Floats implementieren:</p> </blockquote> <p>Oder mit der alten Schreibweise, was im vorliegenden Fall helfen dürfte. Oder mit den von Dir, Henry, vorgeschlagenen <s>Techniken</s> Hacks.</p> <p>Es muss nur klar sein, dass „Deine“ CSS-Basics mehr Aufwand machen, als „meine“ CSS Basics.</p> <p><strong>CSS Grid ist CSS-Basis-Wissen.</strong> Einfacher lassen sich zweidimensionale Layouts nicht umsetzen.</p> <p>Viel Lernen kann man, wenn man in die Details einsteigen und elegante Lösungen bauen will (das CSS-Grid-Modul ist umfangreich und das zugrunde liegende <a href="https://forum.selfhtml.org/self/2018/jan/25/lesetipp-zur-wochenmitte-how-big-is-this-box/1712714#m1712714" rel="noopener noreferrer">Konzept zur Aufteilung von verfügbarem Raum mittels der verschiedenen Maßeinheiten</a> sollte man sich vielleicht auf Dauer auch aneignen), z.B. um Layouts zu entwickeln die sich ohne media-queries responsiv verhalten.</p> <p><strong>Das heißt aber nicht, dass es schwierig wäre erst mal zwei Spalten anzulegen; im Verhältnis 1:1 oder 1:2 oder was immer gewünscht.</strong></p> <p>Marc</p> Gestaltung mit Flexbox Wed, 21 Feb 18 13:07:11 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714264?srt=yes#m1714264 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714264?srt=yes#m1714264 <p>@@Henry</p> <blockquote> <p><a href="/images/6c313196-07f6-46b1-b517-c95692aa03a7.jpg" rel="noopener noreferrer"><img src="/images/6c313196-07f6-46b1-b517-c95692aa03a7.jpg?size=medium" alt="" loading="lazy"></a></p> </blockquote> <p>Der falsche Rahmen ist wirklich unschön. Der hat aber nichts damit zu tun, dass IE kein Grid kann, sondern dass er das <code>main</code>-Element nicht kennt. <code>main { display: block }</code> ergänzt; jetzt sieht’s auch im IE 11 vernünftig aus.</p> <blockquote> <p>Und davon abgesehen, ist der IE alles andere als antik</p> </blockquote> <p>IE 11 ist von 2013, also antik.</p> <p>Microsoft hat einen modernen Browser im Angebot: Edge. Und der kann Grid.</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> Gestaltung mit Flexbox Wed, 21 Feb 18 13:32:27 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714266?srt=yes#m1714266 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714266?srt=yes#m1714266 <p>Hallo Gunnar,</p> <blockquote> <p>Der falsche Rahmen ist wirklich unschön. Der hat aber nichts damit zu tun, dass IE kein Grid kann, sondern dass er das <code>main</code>-Element nicht kennt. <code>main { display: block }</code> ergänzt; jetzt sieht’s auch im IE 11 vernünftig aus.</p> </blockquote> <p>dennoch immer noch alles untereinander...</p> <blockquote> <p>Microsoft hat einen modernen Browser im Angebot: Edge. Und der kann Grid.</p> </blockquote> <p>Wie gesagt, mir fällt kein Szenario ein, bei dem ich standard-gridlayout nicht klassisch hinbekomme. Und Edge? Ja, wäre schön, eigentlich ein toller Browser, wären da nicht die Bevormundungen wie zb. Neuer Tab -> Ziel nicht mehr selbst festlegbar....,etc...</p> <p>Gruss<br> Henry</p> Gestaltung mit Flexbox Wed, 21 Feb 18 13:47:50 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714267?srt=yes#m1714267 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714267?srt=yes#m1714267 <p>@@Henry</p> <blockquote> <blockquote> <p>jetzt sieht’s auch im IE 11 vernünftig aus. dennoch immer noch alles untereinander...</p> </blockquote> </blockquote> <p>Ja. Und?</p> <blockquote> <p>Wie gesagt, mir fällt kein Szenario ein, bei dem ich standard-gridlayout nicht klassisch hinbekomme.</p> </blockquote> <ol> <li>Mit was für Aufwand?</li> <li>Mit was für krudem Mark-up?</li> </ol> <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> Gestaltung mit Flexbox Wed, 21 Feb 18 18:51:27 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714285?srt=yes#m1714285 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714285?srt=yes#m1714285 <p>@@Henry</p> <blockquote> <p>Wie gesagt, mir fällt kein Szenario ein, bei dem ich standard-gridlayout nicht klassisch hinbekomme.</p> </blockquote> <p>Mir ja. Hatte ich <a href="https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713645#m1713645" rel="noopener noreferrer">letztens</a> erst: Die zur Verfügung stehende Breite soll vollständig genutzt werden und gleichmäßig in möglichst viele Spalten aufgeteilt werden, die mindestens <em>x</em> breit sein sollen. Die Items füllen die Spalten in Leserichtung (von links nach rechts; von oben nach unten).</p> <p>(Das wäre mit etlichem Aufwand umsetzbar für eine gewisse maximale Anzahl <em>n</em> von Spalten. Man müsste sich <em>n</em> − 1 Breakpoints berechenen und für diese jeweils Regeln angeben. Den Aufwand will man nicht betreiben, zumal er nicht zu einer allgemeinen Lösung führt.)</p> <p>Auch bei <a href="https://forum.selfhtml.org/self/2018/feb/21/mosaik-plus-detailzeile-mit-css/1714269#m1714269" rel="noopener noreferrer">diesem Mosaik</a> möchte ich nicht darüber nachdenken wollen, wie das ohne Grid gehen sollte.</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> Gestaltung mit Flexbox Wed, 21 Feb 18 15:52:18 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714272?srt=yes#m1714272 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714272?srt=yes#m1714272 <p>Hallo Gunnar,</p> <blockquote> <blockquote> <blockquote> <p>jetzt sieht’s auch im IE 11 vernünftig aus. dennoch immer noch alles untereinander...</p> </blockquote> </blockquote> <p>Ja. Und?</p> </blockquote> <p>Also jemand möchte ein Auto mit 4 Türen und du zeigst auf einen 2 Türer und sagst, "ist doch das Gleiche"?</p> <blockquote> <blockquote> <p>Wie gesagt, mir fällt kein Szenario ein, bei dem ich standard-gridlayout nicht klassisch hinbekomme.</p> </blockquote> <ol> <li>Mit was für Aufwand?</li> </ol> </blockquote> <p>Praktisch NULL</p> <blockquote> <ol start="2"> <li>Mit was für krudem Mark-up?</li> </ol> </blockquote> <p>simple, conform und in jedem Browser nutzbar.</p> <p><a href="https://www.w3schools.com/code/tryit.asp?filename=FOOHV35H0Z7L" rel="nofollow noopener noreferrer">Beispiel hier</a></p> <p>btw. dein Beispiel bei codepen lässt sich nicht in Fullview anschauen, "...The owner of this Pen needs to verify their email address to enable Full Page View...".</p> <p>Im Übrigenen bin ich der Meinung, Karthago...(ähm neee das war das andere ;-)..., " dieses scriptüberladene codepen gehört weg..." ;-)</p> <p>Gruss<br> Henry</p> Gestaltung mit Flexbox Wed, 21 Feb 18 16:31:52 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714274?srt=yes#m1714274 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714274?srt=yes#m1714274 <p>@@Henry</p> <blockquote> <blockquote> <blockquote> <blockquote> <p>jetzt sieht’s auch im IE 11 vernünftig aus. dennoch immer noch alles untereinander...</p> </blockquote> </blockquote> <p>Ja. Und?</p> </blockquote> <p>Also jemand möchte ein Auto mit 4 Türen und du zeigst auf einen 2 Türer und sagst, "ist doch das Gleiche"?</p> </blockquote> <p>Nein. Ich sage: „Der Zweitürer fährt genauso gut. Wenn du den Viertürer haben willst, musst du nochmal 9876,50 Öken<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> drauflegen. Deine Entscheidung.“</p> <blockquote> <blockquote> <blockquote> <p>Wie gesagt, mir fällt kein Szenario ein, bei dem ich standard-gridlayout nicht klassisch hinbekomme.</p> </blockquote> <ol> <li>Mit was für Aufwand?</li> </ol> </blockquote> <p>Praktisch NULL</p> </blockquote> <p>Dann hat Grid wohl negativen Aufwand?</p> <blockquote> <blockquote> <ol start="2"> <li>Mit was für krudem Mark-up?</li> </ol> </blockquote> <p>simple, conform und in jedem Browser nutzbar.</p> <p><a href="https://www.w3schools.com/code/tryit.asp?filename=FOOHV35H0Z7L" rel="nofollow noopener noreferrer">Beispiel hier</a></p> </blockquote> <p>Dein Mark-up ist nicht richtig: Erst soll im Quelltext der Header kommen, dann die Navigation. Das macht sich sowohl bei schmalem Viewport als auch bei Screenreadern bemerkbar.</p> <p>Außerdem benötigst du ein präsentationsbezogenens Element <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>rbase<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code>.</p> <p>BTW, <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code> benötigst du nicht, das ist „<a href="https://forum.selfhtml.org/cites/1122" rel="noopener noreferrer">bedauerlich bis ärgerlich</a>“.</p> <p>So, und nun lass mal den Designer um die Ecke kommen und sagen: „Hömmal, wir machen den Header doch über die volle Breite.“ Dann fängst du an, das Mark-up umzubauen. Mark-up umbauen wegen einer Änderung der Darstellung‽‽ Und das nennst du „praktisch NULL Aufwand“‽</p> <p>Bei meiner Umsetzung ändere ich mal schnell im Stylesheet die Zeile <code>"navigation page-header"</code> in <code>"page-header page-header"</code> – ohne das HTML nochmal anfassen zu müssen. Das nenne <em>ich</em> „praktisch NULL Aufwand“.</p> <p>(Die Deklaration sieht dann vollständig so aus:</p> <pre><code class="block"> grid-template-areas: "page-header page-header" "navigation main-content" "navigation page-footer" </code></pre> <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> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>„Da waren sie wieder, meine drei Probleme.“ <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> Gestaltung mit Flexbox Wed, 21 Feb 18 16:38:44 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714275?srt=yes#m1714275 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714275?srt=yes#m1714275 <p>Hallo,</p> <blockquote> <p>„Da waren sie wieder, meine drei Probleme.“</p> </blockquote> <p>Brauchsu flasche wein?</p> <p>Gruß<br> Kalk</p> Gestaltung mit Flexbox Wed, 21 Feb 18 20:08:17 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714288?srt=yes#m1714288 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714288?srt=yes#m1714288 <p>Hallo Gunnar,</p> <blockquote> <p>Auch bei <a href="https://forum.selfhtml.org/self/2018/feb/21/mosaik-plus-detailzeile-mit-css/1714269#m1714269" rel="noopener noreferrer">diesem Mosaik</a> möchte ich nicht darüber nachdenken wollen, wie das ohne Grid gehen sollte.</p> </blockquote> <p>ich schon. Allerdings ist mir noch nicht ganz klar, was der Fragesteller da genau vorhat. So zeigt sein jetziges Beispiel natürlich noch keine gewünschten Quadrate, weil die Höhe ja dementsprechend dynamisch angepasst werden muss. Auch weiß ich nicht, was er eigentlich in der kompletten Zeile anzeigen möchte. Und ob diese Darstellung von Response wirklich so gewollt ist?... Aber falls ja, bietet sich hier ja ein <a href="https://wiki.selfhtml.org/wiki/HTML/Tabellen/Zellen_verbinden" rel="nofollow noopener noreferrer">klassisches Tabellenlayout</a> als Grundlage an. Welcome back to the roots </p> <p>Gruss<br> Henry</p> "klassisches Tabellenlayout" Fri, 23 Feb 18 16:04:11 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714416?srt=yes#m1714416 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714416?srt=yes#m1714416 <blockquote> <p>bietet sich hier ja ein klassisches Tabellenlayout als Grundlage an.</p> </blockquote> <p><strong>Tolle Satire! Ich hätte es fast für „ernst gemeint“ genommen!</strong></p> <p>Zudem passt sogar Dein Avatar …</p> <p><img src="https://forum.selfhtml.org/system/users/avatars/000/006/887/medium/220px-Jean_Henri_Dunant.jpg" alt="Alter Mann mit Bart" loading="lazy"></p> <p>… bestens zu dieser Aussage, die im letztem Jahrtausend (soweit zu <em>„klassisch“</em>) noch eine gewisse Berechtigung hatte. Nämlich als die „WebDesigner“</p> <ul> <li>jung waren,</li> <li>es noch nicht besser wussten oder konnten und</li> <li>das Geld dringend brauchten.</li> </ul> <p>Aus ähnlichen Gründen (man weiß es inzwischen besser) sind ja heute viele der im antiken Griechenland verbreiteten Praktiken verpönt.</p> Gestaltung mit Flexbox Thu, 22 Feb 18 09:35:29 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714303?srt=yes#m1714303 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714303?srt=yes#m1714303 <p>Hej zusammen,</p> <p>übrigens versuche ich genau so eine Aufteilung für eine Box umzusetzen.</p> <p>Die erste Spalte (immer das erste Element im Grid-Container) enthält nur ein Icon zur optischen Markierung des Box-Typs (Error, Info, Success, Warning usw) und einen entsprechenden Screenreadern zugänglichen Hinweis-Text, der auch bei fehlendem/kaputtem CSS ausgegeben würde.</p> <p>Ich suche gerade nach einer eleganten Lösung. Hat jemand eine Idee, wie man das als grid schreibt? Also eine Spalte mit einem Grid-Item über die gesamte (unbekannte) Höhe des grid-containers und eine zweite Spalte mit n grid-items daneben. <a href="/users/20" class="mention registered-user" rel="noopener noreferrer">@Gunnar Bittersmann</a> vielleicht?</p> <p>wenn ich um alle Inhalte ein <code>div</code> lege ist es einfach - das möchte ich möglichst vermeiden </p> <p>Marc</p> Gestaltung mit Flexbox Thu, 22 Feb 18 09:54:31 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714305?srt=yes#m1714305 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714305?srt=yes#m1714305 <p>Hej marctrix,</p> <blockquote> <p>wenn ich um alle Inhalte ein <code>div</code> lege ist es einfach - das möchte ich möglichst vermeiden </p> </blockquote> <p>Wenn ich ein dutzend Fälle abfange, indem ich mit CSS die items zähle, geht es auch (es sei denn, jemand schreibt in so eine Box mal 13 Absätze).</p> <p>Oder wenn ich <a href="https://codepen.io/haunschild/pen/paKrmy" rel="noopener noreferrer">mit dem span Keyword einen relativ hohen Wert eingebe (Link zum Pen)</a> - dann ist die linke Spalte in den meisten Fällen aber länger als die rechte.</p> <p>Marc</p> Gestaltung mit Flexbox Thu, 22 Feb 18 12:08:32 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714318?srt=yes#m1714318 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714318?srt=yes#m1714318 <p>Hallo marctrix,</p> <blockquote> <p>Die erste Spalte (immer das erste Element im Grid-Container) enthält nur ein Icon zur optischen Markierung des Box-Typs (Error, Info, Success, Warning usw) und einen entsprechenden Screenreadern zugänglichen Hinweis-Text, der auch bei fehlendem/kaputtem CSS ausgegeben würde.</p> </blockquote> <p>Als gefloatetes Icon sähe das bestimmt besser aus.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> Gestaltung mit Flexbox Thu, 22 Feb 18 13:00:18 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714326?srt=yes#m1714326 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714326?srt=yes#m1714326 <p>@@marctrix</p> <blockquote> <p>eine Spalte mit einem Grid-Item über die gesamte (unbekannte) Höhe des grid-containers und eine zweite Spalte mit n grid-items daneben.</p> </blockquote> <p>Hm, ich hätte gedacht, <code>grid-row: 1/-1</code> würde in der Vertikalen ebenso wirken wie <code>grid-column: 1/-1</code> in der Horizontalen. Dem scheint nicht so zu sein – auch <code>grid-auto-flow: column</code> ändert daran nichts.</p> <p>Bin jetzt aber überfragt, ob das so gespecct ist oder ob die Implementierungen in sämtlichen Browsern buggy sind.</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> Gestaltung mit Flexbox Thu, 22 Feb 18 14:59:05 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714337?srt=yes#m1714337 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714337?srt=yes#m1714337 <p>Hallo marctrix,</p> <blockquote> <blockquote> <p>ps. wäre schön, wenn einer der Negativbewerter das auch mal begründen würde...</p> </blockquote> <p>Weil ich es schade fände, ein „einfaches Layout“ unnötig kompliziert zu machen.</p> </blockquote> <p>Genau so sehe ich das auch, allerdings andersrum. Erst recht, wenn ich ich hier die die Verzwickungen in diesem Thread sehe. Mal ehrlich... Ist da nicht <a href="https://www.w3schools.com/code/tryit.asp?filename=FOOHV35H0Z7L" rel="nofollow noopener noreferrer">mein Beispiel </a> oder eine Variante davon nicht einfacher, schneller, robuster?</p> <p>Gruss<br> Henry</p> Gestaltung mit Flexbox Thu, 22 Feb 18 12:26:17 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714323?srt=yes#m1714323 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714323?srt=yes#m1714323 <p>Hej Matthias,</p> <blockquote> <p>Als gefloatetes Icon sähe das bestimmt besser aus.</p> </blockquote> <p>Sorry, Icon ist falsch. Habe das nur geschrieben, weil die Grafik so winzig ist (4x4 px oder so).</p> <p>Damit wird dann die erste Spalte komplett gefüllt (background repeat).</p> <p>Die mit css erzeugbaren Muster waren dem Designer nicht genehm. </p> <p>Darüberhinaus interessiert es mich schlicht, ob und wie man es mit css grid hinbekommt, dass die erste Spalte so hoch ist wie alle Items danach in einer zweiten Spalte, ohne dass man die Zahl der Items kennt.</p> <p>Leider habe ich bis jetzt nur Lösungen für eine bekannte Anzahl von Geschwistern…</p> <p>Marc</p> Gestaltung mit Flexbox Thu, 22 Feb 18 12:50:57 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714325?srt=yes#m1714325 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714325?srt=yes#m1714325 <p>Warum nicht die zweite Spalte mit flex aufteilen, statt mit grid? Also z.B.</p> <p><code>.spalte2 {display: flex; flex-flow: column nowrap;}</code></p> Gestaltung mit Flexbox Thu, 22 Feb 18 13:01:31 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714327?srt=yes#m1714327 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714327?srt=yes#m1714327 <p>@@ottogal</p> <blockquote> <p>Warum nicht die zweite Spalte mit flex aufteilen, statt mit grid? Also z.B.</p> <p><code>.spalte2 {display: flex; flex-flow: column nowrap;}</code></p> </blockquote> <p>Weil es kein Element <code>.spalte2</code> gibt.</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> Gestaltung mit Flexbox Thu, 22 Feb 18 13:40:48 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714333?srt=yes#m1714333 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714333?srt=yes#m1714333 <p>Hej Gunnar,</p> <blockquote> <p>@@marctrix</p> <blockquote> <p>eine Spalte mit einem Grid-Item über die gesamte (unbekannte) Höhe des grid-containers und eine zweite Spalte mit n grid-items daneben.</p> </blockquote> <p>Hm, ich hätte gedacht, <code>grid-row: 1/-1</code> würde in der Vertikalen ebenso wirken wie <code>grid-column: 1/-1</code> in der Horizontalen. Dem scheint nicht so zu sein – auch <code>grid-auto-flow: column</code> ändert daran nichts.</p> </blockquote> <p>Ja, das habe ich unter anderem probiert. Danke trotzdem!</p> <p>Marc</p> Gestaltung mit Flexbox Thu, 22 Feb 18 13:39:00 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714332?srt=yes#m1714332 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714332?srt=yes#m1714332 <p>Hej Gunnar,</p> <blockquote> <p>@@ottogal</p> <blockquote> <p>Warum nicht die zweite Spalte mit flex aufteilen, statt mit grid? Also z.B.</p> <p><code>.spalte2 {display: flex; flex-flow: column nowrap;}</code></p> </blockquote> <p>Weil es kein Element <code>.spalte2</code> gibt.</p> </blockquote> <p>So ist es. Ich habe <code>n</code> Elemente, die auf einem Raster angeordnet werden sollen.</p> <p>Das erste in einer ersten Spalte und so hoch wie alle anderen zusammen.</p> <p>Wäre cool wenn es zum Beispiel für das span-Keyword auch ein Keyword als Wert gäbe. Also <code>last</code> oder ao (analog zu <code>last-child</code>). Dann könnte man so was schreiben:</p> <p><code>grid-row: 1 / span last;</code></p> <p>Habe dazu aber nichts gefunden.</p> <p>Wenn ich möchte, dass sich ein Item über alle Spalten erstreckt, hilft</p> <p><code>grid-column: 1/-1;</code></p> <p>Bei <code>grid-row</code>zeigt das aber nicht das gewünschte Verhalten…</p> <p>Marc</p> Gestaltung mit Flexbox Thu, 22 Feb 18 14:50:15 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714336?srt=yes#m1714336 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714336?srt=yes#m1714336 <p>Das erste Element soll sich ja offenbar semantisch von den übrigen unterscheiden, wieso bekommt es dann keine eigene Behandlung?</p> Gestaltung mit Flexbox Thu, 22 Feb 18 15:02:58 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714338?srt=yes#m1714338 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714338?srt=yes#m1714338 <p>Hej ottogal,</p> <blockquote> <p>Das erste Element soll sich ja offenbar semantisch von den übrigen unterscheiden,</p> </blockquote> <p>Ja, es enthält den Hinweis, dass bestimmte Meldungen folgen.</p> <blockquote> <p>wieso bekommt es dann keine eigene Behandlung?</p> </blockquote> <p>Bekommt es selbstverständlich. Ich überlege derzeit, ob es eine Überschrift sein müsste. Sonst bliebe nur ein <code>p</code> — so oder so macht das keinen Unterschied bei der Frage, wie bekomme ich das dazu, wie gewünscht zu Verhalten. Das Aussehen ist ja unabhängig von der Semantik.</p> <p>Übrigens stellt HTML hier gar keine weitergehende Semantik bereit, Die könnte — wenn überhaupt — nur mit RFD(a) oder so hinzugefügt werden.</p> <p>Was allerdings semantisch keinen Sinn macht ist ein weiteres <code>div</code>. Das benötige ich nicht — jedenfalls nicht aus semantischen Gründen. Zumal ein <code>div</code> ja auch keine Semantik hinzufügt. </p> <p>Das gewünschte Aussehen wäre dann natürlich nur noch ein Klacks.</p> <p>Es geht mir hier aber auch darum ein Problem zu lösen, dass sicher in Zukunft noch öfters auftauchen wird.</p> <p>Kannst du Frage nicht mal in die Runde zwitschern, <a href="/users/20" class="mention registered-user" rel="noopener noreferrer">@Gunnar Bittersmann</a>?</p> <p>Marc</p> Gestaltung mit Flexbox Thu, 22 Feb 18 15:19:57 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714341?srt=yes#m1714341 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714341?srt=yes#m1714341 <p>@@ottogal</p> <blockquote> <p>Das erste Element soll sich ja offenbar semantisch von den übrigen unterscheiden, wieso bekommt es dann keine eigene Behandlung?</p> </blockquote> <p>Bekommt es doch. (In <a href="https://codepen.io/gunnarbittersmann/pen/EQREBj" rel="noopener noreferrer">meinem Pen</a> ist es das <code>h2</code>-Element.)</p> <p>Die <em>anderen</em> Elemente sollen keine eigene Behandlung bekommen – auch nicht in ein <code>div</code> gewrappt werden.</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> Gestaltung mit Flexbox Thu, 22 Feb 18 15:11:48 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714339?srt=yes#m1714339 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714339?srt=yes#m1714339 <p>Hej Henry,</p> <blockquote> <p>Hallo marctrix,</p> <blockquote> <blockquote> <p>ps. wäre schön, wenn einer der Negativbewerter das auch mal begründen würde...</p> </blockquote> <p>Weil ich es schade fände, ein „einfaches Layout“ unnötig kompliziert zu machen.</p> </blockquote> <p>Genau so sehe ich das auch, allerdings andersrum. Erst recht, wenn ich ich hier die die Verzwickungen in diesem Thread sehe.</p> </blockquote> <p>Bei den Verwicklungen geht es um ein Problem, dass ohne Flexbox oder grid auf gar keinen Fall zu lösen wäre. Oder wie bekommst du mit floats o.ä. ein Element so hoch wie beliebig viele andere, deren Inhalt du nicht kennst? </p> <blockquote> <p>Mal ehrlich... Ist da nicht <a href="https://www.w3schools.com/code/tryit.asp?filename=FOOHV35H0Z7L" rel="nofollow noopener noreferrer">mein Beispiel </a> oder eine Variante davon nicht einfacher, schneller, robuster?</p> </blockquote> <p>Nein. Das wirst du selber sehen, wenn du mal echte Texte reinkopierst.</p> <p>Den hier zum Beispiel (da der noch recht kurz ist, gerne auch zwei oder drei mal) - schau mal, was dein robustes Layout dann tut :</p> <pre><code class="block language-html">Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. </code></pre> <p>Marc</p> Gestaltung mit Flexbox Thu, 22 Feb 18 15:26:08 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714343?srt=yes#m1714343 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714343?srt=yes#m1714343 <p>@@Henry</p> <blockquote> <p>Mal ehrlich... Ist da nicht <a href="https://www.w3schools.com/code/tryit.asp?filename=FOOHV35H0Z7L" rel="nofollow noopener noreferrer">mein Beispiel </a> oder eine Variante davon nicht einfacher, schneller, robuster?</p> </blockquote> <p><a href="https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714274#m1714274" rel="noopener noreferrer">Nein.</a> Das hatten wir doch schon.</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> Gestaltung mit Flexbox Thu, 22 Feb 18 15:21:35 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714342?srt=yes#m1714342 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714342?srt=yes#m1714342 <p>@@marctrix</p> <blockquote> <p>Kannst du Frage nicht mal in die Runde zwitschern, <a href="/users/20" class="mention registered-user" rel="noopener noreferrer">@Gunnar Bittersmann</a>?</p> </blockquote> <p><a href="https://twitter.com/g16n/status/966665031487238145" rel="nofollow noopener noreferrer">Wie jetzt? Noch mal?</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> Gestaltung mit Flexbox Thu, 22 Feb 18 15:27:17 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714344?srt=yes#m1714344 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714344?srt=yes#m1714344 <p>Hallo</p> <p>Sehen wir mal. So viel Text braucht es aber überhaupt nicht.</p> <p><a href="http://yaml4.bplaced.net/index001.html" rel="nofollow noopener noreferrer">Beispielseite (nur Text hinzugefügt, sonst keine Änderungen)</a></p> <p>Autsch.</p> <p>Gruss</p> <p>MrMurphy</p> Gestaltung mit Flexbox Thu, 22 Feb 18 15:33:27 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714346?srt=yes#m1714346 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714346?srt=yes#m1714346 <p>Hallo marctrix,</p> <blockquote> <p>Bei den Verwicklungen geht es um ein Problem, dass ohne Flexbox oder grid auf gar keinen Fall zu lösen wäre. Oder wie bekommst du mit floats o.ä. ein Element so hoch wie beliebig viele andere, deren Inhalt du nicht kennst? </p> </blockquote> <p>Dass etwas ohne Grid nicht gehen soll, glaube ich niemals, schließlich ging auch "before Grid" so ziemlich alles. Die Frage ist nur, viel oder wenig Aufwand. Und genau das wäre hier zu ergründen.</p> <blockquote> <blockquote> <p>Mal ehrlich... Ist da nicht <a href="https://www.w3schools.com/code/tryit.asp?filename=FOOHV35H0Z7L" rel="nofollow noopener noreferrer">mein Beispiel </a> oder eine Variante davon nicht einfacher, schneller, robuster?</p> </blockquote> <p>Nein. Das wirst du selber sehen, wenn du mal echte Texte reinkopierst.</p> </blockquote> <blockquote> <pre><code class="block language-html">Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines..... </code></pre> </blockquote> <p>Ja, das habe ich <a href="https://www.w3schools.com/code/tryit.asp?filename=FOPMWG98LEGZ" rel="nofollow noopener noreferrer">jetzt mal gemacht</a>. Und sehe da auch kein Problem. Denn die Sache ist ja die... Wie würde das denn 1. mit Grid aussehen und 2. Es ist ja nur ein Grundgerüst für ein Layout, wobei man eben den Content und das echte gewünschte spätere Aussehen nur vermuten kann. Architektonisch auf jeden Fall, glaube ich, wird es locker mit kleinen Anpassungen funktionieren.</p> <p>Aber nun würde mich mal dein Textbeispiel beim gewünschten Gridbeispiel interessieren.</p> <p>Gruss<br> Henry</p> Gestaltung mit Flexbox Thu, 22 Feb 18 15:47:56 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714348?srt=yes#m1714348 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714348?srt=yes#m1714348 <p>Hallo Gunnar,</p> <blockquote> <p>@@Henry</p> <blockquote> <p>Mal ehrlich... Ist da nicht <a href="https://www.w3schools.com/code/tryit.asp?filename=FOOHV35H0Z7L" rel="nofollow noopener noreferrer">mein Beispiel </a> oder eine Variante davon nicht einfacher, schneller, robuster?</p> </blockquote> <p><a href="https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714274#m1714274" rel="noopener noreferrer">Nein.</a> Das hatten wir doch schon.</p> </blockquote> <p>Das ist aber nur deine subjektive Meinung, faktisch siehts allerdings so aus: W3c-conform und funktioniert in <strong>jedem</strong> Browser. Ob ich nun den Body benutze oder einen Container drum herum lege, ist wohl eher nebensächlich im Hinblick, was die wichtigen Aspekte betrifft.</p> <p>Gruss<br> Henry</p> Gestaltung mit Flexbox Thu, 22 Feb 18 15:44:08 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714347?srt=yes#m1714347 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714347?srt=yes#m1714347 <p>Hej Henry,</p> <blockquote> <blockquote> <p>Bei den Verwicklungen geht es um ein Problem, dass ohne Flexbox oder grid auf gar keinen Fall zu lösen wäre. Oder wie bekommst du mit floats o.ä. ein Element so hoch wie beliebig viele andere, deren Inhalt du nicht kennst? </p> </blockquote> <p>Dass etwas ohne Grid nicht gehen soll, glaube ich niemals,</p> </blockquote> <p>Sag mir einfach wie! Dann glaube ich es auch. Mehr noch: ich weiß dann!</p> <blockquote> <p>Ja, das habe ich <a href="https://www.w3schools.com/code/tryit.asp?filename=FOPMWG98LEGZ" rel="nofollow noopener noreferrer">jetzt mal gemacht</a>. Und sehe da auch kein Problem.</p> </blockquote> <p>Dann benutzt du vermutlich, Lynx, einen Screenreader oder hast den Lesemodus deines Browsers aktiviert </p> <blockquote> <p>Wie würde das denn 1. mit Grid aussehen</p> </blockquote> <p>Probier es halt aus: <a href="https://codepen.io/rachelandrew/pen/ZKaXGM" rel="noopener noreferrer">Responsive header, two columns and a footer</a></p> <p>Marc</p> Gestaltung mit Flexbox Fri, 23 Feb 18 16:27:45 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714419?srt=yes#m1714419 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714419?srt=yes#m1714419 <p>Hej Henry,</p> <blockquote> <blockquote> <blockquote> <p>Mal ehrlich... Ist da nicht <a href="https://www.w3schools.com/code/tryit.asp?filename=FOOHV35H0Z7L" rel="nofollow noopener noreferrer">mein Beispiel </a> oder eine Variante davon nicht einfacher, schneller, robuster?</p> </blockquote> </blockquote> </blockquote> <blockquote> <blockquote> <p>Nein. Das wirst du selber sehen, wenn du mal echte Texte reinkopierst.</p> </blockquote> </blockquote> <blockquote> <p>Ja, das habe ich <a href="https://www.w3schools.com/code/tryit.asp?filename=FOPMWG98LEGZ" rel="nofollow noopener noreferrer">jetzt mal gemacht</a>. Und sehe da auch kein Problem.</p> </blockquote> <p>Ich aber: die linke Spalte ist kürzer als die rechte.</p> <p>Marc</p> Gestaltung mit Flexbox Fri, 23 Feb 18 00:53:56 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714358?srt=yes#m1714358 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714358?srt=yes#m1714358 <p>Hallo marctrix,</p> <blockquote> <blockquote> <blockquote></blockquote> <p>Dass etwas ohne Grid nicht gehen soll, glaube ich niemals,</p> </blockquote> <p>Sag mir einfach wie! Dann glaube ich es auch. Mehr noch: ich weiß dann!</p> </blockquote> <p>Komme ich gleich zu, aber zuerst...</p> <blockquote> <blockquote> <p>Ja, das habe ich <a href="https://www.w3schools.com/code/tryit.asp?filename=FOPMWG98LEGZ" rel="nofollow noopener noreferrer">jetzt mal gemacht</a>. Und sehe da auch kein Problem.</p> </blockquote> <p>Dann benutzt du vermutlich, Lynx, einen Screenreader oder hast den Lesemodus deines Browsers aktiviert </p> </blockquote> <p>wie meinst du das? Ist doch alles zu sehen.</p> <p><a href="/images/e003926d-3c9a-4dc8-9b59-63b9c0f304fc.jpg" rel="noopener noreferrer"><img src="/images/e003926d-3c9a-4dc8-9b59-63b9c0f304fc.jpg?size=medium" alt="" loading="lazy"></a></p> <blockquote> <blockquote> <p>Wie würde das denn 1. mit Grid aussehen</p> </blockquote> <p>Probier es halt aus: <a href="https://codepen.io/rachelandrew/pen/ZKaXGM" rel="noopener noreferrer">Responsive header, two columns and a footer</a></p> </blockquote> <p>Na ja, ist jetzt nicht unbedingt, das Layout was der Eingangsfrage zugrunde liegt, aber zumindest ähnlich. Dass dein Codepen-Beispiel (warum ihr alle das nehmen müsst...) natürlich im IE11 wieder mal anders aussieht als zb. im FF, dürfte klar sein?</p> <p>Wie auch immer, du meinst das geht nur mit neueren Techniken? Nein. Es gibt sogar etliche simple Möglichkeiten dafür. <a href="https://www.w3schools.com/code/tryit.asp?filename=FOQ419X5BPYK" rel="nofollow noopener noreferrer">zb. so...(natürlich anpassungsfähig)</a> aber in jedem Fall in jedem Browser problemlos.</p> <p>Gruss<br> Henry</p> Gestaltung mit Flexbox Thu, 22 Feb 18 15:55:01 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714349?srt=yes#m1714349 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714349?srt=yes#m1714349 <p>@@Henry</p> <blockquote> <blockquote> <p><a href="https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714274#m1714274" rel="noopener noreferrer">Nein.</a> Das hatten wir doch schon.</p> </blockquote> <p>Das ist aber nur deine subjektive Meinung</p> </blockquote> <p>Ich hatte objektive Gründe angeführt.</p> <p>Und es hat niemand widersprochen.</p> <blockquote> <p>faktisch siehts allerdings so aus: W3c-conform und funktioniert in <strong>jedem</strong> Browser.</p> </blockquote> <p>Nein. Falsche Reihenfolge im Mark-up funktioniert halt nicht in jedem Browser. Und was noch wichtiger ist: funktioniert nicht für jeden <strong>Nutzer</strong>.</p> <blockquote> <p>Ob ich nun den Body benutze oder einen Container drum herum lege, ist wohl eher nebensächlich im Hinblick, was die wichtigen Aspekte betrifft.</p> </blockquote> <p>Ja, das hat in der Tat keinen Einfluss auf die UX. Wenn es nicht dreiundzwölzig unnütze Elemente sind, was zulasten der Performanz geht.</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> Gestaltung mit Flexbox Thu, 22 Feb 18 17:06:54 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714354?srt=yes#m1714354 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714354?srt=yes#m1714354 <p>Hej Gunnar,</p> <p>@@Henry</p> <blockquote> <blockquote> <p>Ob ich nun den Body benutze oder einen Container drum herum lege, ist wohl eher nebensächlich im Hinblick, was die wichtigen Aspekte betrifft.</p> </blockquote> <p>Ja, das hat in der Tat keinen Einfluss auf die UX. Wenn es nicht dreiundzwölzig unnütze Elemente sind, was zulasten der Performanz geht.</p> </blockquote> <p>Wieso sollte jemand, der solchen Unsinn in den Code schreibt, an anderer Stelle sauber arbeiten.</p> <p>Ich bin ja nun das eine oder andere Jährchen im Geschäft und habe zwei Gruppen von Entwicklern kennen gelernt:</p> <p>Solche, die schlicht zu faul sind, sich weiter zu bilden und solche, die ihr wissen aktuell halten.</p> <p>Die lassen sich wieder in zwei Gruppen unterteilen: Entwickler, welche die neuesten Techniken nutzen, um sich selber die Arbeit zu erleichtern und solche, die sich bemühen Millionen von Webanwendern die Arbeit zu erleichtern.</p> <p>Marc</p> <p>PS: Was mir auch aufgefallen ist: alle möglichen Frameworks und Hilfen für Entwickler zielen darauf ab wiederverwertbaren Code zu identifizieren und bereit zu stellen. Allerdings gibt es erstaunlich wenig wiederverwertbare Konstrukte, wenn man individuelle Webseiten erstellen möchte. Bootstrap und co sind bei diesem Anliegen vollkommen gescheitert. Was man damit erstellt ist alles von der Stange und gewöhnlich.</p> <p>Flexbox ist wirklich eine kleine Revolution gewesen, grid ist eine große, die uns viel mehr Freiheit bei der Umsetzung neuer Projekte gibt. Layouts werden möglich, die vorher schlichtweg nicht machbar waren.</p> Gestaltung mit Flexbox Fri, 23 Feb 18 15:47:14 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714414?srt=yes#m1714414 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714414?srt=yes#m1714414 <p>@@marctrix</p> <blockquote> <p>Die lassen sich wieder in zwei Gruppen unterteilen: Entwickler, welche die neuesten Techniken nutzen, um sich selber die Arbeit zu erleichtern und solche, die sich bemühen Millionen von Webanwendern die Arbeit zu erleichtern.</p> </blockquote> <p>Venn-Diagramm dazu:</p> <p><a href="/images/528cb990-b821-45b7-875d-64945a0b80e8.png" rel="noopener noreferrer"><img src="/images/528cb990-b821-45b7-875d-64945a0b80e8.png?size=medium" alt="" loading="lazy"></a></p> <p>Es gibt Entwickler, die ihre Arbeit machen und soche, die das nicht tun.</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> Gestaltung mit Flexbox Fri, 23 Feb 18 07:50:20 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714366?srt=yes#m1714366 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714366?srt=yes#m1714366 <p>Hej Henry,</p> <blockquote> <blockquote> <blockquote> <p>Dass etwas ohne Grid nicht gehen soll, glaube ich niemals,</p> </blockquote> <p>Sag mir einfach wie! Dann glaube ich es auch. Mehr noch: ich weiß dann!</p> </blockquote> <p>Komme ich gleich zu, aber zuerst...</p> </blockquote> <p>Dir Aufgabe war: das erste Element soll so hoch sein, wie alle <strong>Geschwister</strong> zusammen.</p> <p>Das erste Element soll optisch eine eigene Spalte bilden, also <a href="https://codepen.io/haunschild/pen/paKrmy" rel="noopener noreferrer">wie in diesem Pen hier</a>. Aber (im Gegensatz zum Pen): die Anzahl der Geschwisterelemente soll beliebig sein. Mein Beispiel funktioniert nur mit einer bekannten Anzahl von Elementen.</p> <p>Marc</p> Gestaltung mit Flexbox Fri, 23 Feb 18 11:49:10 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714375?srt=yes#m1714375 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714375?srt=yes#m1714375 <p>Hallo marctrix,</p> <p>ähm, etwas verwirrend deine Antwort...</p> <p>Du zeigst <a href="https://codepen.io/rachelandrew/pen/ZKaXGM" rel="noopener noreferrer">ein Beispiel</a>, was nicht ohne Grid gehen soll.</p> <p>Ich gehe darauf ein und zeige <a href="https://www.w3schools.com/code/tryit.asp?filename=FOQ419X5BPYK" rel="nofollow noopener noreferrer">dieses Beispiel</a>.</p> <blockquote> <blockquote> <blockquote> <p>Sag mir einfach wie! Dann glaube ich es auch. Mehr noch: ich weiß dann!</p> </blockquote> </blockquote> </blockquote> <p>Was bedeutet das jetzt? "Weißt du jetzt" oder habe ich dich falsch verstanden?</p> <p>Gruss<br> Henry</p> Gestaltung mit Flexbox Fri, 23 Feb 18 12:10:21 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714378?srt=yes#m1714378 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714378?srt=yes#m1714378 <p>Hallo Henry,</p> <blockquote> <p>ähm, etwas verwirrend deine Antwort...</p> <p>Du zeigst <a href="https://codepen.io/rachelandrew/pen/ZKaXGM" rel="noopener noreferrer">ein Beispiel</a>, was nicht ohne Grid gehen soll.</p> <p>Ich gehe darauf ein und zeige <a href="https://www.w3schools.com/code/tryit.asp?filename=FOQ419X5BPYK" rel="nofollow noopener noreferrer">dieses Beispiel</a>.</p> </blockquote> <p>BTW, dein Beispiel sieht ganz anders aus als das von Marc </p> <p>Im übrigen bin ich der Meinung, dass es albern ist sich Grid-Layout zu verschliessen. Das ist ein so mächtiges und einfach zu bedienendes Tool mit einer breiten und guten Unterstützung, es erschliesst sich mir nicht, warum man da freiwillig drauf verzichtet.</p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> Gestaltung mit Flexbox Fri, 23 Feb 18 12:46:13 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714381?srt=yes#m1714381 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714381?srt=yes#m1714381 <p>Hej Henry,</p> <blockquote> <p>Du zeigst <a href="https://codepen.io/rachelandrew/pen/ZKaXGM" rel="noopener noreferrer">ein Beispiel</a>, was nicht ohne Grid gehen soll.</p> </blockquote> <p>Da gab es wohl ein Missverständnis.</p> <p>Es gab erst eine Anfrage vom OP zu einem Layout, auf das du auch eingegangen bist. Allerdings hatte ich das für mich schon als gelöst abgehakt, egal ob mittels grid oder veralteter Technik (ja man kann das ohne Grid machen, wenn man muss, weil mehrere Spalten auch im IE10 sein sollen - es gibt schon mal so Kundenanfragen).</p> <p>Dein Beispiel taugt dafür aber leider nicht.</p> <p>Dennoch dachte ich, <strong>dieser</strong> Drops sei gelutscht, als du folgendes geschrieben hast:</p> <blockquote> <blockquote> <p>Genau so sehe ich das auch, allerdings andersrum. Erst recht, wenn ich ich hier die die Verzwickungen in diesem Thread sehe.</p> </blockquote> </blockquote> <p>Ich meinte daher, dass du mit Verzwickungen mein noch ungelöstes Problem in einem Nebenast dieses Threads gemeint hast und habe darum geantwortet:</p> <blockquote> <p>Bei den Verwicklungen geht es um ein Problem, dass ohne Flexbox oder grid auf gar keinen Fall zu lösen wäre. Oder wie bekommst du mit floats o.ä. ein Element so hoch wie beliebig viele andere, deren Inhalt du nicht kennst? </p> </blockquote> <p>Ab da haben wir wohl aneinander vorbei geredet. Wie auch immer. Deine Behauptung, man kann ohne Grid <strong>alles</strong> machen, was mit Grid geht, stimmt so nicht.</p> <p>Auch wenn man dieselbe Optik mit Klimmzügen hinbekommen mag, sind dann doch mehr oder weniger viele und umfangreiche Hacks und überflüssige Elemente im HTML nötig.</p> <p>Ungelöst ist nach wie vor das nun schon mehrfach von mir beschriebene Problem. Offenbar ist das derzeit weder mit noch ohne Grid zu lösen.</p> <p>Allerdings mag es sich dabei um Fehler in den Browsern handeln, nicht am CSS Grid, <a href="https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714326#m1714326" rel="noopener noreferrer">wie Gunnar vermutet</a> hat.</p> <p>So oder so: CSS Grid ist die erste und einzige Technik, die speziell für zweidimensionale Layouts von Webseiten zur Verfügung steht. Alles vorher waren <strong>Hacks</strong>, mit denen wir uns abgemüht haben, weil es keine vernünftige Technik gab.</p> <p>Mit nur zwei Zeilen CSS erzeugt man ein zweispaltiges Layout:</p> <pre><code class="block language-css"><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> 1fr 1fr<span class="token punctuation">;</span> </code></pre> <p>Lassen wir mal außen vor, dass du meinst, grid sei überflüssig, weil man mit den veralteten umständlichen Hacks alles machen kann, was mit Grid geht. Mit welcher Technik außer Grid sind zwei Spalten leichter zu erzeugen?</p> <p>Grid ist einfach. Nicht nur für mich als Entwickler.</p> <p>Auch als Dozent kann ich nur sagen: es war nie leichter, layouten zu unterrichten.</p> <p>Marc</p> Gestaltung mit Flexbox Fri, 23 Feb 18 12:18:50 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714379?srt=yes#m1714379 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714379?srt=yes#m1714379 <p>Hallo Christian,</p> <blockquote> <p>BTW, dein Beispiel sieht ganz anders aus als das von Marc </p> </blockquote> <p>ganz anders? wo denn?</p> <blockquote> <p>Im übrigen bin ich der Meinung, dass es albern ist sich Grid-Layout zu verschliessen. Das ist ein so mächtiges und einfach zu bedienendes Tool mit einer breiten und guten Unterstützung, es erschliesst sich mir nicht, warum man da freiwillig drauf verzichtet.</p> </blockquote> <p>oh, das tue ich nicht. Nur benutze ich lieber den kleinsten gemeinsamen Nenner für alle browser, sofern das Resultat das Gleiche ist und der Aufwand sogar noch weniger. Wie ich schon zu Anfang sagte... Bei anderen Layouts mag Grid berechtigt sein, aber nicht bei so simplen.</p> <p>Gruss<br> Henry</p> Gestaltung mit Flexbox Fri, 23 Feb 18 12:26:43 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714380?srt=yes#m1714380 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714380?srt=yes#m1714380 <p>Hallo Henry,</p> <blockquote> <blockquote> <p>BTW, dein Beispiel sieht ganz anders aus als das von Marc </p> </blockquote> <p>ganz anders? wo denn?</p> </blockquote> <p>Marcs Beispiel</p> <p><a href="/images/3d7339d7-4403-40ee-8456-71c29fbd628d.png" rel="noopener noreferrer"><img src="/images/3d7339d7-4403-40ee-8456-71c29fbd628d.png?size=medium" alt="Header, Sidebar + Main, Footer im Grid" loading="lazy"></a></p> <p>Deins</p> <p><a href="/images/7049b660-e0a6-4352-870a-c834218f7f55.png" rel="noopener noreferrer"><img src="/images/7049b660-e0a6-4352-870a-c834218f7f55.png?size=medium" alt="Header, Nav, Main, Footer untereinander" loading="lazy"></a></p> <p>Beachte, dass ich das Fenster schon extrem breit gezogen habe, um ein vielfaches grösser als das Beispiel von Marc (deshalb habe ich das „result size“ mit in den Screenshot genommen).</p> <blockquote> <p>oh, das tue ich nicht.</p> </blockquote> <p>Doch, den Eindruck machst du schon ziemlich deutlich.</p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> Gestaltung mit Flexbox Fri, 23 Feb 18 12:48:06 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714382?srt=yes#m1714382 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714382?srt=yes#m1714382 <p>Hej Henry,</p> <blockquote> <p>oh, das tue ich nicht. Nur benutze ich lieber den kleinsten gemeinsamen Nenner für alle browser, sofern das Resultat das Gleiche ist und der Aufwand sogar noch weniger. Wie ich schon zu Anfang sagte... Bei anderen Layouts mag Grid berechtigt sein, aber nicht bei so simplen.</p> </blockquote> <p>Und das versuchst du mit einem nicht funktionierenden Beispiel zu belegen, "dass man ja noch anpassen kann"? Bring es zum funktionieren und dann schauen wir uns an, ob Grid oder Deine Vorgehensweise aufwändiger ist. </p> <p>Marc</p> Gestaltung mit Flexbox Fri, 23 Feb 18 13:10:01 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714385?srt=yes#m1714385 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714385?srt=yes#m1714385 <p>Hallo Christian,</p> <p>sehr seltsam. Mal davon abgesehen, dass sowieso alles anpassbar ist, besonders was @media Screen angeht, wundert mich dein Screenshot.</p> <p>Hier mal meine, sowohl von Marctrix als meine, sowohl IE als auch FF.</p> <p><strong>Marc IE Landscape</strong></p> <p><a href="/images/3fdce844-6a2a-4ee3-be51-e2561bbeb8a7.jpg" rel="noopener noreferrer"><img src="/images/3fdce844-6a2a-4ee3-be51-e2561bbeb8a7.jpg?size=medium" alt="" loading="lazy"></a></p> <p><strong>Ich IE Landscape</strong></p> <p><a href="/images/9bca643f-9414-4882-904d-b806179d8ece.jpg" rel="noopener noreferrer"><img src="/images/9bca643f-9414-4882-904d-b806179d8ece.jpg?size=medium" alt="" loading="lazy"></a></p> <p><strong>Marc IE Mobil</strong></p> <p><a href="/images/624c1c77-c992-4742-b38b-67e7b95522b8.jpg" rel="noopener noreferrer"><img src="/images/624c1c77-c992-4742-b38b-67e7b95522b8.jpg?size=medium" alt="" loading="lazy"></a></p> <p><strong>Ich IE Mobil</strong></p> <p><a href="/images/f980537d-5348-4e6b-8262-e6b331165c87.jpg" rel="noopener noreferrer"><img src="/images/f980537d-5348-4e6b-8262-e6b331165c87.jpg?size=medium" alt="" loading="lazy"></a></p> <p><strong>Marc FF Landscape</strong></p> <p><a href="/images/616c31d6-2885-440f-99fb-4458de451138.jpg" rel="noopener noreferrer"><img src="/images/616c31d6-2885-440f-99fb-4458de451138.jpg?size=medium" alt="" loading="lazy"></a></p> <p><strong>Ich FF Landscape</strong></p> <p><a href="/images/ef381e9f-1217-461c-b81b-e22fc3189669.jpg" rel="noopener noreferrer"><img src="/images/ef381e9f-1217-461c-b81b-e22fc3189669.jpg?size=medium" alt="" loading="lazy"></a></p> <p><strong>Marc FF Mobil</strong></p> <p><a href="/images/be253432-50a4-44ac-b7ab-eb215872814c.jpg" rel="noopener noreferrer"><img src="/images/be253432-50a4-44ac-b7ab-eb215872814c.jpg?size=medium" alt="" loading="lazy"></a></p> <p><strong>Ich FF Mobil</strong></p> <p><a href="/images/5f415db9-3e06-4826-abe1-e2d6e83dd9a6.jpg" rel="noopener noreferrer"><img src="/images/5f415db9-3e06-4826-abe1-e2d6e83dd9a6.jpg?size=medium" alt="" loading="lazy"></a></p> <p>Du siehst, kann ich jetzt nicht nachvollziehen. Was ich aber sehe +++STOP+++ Die Breitenangabe aus deinem Screen ist schwer zu erkennen, entw. 1075 oder 1875. Falls 1875, erklärt die @Media-Anweisung das wohl von selbst, es erklärt dann aber nicht warum du ein unrealistisches Portrait-Screen so hier optisch hinterlegst wie ein Landscapeview. Falls aber doch 1075, ja dann verstehe ich es nicht, siehe screenshots.</p> <p>Gruss<br> Henry</p> Gestaltung mit Flexbox Fri, 23 Feb 18 15:27:02 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714411?srt=yes#m1714411 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714411?srt=yes#m1714411 <p>Hallo marctrix,</p> <blockquote> <p>Ab da haben wir wohl aneinander vorbei geredet. Wie auch immer. Deine Behauptung, man kann ohne Grid <strong>alles</strong> machen, was mit Grid geht, stimmt so nicht.</p> </blockquote> <p>Habe ich so nicht gesagt, sondern</p> <blockquote> <p>...<strong>mir</strong> fällt kein Szenario ein, bei dem ich <strong>standard</strong>-gridlayout nicht klassisch hinbekomme…</p> </blockquote> <p><em><strong>Betonung auf Mir und Standard</strong></em></p> <p>Umso mehr interessiert mich ja ein Vergleich.</p> <blockquote> <p>Auch wenn man dieselbe Optik mit Klimmzügen hinbekommen mag, sind dann doch mehr oder weniger viele und umfangreiche Hacks und überflüssige Elemente im HTML nötig.</p> </blockquote> <p>Bei mir weder Hacks, noch überflüssige Elemente aber dafür robust und global einsetzbar.</p> <blockquote> <p>Mit nur zwei Zeilen CSS erzeugt man ein zweispaltiges Layout:</p> <pre><code class="block language-css"><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> 1fr 1fr<span class="token punctuation">;</span> </code></pre> <p>Lassen wir mal außen vor, dass du meinst, grid sei überflüssig, weil man mit den veralteten umständlichen Hacks alles machen kann, was mit Grid geht. Mit welcher Technik außer Grid sind zwei Spalten leichter zu erzeugen?</p> </blockquote> <p>Kommt ja auf den Rest an, aber je nach Zweck und Elementenzuordnung würde ich zunächst mal entweder:</p> <pre><code class="block language-css"><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>50%<span class="token punctuation">;</span> </code></pre> <p>oder</p> <pre><code class="block language-css"><span class="token property">display</span><span class="token punctuation">:</span>table-cell<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>50%<span class="token punctuation">;</span> </code></pre> <p>oder so ähnlich versuchen.</p> <blockquote> <p>Grid ist einfach. Nicht nur für mich als Entwickler.</p> </blockquote> <p>Bestreitet ja keiner, aber meine Vorgehensweise auch und dazu noch Browserkompatibel(die angeblichen ca. 3% vom IE11 dürften eher ca. 6% betragen, und das ist dann doch nicht so wenig)</p> <p>Aber nochmal, ich will hier bestimmt nicht Grid schlecht reden, denn ich war schon immer ein Fan vom allseits gehassten Tabellenlayout und im Grunde ist Grid ja nichts anderes, wenn auch in einer von Html getrennten und moderneren Form.</p> <p>Gruss<br> Henry</p> Gestaltung mit Flexbox Fri, 23 Feb 18 13:16:28 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714386?srt=yes#m1714386 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714386?srt=yes#m1714386 <p>Hallo Henry,</p> <blockquote> <p>Du siehst, kann ich jetzt nicht nachvollziehen. Was ich aber sehe +++STOP+++ Die Breitenangabe aus deinem Screen ist schwer zu erkennen, entw. 1075 oder 1875. Falls 1875, erklärt die @Media-Anweisung das wohl von selbst, es erklärt dann aber nicht warum du ein unrealistisches Portrait-Screen so hier optisch hinterlegst wie ein Landscapeview. Falls aber doch 1075, ja dann verstehe ich es nicht, siehe screenshots.</p> </blockquote> <p>Unrealistisch? So breit ist halt mein Browser-Fenster. Ich gebe doch einem Fenster nicht den gesamten Screen, soweit kommts noch. Ich habe eine Auflösung von 3840x2160 Pixeln, davon bekommt der Browser 1920x1080 abzüglich ein paar Pixel gaps und der Menü-Leiste oben, also etwa 50%. Das ist nicht unrealistisch, das ist höchst realistisch.</p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> Gestaltung mit Flexbox Fri, 23 Feb 18 13:30:01 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714387?srt=yes#m1714387 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714387?srt=yes#m1714387 <p>Hallo Christian,</p> <blockquote> <p>Unrealistisch? So breit ist halt mein Browser-Fenster. Ich gebe doch einem Fenster nicht den gesamten Screen, soweit kommts noch. Ich habe eine Auflösung von 3840x2160 Pixeln, davon bekommt der Browser 1920x1080 abzüglich ein paar Pixel gaps und der Menü-Leiste oben, also etwa 50%. Das ist nicht unrealistisch, das ist höchst realistisch.</p> </blockquote> <p>na toll, glaube aber die meisten würden bei deinem (ausgeschnittenen) Screenshot denken, es sei Querformat. Wie auch immer, ich habe @media nur zwischen landscape und Portrait unterschieden lassen, dürftest du aber auch erkannt haben, also stattdessen oder zusätzlich eine Pixelangabe und das wars. Aber das weißt du ja und daher zu behaupten BTW, <em>"<strong>dein Beispiel sieht ganz anders aus als das von Marc</strong>"</em>, finde ich schon seltsam und ärgerlich, weil ich es geglaubt habe und mir jetzt die ganze Arbeit mit den Screenshots umsonst gemacht habe.</p> <p>Gruss<br> Henry</p> Gestaltung mit Flexbox Fri, 23 Feb 18 14:33:17 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714398?srt=yes#m1714398 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714398?srt=yes#m1714398 <p>Hej Christian,</p> <blockquote> <p>Ich habe eine Auflösung von 3840x2160 Pixeln,</p> </blockquote> <p>Schöner Monitor!</p> <p>Marc</p> Gestaltung mit Flexbox Fri, 23 Feb 18 13:37:15 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714389?srt=yes#m1714389 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714389?srt=yes#m1714389 <p>Hallo Henry,</p> <blockquote> <p>na toll, glaube aber die meisten würden bei deinem (ausgeschnittenen) Screenshot denken, es sei Querformat. Wie auch immer, ich habe @media nur zwischen landscape und Portrait unterschieden lassen, dürftest du aber auch erkannt haben, also stattdessen oder zusätzlich eine Pixelangabe und das wars. Aber das weißt du ja und daher zu behaupten BTW, <em>"<strong>dein Beispiel sieht ganz anders aus als das von Marc</strong>"</em>, finde ich schon seltsam und ärgerlich, weil ich es geglaubt habe und mir jetzt die ganze Arbeit mit den Screenshots umsonst gemacht habe.</p> </blockquote> <p>Ich habe mir deinen Sourcecode nicht angeschaut. Ich habe mir die Ausgabe angeschaut, ein wenig mit der Breite herumgespielt und versucht einen Breakpoint zu finden, bei dem es aussieht wie Marcs. Nachdem ich keinen Erfolg hatte hab ichs dann abgehakt als „läuft offensichtlich nicht.“</p> <p><strong>Ich</strong> finde es seltsam und ärgerlich, dass du mir deine Fehleranalyse aufbürden willst. Das ist doch deine Aufgabe.</p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> Gestaltung mit Flexbox Fri, 23 Feb 18 14:27:12 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714396?srt=yes#m1714396 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714396?srt=yes#m1714396 <p>Hej Christian,</p> <blockquote> <p><strong>Ich</strong> finde es seltsam und ärgerlich, dass du mir deine Fehleranalyse aufbürden willst. Das ist doch deine Aufgabe.</p> </blockquote> <p>Er war ja auch zwischendurch am Quellcode — das Problem, das beim Einfügen der Texte auftrat, kann ich jetzt so nicht mehr nachvollziehen.</p> <p>Wie dem auch sei. Jetzt noch allerhand media-queries hinzuzufügen, verringert den Aufwand ja nicht.</p> <p>Ich verstehe nur nicht, warum du, <a href="/users/6887" class="mention registered-user" rel="noopener noreferrer">@Henry</a> , immer noch behauptest, Deine Lösung sei simple.</p> <p>Mit Grid braucht man in vielen Fällen keine einzige media query und wenn, sind die Anpassngen i.d.R. schneller gemacht. Gerade wenn ich media-Queries benötige, arbeite ich gerne mit <code>grid-area</code>: damit kann man Namen vergeben und sich sein Layout dann als quasi-ASCII-Art in die CSS-Datei „malen“.</p> <p>Extrem leicht verständlich, mal wieder: insbesondere für Anfänger!</p> <p>Einziger „Vorteil“ der veralteten, umständlichen Layout-<s>Techniken</s> -Hacks: sie funktionieren in uralten Browsern. Ich würde zwar nicht auf die 3,5% IE11-Nutzer verzichten, aber ich finde es akzeptabel, wenn die dieselbe Darstellung bekommen, wie die Mehrheit der Nutzer, die inzwischen mit Smartphone unterwegs ist.</p> <p>IE11-Nutzer sehen also die <strong>Standard</strong>-Darstellung und nicht irgendwas minderwertiges oder kaputtes. Sie bekommen halt nicht das progressive enhancement für die Besitzer halbwegs aktueller Desktop-Software.</p> <p>Damit <strong>muss</strong> (und kann) man leben, wenn man alten Kram verwendet (was ich übrigens gar nicht ab kann — oft sind Leute, die so etwas einsetzen, generell update-faul und ihre Rechner sind längst Mitglied in diversen Bot-Netzen).</p> <p>Aber auch ich habe manchmal Kunden, die auf der Unterstützung alter Browser bestehen. Das wird dann aus zwei Gründen teuer: erstens sind die alten Techniken aufwändiger, wie hier bereits mehrfach belegt und zweitens muss ich bei manchen Dingen schon weit hinten im Hinterstübchen kramen und den Staub von fast vergessenen Techniken pusten, bevor alles so klappt, wie gewünscht.</p> <p>Egal: wer bezahlt bestimmt! Es ist das gute Recht eines Kunden, sich gegen Geld alle Wünsche erfüllen zu lassen und meinen Rat in den Wind zu schlagen.</p> <p>Aber ich stelle jetzt mal eine ganz dumme Frage an <a href="/users/6887" class="mention registered-user" rel="noopener noreferrer">@Henry</a> : warum glaubst du, wird so etwas wie Grid eingeführt und wieso implementieren das <strong>alle</strong> Browser-Hersteller in Windeseile, wenn es eine Technik voller Nachteile im Vergleich zum status quo ist? − Glaubst du, alle außer Dir sind verblendet?</p> <p>Ich habe ja auch in früheren Diskussionen mit <a href="/users/20" class="mention registered-user" rel="noopener noreferrer">@Gunnar Bittersmann</a> gesagt, dass ich grid nicht überall verwenden kann, weil ich Layouts vorgegeben bekomme, die genauso wie in der PSD in alten Browsern laufen müssen.</p> <p>Bei konkreten Beispielen war oft (aber nicht immer!) der Aufwand für eine zusätzliche Verwendung einer alten Technik gering.</p> <p>Aber niemals habe ich bezweifelt, dass Grid besser ist. Immer habe ich mich gefreut auf den Tag, wo ich es verwenden kann. Und in meinem Arbeitsumfeld habe ich dauernd dafür geworben und endlich (!!!) kann ich es jetzt auch produktiv einsetzen!</p> <p>Grid macht alles einfacher und vieles überhaupt erst möglich!</p> <p>HTML <strong>und</strong> CSS werden schlanker, besser lesbar und besser wartbar.</p> <p>Marc</p> Gestaltung mit Flexbox Fri, 23 Feb 18 15:54:01 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714415?srt=yes#m1714415 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714415?srt=yes#m1714415 <p>Hallo marctrix,</p> <blockquote> <p>Er war ja auch zwischendurch am Quellcode — das Problem, das beim Einfügen der Texte auftrat, kann ich jetzt so nicht mehr nachvollziehen.</p> </blockquote> <p>Wie soll ich das denn verstehen? Willst du hier etwa behaupten, nach einer Kritik hätte ich den Quellcode verändert um die Kritik zu widerlegen? Falls ja, dann muss ich dir sagen, dass eine nachträgliche Änderung mit dem bereits vorhandenen Zielverweis bei meinem bevorzugten Anbieter gar nicht möglich ist.</p> <p>Gruss<br> Henry</p> Gestaltung mit Flexbox Fri, 23 Feb 18 14:37:05 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714399?srt=yes#m1714399 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714399?srt=yes#m1714399 <p>Hallo marctrix,</p> <blockquote> <blockquote> <p>Ich habe eine Auflösung von 3840x2160 Pixeln,</p> </blockquote> <p>Schöner Monitor!</p> </blockquote> <p>Ja, <a href="https://wwwtech.de/pictures/222" rel="noopener noreferrer">ich bin extrem happy damit</a> </p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> Gestaltung mit Flexbox Fri, 23 Feb 18 15:12:28 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714404?srt=yes#m1714404 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714404?srt=yes#m1714404 <p>Hej Christian,</p> <blockquote> <blockquote> <blockquote> <p>Ich habe eine Auflösung von 3840x2160 Pixeln,</p> </blockquote> <p>Schöner Monitor!</p> </blockquote> <p>Ja, <a href="https://wwwtech.de/pictures/222" rel="noopener noreferrer">ich bin extrem happy damit</a> </p> </blockquote> <p>Glaube ich - ich habe mir vor längerer Zeit einen 21:9 mit 3440x1700 oder so gekauft - da passen Editor, Entwicklerwerkzeuge und Browser so schön nebeneinander </p> <p>Dauert sicher noch eine Weile, bis ich den mal ablöse!</p> <p>Marc</p> Hardware ... Sat, 24 Feb 18 12:43:13 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714450?srt=yes#m1714450 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714450?srt=yes#m1714450 <p>Hi,</p> <blockquote> <p>Ja, <a href="https://wwwtech.de/pictures/222" rel="noopener noreferrer">ich bin extrem happy damit</a> </p> </blockquote> <p>was ist das denn für eine Tastatur?</p> <p>cu,<br> Andreas a/k/a MudGuard</p> Gestaltung mit Flexbox Sat, 24 Feb 18 12:45:46 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714451?srt=yes#m1714451 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714451?srt=yes#m1714451 <p>Hallo Christian Kruse,</p> <blockquote> <blockquote> <p>Schöner Monitor!</p> </blockquote> <p>Ja, <a href="https://wwwtech.de/pictures/222" rel="noopener noreferrer">ich bin extrem happy damit</a> </p> </blockquote> <p>Mich würde ja stören, dass es zwei verschiedene Monitore sind. </p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> Gestaltung mit Flexbox Fri, 23 Feb 18 19:33:07 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714428?srt=yes#m1714428 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714428?srt=yes#m1714428 <p>Hallo marctrix,</p> <blockquote> <p>Glaube ich - ich habe mir vor längerer Zeit einen 21:9 mit 3440x1700 oder so gekauft - da passen Editor, Entwicklerwerkzeuge und Browser so schön nebeneinander </p> </blockquote> <p>Ja, so arbeite ich da auch (fast): linke Seite Browser mit Dev-Tools, je nach Betriebssystem rechte Seite oben <a href="https://kapeli.com/dash" rel="nofollow noopener noreferrer">Dash</a> oder <a href="https://zealdocs.org/" rel="nofollow noopener noreferrer">Zeal</a> (eine absolute Empfehlung), rechte Seite unten Terminal mit einer Tmux-Session.</p> <blockquote> <p>Dauert sicher noch eine Weile, bis ich den mal ablöse!</p> </blockquote> <p>Ablösen? Der Trend geht zum Zweit- und Drittmonitor! </p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> Gestaltung mit Flexbox Fri, 23 Feb 18 16:22:50 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714418?srt=yes#m1714418 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714418?srt=yes#m1714418 <p>Hej Henry,</p> <blockquote> <blockquote> <p>Ab da haben wir wohl aneinander vorbei geredet. Wie auch immer. Deine Behauptung, man kann ohne Grid <strong>alles</strong> machen, was mit Grid geht, stimmt so nicht.</p> </blockquote> <p>Habe ich so nicht gesagt, sondern</p> <blockquote> <p>...<strong>mir</strong> fällt kein Szenario ein, bei dem ich <strong>standard</strong>-gridlayout nicht klassisch hinbekomme…</p> </blockquote> </blockquote> <blockquote> <p><em><strong>Betonung auf Mir und Standard</strong></em></p> </blockquote> <p>Ich bezog mich auf diese Aussage:</p> <blockquote> <p>Dass etwas ohne Grid nicht gehen soll, glaube ich niemals, […]</p> </blockquote> <p>Aber zurück zum Thema:</p> <blockquote> <p>Umso mehr interessiert mich ja ein Vergleich.</p> </blockquote> <p>Dann schlag ein konkretes Szenario vor (eines haben wir ja nun hinreichend durchexerziert).</p> <blockquote> <blockquote> <p>Auch wenn man dieselbe Optik mit Klimmzügen hinbekommen mag, sind dann doch mehr oder weniger viele und umfangreiche Hacks und überflüssige Elemente im HTML nötig.</p> </blockquote> <p>Bei mir weder Hacks, noch überflüssige Elemente aber dafür robust und global einsetzbar.</p> </blockquote> <p><code>float</code> beispielsweise dient dazu, den Inhalt eines Elementes um ein anderes fließen zu lassen. Wenn man es benutzt, um Spalten zu erzeugen, ist das ein Hack.</p> <blockquote> <blockquote> <p>Mit nur zwei Zeilen CSS erzeugt man ein zweispaltiges Layout:</p> <pre><code class="block language-css"><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> 1fr 1fr<span class="token punctuation">;</span> </code></pre> <p>Lassen wir mal außen vor, dass du meinst, grid sei überflüssig, weil man mit den veralteten umständlichen Hacks alles machen kann, was mit Grid geht. Mit welcher Technik außer Grid sind zwei Spalten leichter zu erzeugen?</p> </blockquote> <p>Kommt ja auf den Rest an, aber je nach Zweck und Elementenzuordnung würde ich zunächst mal entweder:</p> <pre><code class="block language-css"><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>50%<span class="token punctuation">;</span> </code></pre> <p>oder</p> <pre><code class="block language-css"><span class="token property">display</span><span class="token punctuation">:</span>table-cell<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>50%<span class="token punctuation">;</span> </code></pre> <p>oder so ähnlich versuchen.</p> </blockquote> <p>Das sollte beides gehen. In der Realität kommen dann aber noch ein paar Anforderungen hinzu: z.B. Abstände zwischen den Elementen (<code>grid-gap</code>) und die Forderung dass das bündig sein soll mit Elementen in einem vierspaltigen Fußbereich.</p> <p>Außerdem brauchst du Innenabstände. Dann kommst du mit 50% schon nicht hin. Oder du brauchst <code>box-sizing: border-box</code> und zack: schon hast du ein mehrfaches von dem Code, den du gezeigt hast.</p> <p>Jetzt muss man schon ziemlich viel testen, messen usw, bis das passt.</p> <p>Ich habe so was lange genug machen müssen. </p> <p>Und selbst das ist ja nur ein Bruchteil der Anforderungen.</p> <p>Schau dir doch mal an, wie viel Code Frameworks wie Bootstrap für ein zwölfspaltiges Grid-System benötigen!</p> <p>Mit css Grid definiert man 12 Spalten so:</p> <pre><code class="block language-css"><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>12<span class="token punctuation">,</span> 1fr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">grid-gap</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> </code></pre> <p>Und schon kannst du loslegen, Elemente über mehrere Zeilen und Spalten auf diesem Grid zu platzieren.</p> <blockquote> <blockquote> <p>Grid ist einfach. Nicht nur für mich als Entwickler.</p> </blockquote> </blockquote> <blockquote> <p>Bestreitet ja keiner, aber meine Vorgehensweise auch und dazu noch Browserkompatibel(die angeblichen ca. 3% vom IE11 dürften eher ca. 6% betragen, und das ist dann doch nicht so wenig)</p> </blockquote> <blockquote> <p>Aber nochmal, ich will hier bestimmt nicht Grid schlecht reden, denn ich war schon immer ein Fan vom allseits gehassten Tabellenlayout und im Grunde ist Grid ja nichts anderes, wenn auch in einer von Html getrennten und moderneren Form.</p> </blockquote> <p>Jein, wenn du in Tabellen noch <code>colspan</code> und <code>rowspan</code> verwendest. Es ist aber deutlich komplizierter und automatisches auffüllen von Lücken (<code>dense</code>), beliebiges anordnen (<code>order</code>) mehrere Elemente auf einem Raster-Feld stapeln sind nur drei von ganz, ganz vielen Dingen, die mit den von dir genanten Vorschlägen nicht umsetzbar sind.</p> <p>Im HTML benötigst du noch ansonsten überflüssige Elemente für die Zeilen. Mit CSS grid nicht. Und mach mal ein Tabellen-Layout responsiv. Alles machbar (mit nem halben Dutzend media queries) — aber der Aufwand! Und nicht nur für die Umsetzung, auch für Tests!</p> <p>Dazu kommt, dass Änderungen am Layout im Projektverlauf in meinem Arbeitsalltag mitunter dazu geführt haben, dass es mit <code>float</code> oder <code>display: block</code> nicht mehr ging und ich das Layout damit begonnen hatte. Dann musste ich praktisch von vorn anfangen z.B. mit <code>display: table</code> um nun <code>rowspan</code> verwenden können. Das heißt: selbst wenn das Ergebnis im Endeffekt mal ähnlich schnell umsetzbar ist, wie mit Grid: der Weg dahin kann deutlich länger gewesen sein. Das sieht man dem fertigen Produkt freilich nicht an. Egal welche Änderungswünsche an einem Grid-Layout im Nachhinein oder während der Entwicklungsphase vorgenommen werden sollen: das kann man mit überschaubaren Aufwand machen. Sogar wenn sich so grundlegende Dinge ändern wie die Idee nun plötzlich 13 statt 12 Rasterspalten zu verwenden. Mach <strong>das</strong> mal mit Bootstrap! </p> <p>Und woher weißt du, dass der IE 11 nicht 3% Marktanteil hat, sondern 6%? Warum nicht 1,5% Wo machst du das dran fest?</p> <p>Aber egal wo der im Moment steht. Die Tendenz ist ganz eindeutig fallend!</p> <p>Ein Argument, was ich oft höre als jemand der barrierefrei arbeiten muss: ein Blindenarbeitsplatz ist so teuer, dass der viele Jahre halten muss. Daher setezn Blinde oft alte Browser ein. Nicht weil sie wollen, sondern weil sie keine Wahl haben.</p> <p>Aber Blinden ist die optische Anordnung auf einem Bildschirm nun mal gerade so was von piepe </p> <p>Marc</p> Gestaltung mit Flexbox Fri, 23 Feb 18 16:32:01 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714420?srt=yes#m1714420 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714420?srt=yes#m1714420 <p>Hej Henry,</p> <blockquote> <blockquote> <p>Er war ja auch zwischendurch am Quellcode — das Problem, das beim Einfügen der Texte auftrat, kann ich jetzt so nicht mehr nachvollziehen.</p> </blockquote> </blockquote> <blockquote> <p>Wie soll ich das denn verstehen? Willst du hier etwa behaupten, nach einer Kritik hätte ich den Quellcode verändert</p> </blockquote> <p>Nicht behaupten, aber vermuten.</p> <blockquote> <p>um die Kritik zu widerlegen?</p> </blockquote> <p>Absichten habe ich keine unterstellt.</p> <p>Beruhige dich bitte und lass uns sachlich bleiben!</p> <p>Marc</p> "klassisches Tabellenlayout" Fri, 23 Feb 18 17:23:28 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714423?srt=yes#m1714423 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714423?srt=yes#m1714423 <p>Hallo Regina,</p> <blockquote> <blockquote> <p>bietet sich hier ja ein klassisches Tabellenlayout als Grundlage an.</p> </blockquote> <p><strong>Tolle Satire! Ich hätte es fast für „ernst gemeint“ genommen!</strong></p> </blockquote> <p>Na wenigstens einer versteht mich </p> <p>Gruss<br> Henry</p> Gestaltung mit Flexbox Fri, 23 Feb 18 16:55:45 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714421?srt=yes#m1714421 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714421?srt=yes#m1714421 <p>Hallo marctrix,</p> <blockquote> <p>Ich bezog mich auf diese Aussage:</p> <blockquote> <p>Dass etwas ohne Grid nicht gehen soll, glaube ich niemals, […]</p> </blockquote> </blockquote> <p>ahh ok Damit meinte ich natürlich grundsätzlich, ohne den Aspekt, ob man das dann auch wirklich so umsetzen sollte.</p> <p>Den Rest zitiere ich jetzt nicht, weil ich das, auch wenn es anscheinend manchmal anders rüberkommt, ähnlich sehe.</p> <blockquote> <p>Und woher weißt du, dass der IE 11 nicht 3% Marktanteil hat, sondern 6%? Warum nicht 1,5% Wo machst du das dran fest?</p> </blockquote> <p>Am Durchschnitt vieler Statistiken, nicht nur caniuse.</p> <ul> <li> <p><a href="https://www.browser-statistik.de/" rel="nofollow noopener noreferrer">stat1</a></p> </li> <li> <p><a href="https://www.stetic.com/de/market-share/browser/" rel="nofollow noopener noreferrer">stat2</a></p> </li> <li> <p><a href="https://de.statista.com/statistik/daten/studie/13007/umfrage/marktanteile-der-browser-bei-der-internetnutzung-in-deutschland-seit-2009/" rel="nofollow noopener noreferrer">stat3</a></p> </li> <li> <p><a href="https://www.bing.com/search?q=browser+statistik&go=Anfrage+senden&qs=ds&form=QBLH&pc=EUPP_" rel="nofollow noopener noreferrer">usw...</a></p> </li> </ul> <blockquote> <p>Aber egal wo der im Moment steht. Die Tendenz ist ganz eindeutig fallend!</p> </blockquote> <p>Das stimmt. Wenn auch laaangsaaaam.</p> <p>Gruss<br> Henry</p> Gestaltung mit Flexbox Fri, 23 Feb 18 17:08:12 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714422?srt=yes#m1714422 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714422?srt=yes#m1714422 <p>Hallo marctrix,</p> <blockquote> <blockquote> <p>Wie soll ich das denn verstehen? Willst du hier etwa behaupten, nach einer Kritik hätte ich den Quellcode verändert</p> </blockquote> <p>Nicht behaupten, aber vermuten.</p> </blockquote> <p>Vermutung war falsch.</p> <blockquote> <blockquote> <p>um die Kritik zu widerlegen?</p> </blockquote> <p>Absichten habe ich keine unterstellt.</p> </blockquote> <p>Könnte man aber denken</p> <blockquote> <p>Beruhige dich bitte und lass uns sachlich bleiben!</p> </blockquote> <p>Bleib ich doch. <sachlich>Du hast dich geirrt</sachlich> </p> <p>Gruss<br> Henry</p> Gestaltung mit Flexbox Fri, 23 Feb 18 17:49:34 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714425?srt=yes#m1714425 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714425?srt=yes#m1714425 <p>Hej Henry,</p> <blockquote> <blockquote> <blockquote> <p>Dass etwas ohne Grid nicht gehen soll, glaube ich niemals, […]</p> </blockquote> </blockquote> <p>ahh ok Damit meinte ich natürlich grundsätzlich, ohne den Aspekt, ob man das dann auch wirklich so umsetzen sollte.</p> </blockquote> <p>Warum ich widersprochen habe: „es geht“ bedeutet nicht nur etwas optisch umzusetzen.</p> <p>Wenn ich meine, etwas geht nicht, dann meine ich alle Anforderungen umsetzen wie: ein Layout ohne presentational markup umsetzen. Und ein <code>div</code> das ausschließlich zur Formatierung benötigt wird, ist nun mal preesentational markup.</p> <p>Nicht dass ich das in der täglichen Arbeit immer hinbekomme.</p> <p>Aber hier im Forum suche ich nach der bestmöglichen Umsetzung, nicht nach geht auch ohne xyz, auch wenn man das eigentlich nicht machen sollte. Sorry wenn das ein wenig streng rüberkommt.</p> <blockquote> <p>Den Rest zitiere ich jetzt nicht, weil ich das, auch wenn es anscheinend manchmal anders rüberkommt, ähnlich sehe.</p> </blockquote> <p>Habe ich hier und da schon manchmal vermutet. Aber die Vehemenz und Beharrlichkeit verstehe ich dann noch weniger, mit der du alte Techniken verteidigt hast.</p> <p>Wie gesagt: wenn alte Browser unterstützt werden müssen, kann man grid nicht verwenden.</p> <p>Isso.</p> <p>Für alle anderen Fälle ist grid das Werkzeug zum erzeugen von Layouts, die auf einem Raster basieren. Und welche Layouts tun das heute nicht?</p> <blockquote> <p>Am Durchschnitt vieler Statistiken, nicht nur caniuse.</p> </blockquote> <p>Danke für die Links. Ich bin übrigens der Meinung, dass man als Entwickler auch Verpflichtungen hat. Dazu gehört auch, dafür zu sorgen, dass veraltete Software nicht mehr unterstützt wird, damit die verschwindet.</p> <p>Nicht Browser von einem bestimmten Hersteller sind schlecht. Alte Browser sind schlecht!</p> <blockquote> <blockquote> <p>Aber egal wo der im Moment steht. Die Tendenz ist ganz eindeutig fallend!</p> </blockquote> <p>Das stimmt. Wenn auch laaangsaaaam.</p> </blockquote> <p>Ja, wie beim guten alten IE6, Friede seiner Asche! </p> <p>Tragen wir dazu bei, dass diese halbverdauten Zombies endlich in einer virtuellen Gruft begraben werden!</p> <p>Marc</p> Gestaltung mit Flexbox Sun, 25 Feb 18 08:01:02 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714479?srt=yes#m1714479 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714479?srt=yes#m1714479 <p>Hej Henry,</p> <blockquote> <p>Könnte man aber denken</p> </blockquote> <p>Das war wohl nur eine Vermutung </p> <blockquote> <p>Bleib ich doch. <sachlich>Du hast dich geirrt</sachlich> </p> </blockquote> <p>Das kann nicht sein. Aus dem Lex Marctrices (bildet man das so? - Wer kann noch Latein?): „Ich irre mich nie“</p> <p>Marc</p> Gestaltung mit Flexbox Fri, 23 Feb 18 21:41:15 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714433?srt=yes#m1714433 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714433?srt=yes#m1714433 <p>Hej Christian,</p> <blockquote> <blockquote> <p>Glaube ich - ich habe mir vor längerer Zeit einen 21:9 mit 3440x1700 oder so gekauft - da passen Editor, Entwicklerwerkzeuge und Browser so schön nebeneinander </p> </blockquote> <p>Ja, so arbeite ich da auch (fast): linke Seite Browser mit Dev-Tools, je nach Betriebssystem rechte Seite oben <a href="https://kapeli.com/dash" rel="nofollow noopener noreferrer">Dash</a> oder <a href="https://zealdocs.org/" rel="nofollow noopener noreferrer">Zeal</a> (eine absolute Empfehlung), rechte Seite unten Terminal mit einer Tmux-Session.</p> <blockquote> <p>Dauert sicher noch eine Weile, bis ich den mal ablöse!</p> </blockquote> <p>Ablösen? Der Trend geht zum Zweit- und Drittmonitor! </p> </blockquote> <p>Wenn es eng werden sollte, kann ich den Laptop, der am Monitor hängt ja auch mal aufklappen. </p> <p>Und: Es gibt ja noch <a href="https://www.duetdisplay.com" rel="nofollow noopener noreferrer">duet</a> — weil ich das große iPad habe, kommen dann noch mal angenehme 12,9 Zoll dazu. Das dann sogar mit Touch und Stifteingabe und Touchbar. Das nutze ich sogar eher, als dass ich den Laptop öffne. Auch unterwegs toll als Erweiterung für den Laptop-Bildschirm oder im kundengespräch, wenn man sich gegenübersi7und alle sehen dasselbe. Duet ist meine Empfehlung.</p> <p>Danke für deine, aber ich mache ja keine Software. Sieht aber toll aus. Würde ich programmieren, hätte ich es gleich geladen.</p> <p>Marc</p> Hardware ... Sat, 24 Feb 18 12:51:33 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714452?srt=yes#m1714452 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714452?srt=yes#m1714452 <p>Hallo MudGuard,</p> <blockquote> <blockquote> <p>Ja, <a href="https://wwwtech.de/pictures/222" rel="noopener noreferrer">ich bin extrem happy damit</a> </p> </blockquote> <p>was ist das denn für eine Tastatur?</p> </blockquote> <p><a href="https://wwwtech.de/articles/2014/apr/ergodox" rel="noopener noreferrer">Eine ErgoDox</a> </p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> Gestaltung mit Flexbox Sat, 24 Feb 18 12:52:26 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714453?srt=yes#m1714453 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714453?srt=yes#m1714453 <p>Hallo Matthias,</p> <blockquote> <blockquote> <blockquote> <p>Schöner Monitor!</p> </blockquote> <p>Ja, <a href="https://wwwtech.de/pictures/222" rel="noopener noreferrer">ich bin extrem happy damit</a> </p> </blockquote> <p>Mich würde ja stören, dass es zwei verschiedene Monitore sind. </p> </blockquote> <p>Nein, das finde ich sogar ganz angenehm. Auf dem linken Monitor ist der Editor im Vollbild, das passt gut.</p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> Hardware ... Sat, 24 Feb 18 13:00:27 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714456?srt=yes#m1714456 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714456?srt=yes#m1714456 <p>Hi,</p> <blockquote> <blockquote> <blockquote> <p>Ja, <a href="https://wwwtech.de/pictures/222" rel="noopener noreferrer">ich bin extrem happy damit</a> </p> </blockquote> <p>was ist das denn für eine Tastatur?</p> </blockquote> <p><a href="https://wwwtech.de/articles/2014/apr/ergodox" rel="noopener noreferrer">Eine ErgoDox</a> </p> </blockquote> <p>gibt's das nur für Bastler oder auch fertig?</p> <p>Bei Massdrop müßte ich mich erst anmelden, um überhaupt was darüber rauszufinden. Und bei Ergodox find ich auch nichts zu der Tastatur.</p> <p>cu,<br> Andreas a/k/a MudGuard</p> Gestaltung mit Flexbox Sat, 24 Feb 18 12:54:06 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714454?srt=yes#m1714454 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714454?srt=yes#m1714454 <p>Hallo Christian Kruse,</p> <blockquote> <p>Nein, das finde ich sogar ganz angenehm. Auf dem linken Monitor ist der Editor im Vollbild, das passt gut.</p> </blockquote> <p>Wenn der auch so hoch wäre, wie der rechte, wäre der Editor immern noch im Vollbild. </p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> Gestaltung mit Flexbox Sat, 24 Feb 18 12:55:30 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714455?srt=yes#m1714455 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714455?srt=yes#m1714455 <p>Hallo Matthias,</p> <blockquote> <blockquote> <p>Nein, das finde ich sogar ganz angenehm. Auf dem linken Monitor ist der Editor im Vollbild, das passt gut.</p> </blockquote> <p>Wenn der auch so hoch wäre, wie der rechte, wäre der Editor immern noch im Vollbild. </p> </blockquote> <p>Ja, aber dafür ist mein Schreibtisch zu klein </p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> Gestaltung mit Flexbox Sat, 24 Feb 18 13:13:59 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714457?srt=yes#m1714457 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714457?srt=yes#m1714457 <p>Hallo Christian Kruse,</p> <blockquote> <p>Ja, aber dafür ist mein Schreibtisch zu klein </p> </blockquote> <p>Verstellst du den regelmäßig in der Höhe? Ich möchte meinen höhenverstellbaren Schreibtisch nicht mehr missen.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> Hardware ... Sat, 24 Feb 18 13:15:00 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714458?srt=yes#m1714458 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714458?srt=yes#m1714458 <p>Hallo MudGuard,</p> <blockquote> <p>gibt's das nur für Bastler oder auch fertig?</p> </blockquote> <p>Das gibts inzwischen auch in fertig: <a href="https://ergodox-ez.com/" rel="nofollow noopener noreferrer">ErgoDox EZ</a>.</p> <p>Ich hab mir davon eine fürs Büro in Ettlingen gekauft bzw kaufen lassen, damit ich die hier nicht immer hin- und herschleppen muss.</p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> Gestaltung mit Flexbox Sat, 24 Feb 18 13:15:43 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714459?srt=yes#m1714459 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714459?srt=yes#m1714459 <p>Hallo Matthias,</p> <blockquote> <blockquote> <p>Ja, aber dafür ist mein Schreibtisch zu klein </p> </blockquote> <p>Verstellst du den regelmäßig in der Höhe? Ich möchte meinen höhenverstellbaren Schreibtisch nicht mehr missen.</p> </blockquote> <p>Ja. Ich stehe etwa die Hälfte des Tages. Tut meinem Rücken gut.</p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> Hardware ... Sat, 24 Feb 18 21:49:07 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714473?srt=yes#m1714473 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714473?srt=yes#m1714473 <p>Hi,</p> <blockquote> <p>Das gibts inzwischen auch in fertig: <a href="https://ergodox-ez.com/" rel="nofollow noopener noreferrer">ErgoDox EZ</a>.</p> </blockquote> <p>naja, auch nicht so richtig.</p> <p>Beschriftete Tasten gibt's wohl nur für US-Layout (QWERTY). Die Tasten sind zwar austauschbar, so daß Y vs. Z kein Problem sind, aber die ganzen Satzzeichen usw. sind ja bei deutschem Layout anders kombiniert als bei US-Layout.</p> <p>Alternativ gibt's noch komplett unbeschriftet - das erfordert dann doch wieder Bastelei.</p> <p>Und der Preis ist ja auch nicht ganz ohne …</p> <p>cu,<br> Andreas a/k/a MudGuard</p> Gestaltung mit Flexbox Sat, 24 Feb 18 13:18:14 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714460?srt=yes#m1714460 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714460?srt=yes#m1714460 <p>Hallo Christian Kruse,</p> <blockquote> <p>Ja. Ich stehe etwa die Hälfte des Tages. Tut meinem Rücken gut.</p> </blockquote> <p>Genau, ich auch.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> Hardware ... Sun, 25 Feb 18 08:08:38 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714481?srt=yes#m1714481 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714481?srt=yes#m1714481 <p>Hallo MudGuard,</p> <blockquote> <p>Beschriftete Tasten gibt's wohl nur für US-Layout (QWERTY). Die Tasten sind zwar austauschbar, so daß Y vs. Z kein Problem sind, aber die ganzen Satzzeichen usw. sind ja bei deutschem Layout anders kombiniert als bei US-Layout.</p> <p>Alternativ gibt's noch komplett unbeschriftet - das erfordert dann doch wieder Bastelei.</p> </blockquote> <p>Ich brauche keine Beschriftung, von daher war mir das egal…</p> <blockquote> <p>Und der Preis ist ja auch nicht ganz ohne …</p> </blockquote> <p>Das ist schon richtig, aber ich habe, nachdem Microsoft die Natural Ergonomic kaputt geändert hat, keine sinnvolle Tastatur mehr in einem vernünftigen Preisrahmen gefunden. Meine erste MS Ergo hat deutlich über 10 Jahre gehalten (ich erinnere mich nicht mehr genau, es könnten auch 12 oder 13 gewesen sein). Alle danach (immerhin 4 Stück) haben nur noch ein halbes Jahr gehalten… außerdem haben sie auch die Switches ausgewechselt und die Winkel verändert, so dass das Tippgefühl ein ganz anderes war und ich wieder Probleme mit Schmerzen in den Fingern bekommen hab. Ich habe hier noch zwei von den Dingern rumliegen, eine mit zwei kaputten Tasten und eine mit einer kaputten Taste.</p> <p>Da musste dann eine haltbare Lösung her. Die ErgoDox kann ich selber reparieren (hab sie ja auch selber zusammen gelötet), hab ich auch schon getan. Notfalls kann ich einzelne Switches selber auswechseln. Ich bin also für die nächsten Jahre bedient </p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> Hardware ... Sun, 25 Feb 18 10:11:27 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714487?srt=yes#m1714487 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714487?srt=yes#m1714487 <p>@@MudGuard</p> <blockquote> <p>Beschriftete Tasten gibt's wohl nur für US-Layout (QWERTY). Die Tasten sind zwar austauschbar, so daß Y vs. Z kein Problem sind, aber die ganzen Satzzeichen usw. sind ja bei deutschem Layout anders kombiniert als bei US-Layout.</p> </blockquote> <p>Benutzt man™ denn als Entwickler deutsches Tastatur-Layout, um sich bei jeder eckigen oder geschweiften Klammer die Finger zu brechen?</p> <p>Ich bin von Anfang an an QWERTY gewöhnt (als ich mit der Programmiererei angefangen habe, gab’s an der Uni nichts anderes) und verwende das grundsätzlich – egal wie die Tastatur beschriftet ist.</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> Gestaltung mit Flexbox Sun, 25 Feb 18 13:11:57 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714499?srt=yes#m1714499 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714499?srt=yes#m1714499 <p>Hi,</p> <blockquote> <p>Das kann nicht sein. Aus dem Lex Marctrices (bildet man das so? - Wer kann noch Latein?): „Ich irre mich nie“</p> </blockquote> <p>Du irrst Dich.</p> <p>Es wäre Lex Marctricis gewesen (Genitiv, nicht Nominativ oder Akkusativ Plural) Wenn Ihr mehrere wärt, wäre es Lex Marctricium gewesen.</p> <p>Aber da das Gesetz offensichtlich nicht gilt …</p> <p>cu,<br> Andreas a/k/a MudGuard</p> Hardware ... Sun, 25 Feb 18 13:14:15 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714500?srt=yes#m1714500 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714500?srt=yes#m1714500 <p>Hi,</p> <blockquote> <p>Benutzt man™ denn als Entwickler deutsches Tastatur-Layout,</p> </blockquote> <p>Da wir hier ja alle keine echten Entwickler sind (mit Ausnahme eines gewissen heißen Rosts), ist das für uns doch unwichtig, was Entwickler machen.</p> <p>cu,<br> Andreas a/k/a MudGuard</p> Gestaltung mit Flexbox Mon, 26 Feb 18 14:40:52 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714574?srt=yes#m1714574 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714574?srt=yes#m1714574 <p>Hej MudGuard,</p> <blockquote> <blockquote> <p>Das kann nicht sein. Aus dem Lex Marctrices (bildet man das so? - Wer kann noch Latein?): „Ich irre mich nie“</p> </blockquote> <p>Du irrst Dich.</p> </blockquote> <blockquote> <p>Aber da das Gesetz offensichtlich nicht gilt …</p> </blockquote> <p>Doch das gilt. Das Latein ist ganz offensichtlich während der letzten 2000 Jahre kaputt gegangen — ich bin nur der einzige, dem es aufgefallen ist. </p> <p>(Das hätte ich mal unter meine "korrigierten" Klausuren schrieben sollen…)</p> <p>Marc</p> <p>PS: Im Ernst: Vielen Dank für die Korrektur!</p> Hardware ... Mon, 26 Feb 18 14:53:51 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714577?srt=yes#m1714577 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714577?srt=yes#m1714577 <p>@@MudGuard</p> <blockquote> <p>mit Ausnahme eines gewissen heißen Rosts</p> </blockquote> <p> </p> <p>Welchen man nur mit <s>Samt</s>handschuhen anfassen sollte.</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> Gestaltung mit Flexbox Mon, 26 Feb 18 20:18:10 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714627?srt=yes#m1714627 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714627?srt=yes#m1714627 <p>Hi,</p> <blockquote> <p>Marc</p> </blockquote> <p>Ach ja, victor -> der Sieger, victrix -> die Siegerin, -trix ist die weibliche Form zu -tor (weitere Beispiele: acceptor vs. acceptrix, organisator vs. organisatrix …).</p> <p>Bist Du ein weiblicher marctor?<br> Was auch immer das sein mag - könnte von marcere (schlaff sein) kommen, also sozusagen ein Schlaffi. Bzw. als marctrix eine Schlaffine </p> <blockquote> <p>PS: Im Ernst: Vielen Dank für die Korrektur!</p> </blockquote> <p>Das mußte nach Deinem "ich irre mich nie" + Deinem Irrtum einfach sein </p> <p>cu,<br> Andreas a/k/a MudGuard</p> Gestaltung mit Flexbox Mon, 26 Feb 18 20:33:50 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714633?srt=yes#m1714633 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714633?srt=yes#m1714633 <p>@@MudGuard</p> <blockquote> <p>-trix ist die weibliche Form zu -tor</p> </blockquote> <p>Majestrix ist ’ne Transe?</p> <p>Ihr immer mit eurem großen Latrinum!</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> Gestaltung mit Flexbox Tue, 27 Feb 18 05:47:39 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714659?srt=yes#m1714659 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714659?srt=yes#m1714659 <p>Hej MudGuard,</p> <blockquote> <p>Ach ja, victor -> der Sieger, victrix -> die Siegerin, -trix ist die weibliche Form zu -tor (weitere Beispiele: acceptor vs. acceptrix, organisator vs. organisatrix …).</p> <p>Bist Du ein weiblicher marctor?</p> </blockquote> <p>Einige von mir mit Sicherheit!</p> <blockquote> <p>Was auch immer das sein mag - könnte von marcere (schlaff sein) kommen, also sozusagen ein Schlaffi. Bzw. als marctrix eine Schlaffine </p> </blockquote> <p>Tja, mit dem Alter kommt die Schwerkraft zu ihrem Recht.</p> <blockquote> <blockquote> <p>PS: Im Ernst: Vielen Dank für die Korrektur!</p> </blockquote> <p>Das mußte nach Deinem "ich irre mich nie" + Deinem Irrtum einfach sein </p> </blockquote> <p>Gut so! Lachen ist gesund!</p> <p>Marc</p> Gestaltung mit Flexbox Mon, 26 Feb 18 20:43:40 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714635?srt=yes#m1714635 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714635?srt=yes#m1714635 <p>Hi,</p> <blockquote> <blockquote> <p>-trix ist die weibliche Form zu -tor</p> </blockquote> <p>Majestrix ist ’ne Transe?</p> </blockquote> <p>meinst Du den Chef von Asterix und Obelix? Der hat aber kein r im Namen.</p> <p>Oder wen meinst Du?</p> <p>cu,<br> Andreas a/k/a MudGuard</p> Gestaltung mit Flexbox Mon, 26 Feb 18 20:49:11 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714637?srt=yes#m1714637 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714637?srt=yes#m1714637 <p>@@MudGuard</p> <blockquote> <blockquote> <blockquote> <p>-trix ist die weibliche Form zu -tor</p> </blockquote> <p>Majestrix ist ’ne Transe?</p> </blockquote> <p>meinst Du den Chef von Asterix und Obelix? Der hat aber kein r im Namen.</p> </blockquote> <p>Ich hatte gehofft, es merkt keiner … </p> <p>Jetzt erzähl bloß noch, das Latrinum hätte auch kein r im Namen‽</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> Gestaltung mit Flexbox Mon, 26 Feb 18 20:53:29 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714639?srt=yes#m1714639 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714639?srt=yes#m1714639 <p>Hi,</p> <blockquote> <p>Jetzt erzähl bloß noch, das Latrinum hätte auch kein r im Namen‽</p> </blockquote> <p>Wenn mit "r", dann mit "a" statt "um" - latrina = die Kloake</p> <p>cu,<br> Andreas a/k/a MudGuard</p> Gestaltung mit Flexbox Mon, 26 Feb 18 21:02:35 Z https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714640?srt=yes#m1714640 https://forum.selfhtml.org/self/2018/feb/21/gestaltung-mit-flexbox/1714640?srt=yes#m1714640 <p>@@MudGuard</p> <blockquote> <blockquote> <p>Jetzt erzähl bloß noch, das Latrinum hätte auch kein r im Namen‽</p> </blockquote> <p>Wenn mit "r", dann mit "a" statt "um" - latrina = die Kloake</p> </blockquote> <p>Herrentoilette vs. Damentoilette</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>