tag:forum.selfhtml.org,2005:/self CSS Boxmodell – SELFHTML-Forum 2018-02-14T09:20:17Z https://forum.selfhtml.org/self/2018/feb/13/css-boxmodell/1713727#m1713727 Linuchs 2018-02-13T16:21:20Z 2018-02-13T16:21:20Z CSS Boxmodell <p>Liebe Self-ler,</p> <p>ich entwerfe ein Formular. Innerhalb der Box <code>Angaben zum Chor</code> mit ihrem <code>padding</code> sollen die input-Felder hineinpassen.</p> <p>Jedoch die Angabe <code>width:100%</code> geht über den Rahmen hinaus.</p> <pre><code class="block language-css"> <span class="token selector"><div id="sender"> <style scoped> #sender</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">width</span><span class="token punctuation">:</span> 48%<span class="token punctuation">;</span> <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#sender p</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #888<span class="token punctuation">;</span> <span class="token punctuation">}</span> </style> </code></pre> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">required</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<span class="token punctuation">"</span></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>chor_name<span class="token punctuation">"</span></span> <span class="token attr-name">maxlength</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span>100%</span><span class="token punctuation">"</span></span></span> <span class="token attr-name">value</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>Shanty-Chor<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> </code></pre> <p>Wo ist der Fehler?</p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2018/feb/13/css-boxmodell/1713728#m1713728 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-02-13T16:28:32Z 2018-02-13T16:28:54Z CSS Boxmodell <p>@@Linuchs</p> <blockquote> <p>Jedoch die Angabe <code>width:100%</code> geht über den Rahmen hinaus.</p> <p>Wo ist der Fehler?</p> </blockquote> <p><code>box-sizing</code> Vererbt: Nein [<a href="https://developer.mozilla.org/de/docs/Web/CSS/box-sizing" rel="nofollow noopener noreferrer">MDN</a>]</p> <p>Für das <code>input</code>-Element gilt also der Defaultwert <code>content-box</code>.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2018/feb/13/css-boxmodell/1713731#m1713731 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2018-02-13T18:42:35Z 2018-02-13T18:42:35Z CSS Boxmodell <p>Hallo Linuchs,</p> <blockquote> <pre><code class="block bad language-css"> <div id=<span class="token string">"sender"</span>> <style scoped> </style> </code></pre> </blockquote> <p>Das <code>scoped</code> kann dir <a href="https://caniuse.com/#feat=style-scoped" rel="noopener noreferrer">böse auf die Füße fallen</a>.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> https://forum.selfhtml.org/self/2018/feb/13/css-boxmodell/1713729#m1713729 Linuchs 2018-02-13T16:45:25Z 2018-02-13T16:45:25Z CSS Boxmodell <blockquote> <p><code>box-sizing</code> Vererbt: Nein [<a href="https://developer.mozilla.org/de/docs/Web/CSS/box-sizing" rel="nofollow noopener noreferrer">MDN</a>]</p> </blockquote> <p>Okay, böser Verständnis-Fehler. Sonst ist eine "Box" doch der Karton und nicht der Inhalt. Siehe die endlosen Videos "unboxing".</p> <p>Aber danke, jetzt funzt es.</p> <p>Linuchs</p> https://forum.selfhtml.org/self/2018/feb/13/css-boxmodell/1713742#m1713742 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-02-14T06:14:19Z 2018-02-14T06:40:14Z CSS Boxmodell <p>@@Linuchs</p> <blockquote> <p>Sonst ist eine "Box" doch der Karton und nicht der Inhalt.</p> </blockquote> <p>Eine Box kann Inhalt einer anderen und Karton für andere sein, z.B. <a href="https://de.wikipedia.org/wiki/Matrjoschka" rel="nofollow noopener noreferrer">Matrjoschka</a>, <a href="https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713702#m1713702" rel="noopener noreferrer">Flexbox</a>.</p> <p>Ein <code>input</code>-Element ist Karton für seine Inhalte im Shodow-DOM.</p> <blockquote> <p>Aber danke, jetzt funzt es.</p> </blockquote> <p>Üblicherweise will man dasselbe Boxmodell für alle Elemente (und Pseudoelemente!) angeben:</p> <pre><code class="block language-css"><span class="token selector">*, ::before, ::after</span> <span class="token punctuation">{</span> <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box <span class="token punctuation">}</span> </code></pre> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2018/feb/13/css-boxmodell/1713735#m1713735 Linuchs 2018-02-13T19:42:27Z 2018-02-13T19:42:27Z CSS Boxmodell <p>Hallo Matthias,</p> <blockquote> <p>Das <code>scoped</code> kann dir <a href="https://caniuse.com/#feat=style-scoped" rel="noopener noreferrer">böse auf die Füße fallen</a>.</p> </blockquote> <p>Deshalb gebe ich dem Container sicherheitshalber eine id und setze #id vor die CSS-Angaben.</p> <pre><code class="block language-css"> <span class="token selector"><div id="sender"> <style scoped> #sender</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">width</span><span class="token punctuation">:</span> 48%<span class="token punctuation">;</span> <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#sender p</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #888<span class="token punctuation">;</span> <span class="token punctuation">}</span> </style> ... </div> </code></pre> <p>Linuchs</p> https://forum.selfhtml.org/self/2018/feb/13/css-boxmodell/1713738#m1713738 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-02-13T22:17:25Z 2018-02-13T22:17:25Z CSS Boxmodell <p>@@Linuchs</p> <blockquote> <blockquote> <p>Das <code>scoped</code> kann dir <a href="https://caniuse.com/#feat=style-scoped" rel="noopener noreferrer">böse auf die Füße fallen</a>.</p> </blockquote> <p>Deshalb gebe ich dem Container sicherheitshalber eine id und setze #id vor die CSS-Angaben.</p> </blockquote> <p>Warum hast du das <code class="bad">scoped</code>-Attribut überhaupt drin, wo es doch aus dem Standard raus ist?</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2018/feb/13/css-boxmodell/1713746#m1713746 JürgenB https://www.j-berkemeier.de 2018-02-14T07:30:12Z 2018-02-14T07:30:12Z CSS Boxmodell <p>Hallo Gunnar,</p> <p>ist denn <style> jetzt im Body erlaubt?</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2018/feb/13/css-boxmodell/1713743#m1713743 Christian Kruse https://wwwtech.de/about 2018-02-14T06:17:12Z 2018-02-14T06:17:12Z CSS Boxmodell <p>Hallo Gunnar,</p> <blockquote> <p>[…] Shodow-DOM.</p> </blockquote> <p> made my day</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> https://forum.selfhtml.org/self/2018/feb/13/css-boxmodell/1713753#m1713753 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-02-14T08:44:39Z 2018-02-14T08:44:39Z CSS Boxmodell <p>@@JürgenB</p> <blockquote> <p>ist denn <style> jetzt im Body erlaubt?</p> </blockquote> <p>Ja.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2018/feb/13/css-boxmodell/1713756#m1713756 JürgenB https://www.j-berkemeier.de 2018-02-14T09:20:17Z 2018-02-14T09:20:17Z CSS Boxmodell <p>Hallo Gunnar,</p> <p>danke.</p> <blockquote> <blockquote> <p>ist denn <style> jetzt im Body erlaubt?</p> </blockquote> <p>Ja.</p> </blockquote> <p>das macht es für die, die meinen GPX-Viewer in CMSen einsetzen, deutlich einfacher.</p> <p>Gruß<br> Jürgen</p>