tag:forum.selfhtml.org,2005:/self Div bei einer bestimmten Höhe des Browsers ausblenden – SELFHTML-Forum 2022-05-15T04:20:45Z https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1798946?srt=yes#m1798946 Apolle 2022-05-08T04:33:48Z 2022-05-08T04:37:27Z Div 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#m1798947 JürgenB https://www.j-berkemeier.de 2022-05-08T06:10:01Z 2022-05-08T06:10:01Z Div 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#m1799057 Linuchs 2022-05-12T13:14:49Z 2022-05-12T13:18:55Z Div 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#m1799059 JürgenB https://www.j-berkemeier.de 2022-05-12T13:25:31Z 2022-05-12T13:25:31Z Div 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#m1799063 MudGuard http://www.andreas-waechter.de/ 2022-05-12T13:31:54Z 2022-05-12T13:31:54Z Div 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#m1799067 Linuchs 2022-05-12T14:36:20Z 2022-05-12T14:36:20Z Div 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#m1799068 JürgenB https://www.j-berkemeier.de 2022-05-12T14:37:25Z 2022-05-12T14:37:25Z Div 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#m1799077 Rolf B 2022-05-12T15:12:01Z 2022-05-12T15:12:01Z Div 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#m1799141 Apolle 2022-05-15T04:20:45Z 2022-05-15T04:20:45Z Div 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#m1799078 Linuchs 2022-05-12T15:29:37Z 2022-05-12T15:34:39Z Div 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#m1799081 Rolf B 2022-05-12T18:21:22Z 2022-05-12T18:21:22Z Div 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>