Div bei einer bestimmten Höhe des Browsers ausblenden – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Div bei einer bestimmten Höhe des Browsers ausblenden Sun, 08 May 22 04:33:48 Z https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1798946#m1798946 https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1798946#m1798946 <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> Div bei einer bestimmten Höhe des Browsers ausblenden Sun, 08 May 22 06:10:01 Z https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1798947#m1798947 https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1798947#m1798947 <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> Div bei einer bestimmten Höhe des Browsers ausblenden Thu, 12 May 22 13:14:49 Z https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1799057#m1799057 https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1799057#m1799057 <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> Div bei einer bestimmten Höhe des Browsers ausblenden Thu, 12 May 22 13:25:31 Z https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1799059#m1799059 https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1799059#m1799059 <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> Div bei einer bestimmten Höhe des Browsers ausblenden Thu, 12 May 22 13:31:54 Z https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1799063#m1799063 https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1799063#m1799063 <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> Div bei einer bestimmten Höhe des Browsers ausblenden Thu, 12 May 22 14:36:20 Z https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1799067#m1799067 https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1799067#m1799067 <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> Div bei einer bestimmten Höhe des Browsers ausblenden Thu, 12 May 22 14:37:25 Z https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1799068#m1799068 https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1799068#m1799068 <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> Div bei einer bestimmten Höhe des Browsers ausblenden Thu, 12 May 22 15:12:01 Z https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1799077#m1799077 https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1799077#m1799077 <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> Div bei einer bestimmten Höhe des Browsers ausblenden Sun, 15 May 22 04:20:45 Z https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1799141#m1799141 https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1799141#m1799141 <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> Div bei einer bestimmten Höhe des Browsers ausblenden Thu, 12 May 22 15:29:37 Z https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1799078#m1799078 https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1799078#m1799078 <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> Div bei einer bestimmten Höhe des Browsers ausblenden Thu, 12 May 22 18:21:22 Z https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1799081#m1799081 https://forum.selfhtml.org/self/2022/may/08/div-bei-einer-bestimmten-hohe-des-browsers-ausblenden/1799081#m1799081 <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>