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>