tag:forum.selfhtml.org,2005:/selfDiv bei einer bestimmten Höhe des Browsers ausblenden – SELFHTML-Forum2022-05-15T04:20:45Zhttps://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1798946?srt=yes#m1798946Apolle2022-05-08T04:33:48Z2022-05-08T04:37:27ZDiv bei einer bestimmten Höhe des Browsers ausblenden<p>Hallo, ich möchte ein div bei einer bestimmten Höhe des Browsers ausblenden.
Wie kann man das machen? Gibt es dafür Tutorials, Vorlagen?
Gruß Apolle</p>
https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1798947?srt=yes#m1798947JürgenBhttps://www.j-berkemeier.de2022-05-08T06:10:01Z2022-05-08T06:10:01ZDiv bei einer bestimmten Höhe des Browsers ausblenden<p>Hallo,</p>
<p>kennst du schon <a href="https://wiki.selfhtml.org/wiki/CSS/Media_Queries" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/CSS/Media_Queries</a>?</p>
<p>Und vielleicht verrätst du uns ja noch, was du mit dem Ausblenden erreichen willst.</p>
<p>Gruß<br>
Jürgen</p>
https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1799057?srt=yes#m1799057Linuchs2022-05-12T13:14:49Z2022-05-12T13:18:55ZDiv bei einer bestimmten Höhe des Browsers ausblenden<blockquote>
<p>div bei einer bestimmten Höhe des Browsers ausblenden</p>
</blockquote>
<p>Das geht mit CSS:</p>
<pre><code class="block language-css"><span class="token atrule"><span class="token rule">@media</span> <span class="token property">height</span><span class="token punctuation">:</span> 800px</span> <span class="token punctuation">{</span>
<span class="token selector">div</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Wenn die Höhe genau 800px ist, werden alle divs ausgeblendet. Wenn du den Viewport in der Höhe veränderst, sind die divs bei 800px kurz weg und dann wieder da.</p>
<p>Den Sinn habe ich nicht verstanden.</p>
https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1799059?srt=yes#m1799059JürgenBhttps://www.j-berkemeier.de2022-05-12T13:25:31Z2022-05-12T13:25:31ZDiv bei einer bestimmten Höhe des Browsers ausblenden<p>Hallo Linuchs,</p>
<blockquote>
<blockquote>
<p>div bei einer bestimmten Höhe des Browsers ausblenden</p>
</blockquote>
<p>Das geht mit CSS:</p>
<pre><code class="block language-css"><span class="token atrule"><span class="token rule">@media</span> <span class="token property">height</span><span class="token punctuation">:</span> 800px</span> <span class="token punctuation">{</span>
<span class="token selector">div</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Wenn die Höhe genau 800px ist, werden alle divs ausgeblendet. Wenn du den Viewport in der Höhe veränderst, sind die divs bei 800px kurz weg und dann wieder da.</p>
<p>Den Sinn habe ich nicht verstanden.</p>
</blockquote>
<p>aber den Unterschied zwischen height, min-height und max-height verstehst du schon?</p>
<p>Gruß<br>
Jürgen</p>
https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1799063?srt=yes#m1799063MudGuardhttp://www.andreas-waechter.de/2022-05-12T13:31:54Z2022-05-12T13:31:54ZDiv bei einer bestimmten Höhe des Browsers ausblenden<p>Hi,</p>
<blockquote>
<blockquote>
<p>Den Sinn habe ich nicht verstanden.</p>
</blockquote>
<p>aber den Unterschied zwischen height, min-height und max-height verstehst du schon?</p>
</blockquote>
<p>Linuchs versteht das schon, die Anforderung von Apolle war "bei einer bestimmten Höhe", nicht "ab einer bestimmten Höhe" oder "bis zu einer bestimmten Höhe".</p>
<p>Und den Sinn dieser Anforderung versteht Linuchs nicht - ich auch nicht wirklich.</p>
<p>cu,<br>
Andreas a/k/a MudGuard</p>
https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1799067?srt=yes#m1799067Linuchs2022-05-12T14:36:20Z2022-05-12T14:36:20ZDiv bei einer bestimmten Höhe des Browsers ausblenden<blockquote>
<p>Und den Sinn dieser Anforderung versteht Linuchs nicht - ich auch nicht wirklich.</p>
</blockquote>
<p>Wir werden dumm sterben, der Fragesteller ist wohl schon tot und kann nicht mehr Auskunft geben.</p>
<p>Aber die Vorlage für Satire musste ich einfach mitnehmen. Ihr habt's gemerkt, Test bestanden.</p>
https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1799068?srt=yes#m1799068JürgenBhttps://www.j-berkemeier.de2022-05-12T14:37:25Z2022-05-12T14:37:25ZDiv bei einer bestimmten Höhe des Browsers ausblenden<p>Hallo Andreas,</p>
<p>„bei“ einer bestimten Höhe war für mich Umganssprache für „ab“ einer bestimten Höhe. So wie das umgangssprachliche „oder“ eigentlich ein Exklusivoder ist.</p>
<p>Gruß<br>
Jürgen</p>
https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1799077?srt=yes#m1799077Rolf B2022-05-12T15:12:01Z2022-05-12T15:12:01ZDiv bei einer bestimmten Höhe des Browsers ausblenden<p>Hallo Linuchs,</p>
<blockquote>
<p>Aber die Vorlage für Satire musste ich einfach mitnehmen.</p>
</blockquote>
<p>Leider sind Dir beim Pudern die für @media nötigen Klammern aus dem Beutel gefallen... </p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - obstruxi
</div>
https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1799141?srt=yes#m1799141Apolle2022-05-15T04:20:45Z2022-05-15T04:20:45ZDiv bei einer bestimmten Höhe des Browsers ausblenden<p>Hallo, der Beitragschreiber ist noch nicht tot - war nur krank.
Danke für den Tipp mit den mediaqueries. Werde es jetzt mal probieren.</p>
https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1799078?srt=yes#m1799078Linuchs2022-05-12T15:29:37Z2022-05-12T15:34:39ZDiv bei einer bestimmten Höhe des Browsers ausblenden<p>Echt? Ich habe das aus meiner eigenen CSS-Datei abgekupfert und dachte, die Klammern sind wegen des AND</p>
<pre><code class="block language-css"><span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 800px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span>
</code></pre>
<p>ja, Klammern auch ohne AND</p>
<pre><code class="block language-css"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 800.1px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token comment">/* breites viewport */</span>
<span class="token punctuation">}</span>
</code></pre>
<p>wobei ich Abmessungen mit @media print noch nicht getestet habe.</p>
https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1799081?srt=yes#m1799081Rolf B2022-05-12T18:21:22Z2022-05-12T18:21:22ZDiv bei einer bestimmten Höhe des Browsers ausblenden<p>Hallo Linuchs,</p>
<p>*mmmph*
*mmuuummmmmm*
*ptuf*</p>
<p>Ah, Knebel wieder weg.</p>
<p>Breiten gehören nicht in Pixel gemessen, sondern in em</p>
<p>Unabdingbarer Vorteil ist: Die Media-Abfrage skaliert mit den Vergrößerungseinstellungen des Users.</p>
<p>Nachteilig ist: Media-Bereiche mit (max-width: 50em) und (min-width: 50.1em) erzeugen einen undefinierten Bereich bei 50.05em</p>
<p>Irgendwann wird es wohl die Range-Syntax für Media-Queries nicht nur im Firefox geben (Chromium arbeitet zumindest dran) - bis dahin ist die sicherste Wahl, Mediabereiche zu stapeln.</p>
<pre><code class="block language-css"><span class="token comment">/* Gemeinsame Styles */</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 40em<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token comment">/* Umbau für mittlere Breite */</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 60em<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token comment">/* Erneuter Umbau für große Breite */</span>
<span class="token punctuation">}</span>
</code></pre>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - obstruxi
</div>