tag:forum.selfhtml.org,2005:/self HTML nur Überschriften zeigen – SELFHTML-Forum 2022-04-08T17:57:39Z https://forum.selfhtml.org/self/2022/apr/08/html-nur-uberschriften-zeigen/1798155#m1798155 Linuchs 2022-04-08T15:10:22Z 2022-04-08T15:10:22Z HTML nur Überschriften zeigen <p>Moin,</p> <p>ich erinnere mich dunkel und vielleicht auch falsch, dass man zu Beginn des Internets nur die Überschriften <code><h1></code> bis <code><h6></code> im Browser zeigen konnte.</p> <p>Das könnte ich jetzt gebrauchen, ein Buchprojekt ist sehr unübersichtlich geworden.</p> <p>Beim Suchbegriff [HTML Überschriften anzeigen] stoße ich nur auf Tools. Gibt es die Funktion auch eingebaut im Firefox?</p> <p>Fragt Linuchs</p> https://forum.selfhtml.org/self/2022/apr/08/html-nur-uberschriften-zeigen/1798156#m1798156 Samuel fiedler 2022-04-08T15:16:07Z 2022-04-08T15:16:56Z HTML nur Überschriften zeigen <p>Hallo Linuchs!</p> <p>Wenn ich dich richtig verstehe, suchst du etwas, was nach allen Überschriften im HTML sucht und dann daraus ein Inhaltsverzeichnis generiert oder so etwas ähnliches?</p> <p>[EDIT] Ich habe gerade recherchiert und ein tolles <a href="https://addons.mozilla.org/de/firefox/addon/headingsmap/" rel="nofollow noopener noreferrer">Firefox-Addon</a> gefunden. [/EDIT]</p> <p>Au revoir,<br> Samuel Fiedler</p> <div class="signature">-- <br> In CSS gibt es ja position: ab<em>solute</em>; und position: <strong>re</strong>lative;. Was ist nun die Mischung daraus?<br> Ganz klar: position: <strong>re</strong><em>solute</em>! </div> https://forum.selfhtml.org/self/2022/apr/08/html-nur-uberschriften-zeigen/1798173#m1798173 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2022-04-08T17:57:39Z 2022-04-08T17:58:28Z HTML nur Überschriften zeigen <p>@@Linuchs</p> <blockquote> <p>ich erinnere mich dunkel und vielleicht auch falsch, dass man zu Beginn des Internets nur die Überschriften <code><h1></code> bis <code><h6></code> im Browser zeigen konnte.</p> <p>[…] Gibt es die Funktion auch eingebaut im Firefox?</p> </blockquote> <p>Es gibt die Funtion eingebaut im <a href="https://validator.w3.org/#validate_by_uri+with_options" rel="nofollow noopener noreferrer">Validator</a>: ▾ More Options ☑︎ Show outline. (<a href="https://twitter.com/mmatuzo/status/1512479514529611778" rel="nofollow noopener noreferrer">via Manuel Matuzović</a>, danke)</p> <p>Dank auch an Kerstin Probiesch, die die (schon erwähnte) Erweiterung <a href="https://addons.mozilla.org/de/firefox/addon/headingsmap/" rel="nofollow noopener noreferrer">HeadingsMap</a> · <a href="https://twitter.com/kprobiesch/status/1512486590706503680" rel="nofollow noopener noreferrer">in den Ring warf</a>.</p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em lang="en">When the power of love overcomes the love of power the world will know peace.</em><br> — Jimi Hendrix </div> https://forum.selfhtml.org/self/2022/apr/08/html-nur-uberschriften-zeigen/1798158#m1798158 Matthias Scharwies mscharwies@selfhtml.org 2022-04-08T15:30:42Z 2022-04-08T15:30:42Z HTML nur Überschriften zeigen <p>Servus!</p> <blockquote> <p>Hallo Linuchs!</p> <p>Wenn ich dich richtig verstehe, suchst du etwas, was nach allen Überschriften im HTML sucht und dann daraus ein Inhaltsverzeichnis generiert oder so etwas ähnliches?</p> </blockquote> <p>Ich glaube schon.</p> <p>Ich habe das Tutorial <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Listen/Hybride_Nummerierung" rel="nofollow noopener noreferrer">HTML/Tutorials/Listen/Hybride_Nummerierung</a> überarbeitet; bin aber im 3. Kapitel stecken geblieben: <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Listen/Hybride_Nummerierung#dynamisch_erstelltes_Inhaltsverzeichnis" rel="nofollow noopener noreferrer">dynamisch erstelltes Inhaltsverzeichnis</a></p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2022/apr/08/html-nur-uberschriften-zeigen/1798159#m1798159 Linuchs 2022-04-08T15:35:54Z 2022-04-08T15:35:54Z HTML nur Überschriften zeigen <p>Hallo Samuel,</p> <p>danke, HeadingsMap habe ich installiert. Aber wie wird das aktiviert?</p> <p>Bei about:addons wird angegeben <code>Schaltfläche für Symbolleiste aktivieren Strg+Umschalt+O</code> da wird aber ein Fenster namens Bibliothek geöffnet.</p> https://forum.selfhtml.org/self/2022/apr/08/html-nur-uberschriften-zeigen/1798160#m1798160 Samuel fiedler 2022-04-08T15:48:58Z 2022-04-08T15:54:04Z HTML nur Überschriften zeigen <p>Hallo Linuchs!</p> <p>Das solltest du folgendermaßen lösen können:</p> <ol> <li>Klick auf die drei Punkte oben rechts</li> <li>Klick auf „Weitere Werkzeuge“</li> <li>Klick auf „Symbolleiste anpassen“</li> <li>In dem Fenster, was sich öffnet, solltest du das Icon unten sehen, was du dann an den gewünschten Ort ziehen kannst</li> <li>Wenn du damit fertig bist, klicke auf „Fertig“ (rechts unten)</li> </ol> <p><a href="/images/5c5573a6-b752-11ec-ae43-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/5c5573a6-b752-11ec-ae43-b42e9947ef30.png?size=medium" alt="Logo von HeadingMap" loading="lazy"></a></p> <p>[EDIT 1] Wenn das auch nicht geht, ist irgendwas komisch. [/EDIT 1]</p> <p>[EDIT 2] Wenn das nicht geht, habe nur noch einen Verdacht: Du arbeitest ausschließlich in privaten Fenstern und hast dem Add-On nicht erlaubt, in privaten Fenstern zu arbeiten. Das lässt sich auch lösen:</p> <ol> <li>Gehe auf about:addons</li> <li>Falls du dort noch nicht bist, klicke auf „Erweiterungen“</li> <li>Klicke auf „HeadingsMap“</li> <li>Wenn du nach unten scrollst, solltest du einen Punkt „In privaten Fenstern ausführen“ sehen. Wenn dieser nicht auf „erlauben“ ist, setze ihn auf „erlauben“.</li> </ol> <p>[/EDIT 2]</p> <p>Die Bibliothek ist das Verwaltungsfenster für deine Lesezeichen.</p> <p>Au revoir,<br> Samuel Fiedler</p> <div class="signature">-- <br> In CSS gibt es ja position: ab<em>solute</em>; und position: <strong>re</strong>lative;. Was ist nun die Mischung daraus?<br> Ganz klar: position: <strong>re</strong><em>solute</em>! </div> https://forum.selfhtml.org/self/2022/apr/08/html-nur-uberschriften-zeigen/1798161#m1798161 Linuchs 2022-04-08T16:15:50Z 2022-04-08T16:16:35Z HTML nur Überschriften zeigen <p>Danke, das Symbol hatte sich ganz unauffällig eingeschlichen. Klick darauf funktioniert.</p> <p>Habe gerade eine Idee innerhalb eines HTML Dokuments umgesetzt. Sehr unkonventionell, aber funktioniert. Ich blende style Angaben ein und aus.</p> <pre><code class="block language-js"><span class="token keyword">function</span> <span class="token function">toggleInhalt</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"inhalt"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">==</span> <span class="token string">""</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"inhalt"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> <style> .main * { display:none; } h1, h2, h3, h4, h5, h6 { display: block ! important; text-align: left ! important; } </style> </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"inhalt"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>inhalt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>center</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">toggleInhalt</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Inhalt<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>center</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Überschrift h1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Text Text Text Text Text <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Überschrift h3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> </code></pre> https://forum.selfhtml.org/self/2022/apr/08/html-nur-uberschriften-zeigen/1798163#m1798163 Jonathan Harker 2022-04-08T16:25:36Z 2022-04-08T16:33:47Z HTML nur Überschriften zeigen <p>Hallo Linuchs,</p> <blockquote> <p>Sehr unkonventionell, aber funktioniert.</p> </blockquote> <blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>center</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">toggleInhalt</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Inhalt<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>center</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Überschrift h1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Text Text Text Text Text <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Überschrift h3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Sehr unkonventionell, aber häufig ist es ja so, dass mit der Zeit die alten Dinger wie <code>center</code>, <code>font</code> und <code>br</code> wieder in Mode kommen!</p> <p>Bis bald! Jonathan</p> <div class="signature">-- <br> "Es gibt Besserwisser, die niemals begreifen, dass man Recht haben kann und trotzdem ein Idiot ist." </div> https://forum.selfhtml.org/self/2022/apr/08/html-nur-uberschriften-zeigen/1798165#m1798165 Rolf B 2022-04-08T16:31:11Z 2022-04-08T16:41:45Z HTML nur Überschriften zeigen <p>Hallo Linuchs,</p> <p>ein style Element im Body funktioniert, ist aber nicht standardkonform.</p> <p>Meine Anregung wäre, es über eine Klasse zu steuern. So:</p> <pre><code class="block language-css"><span class="token selector">.outlinemode :not(:is(h1,h2,h3,h4,h5,h6)) *, .outlinemode > :not(:is(h1,h2,h3,h4,h5,h6))</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 selector">.outlinemode :is(h1,h2,h3,h4,h5,h6)</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.outlinemode h2</span> <span class="token punctuation">{</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Also: Alles, was kein h1-h6 Element als Mama oder Papa hat, wird ausgeblendet. Damit die direkten Nichtüberschrift-Kids des .outlinemode Elements auch verschwinden, muss auch die > Regel dazu.</p> <p>Das hab ich deshalb so gemacht, weil Du ggf. ein <font>, <br> oder <center> Element innerhalb einer Überschrift verwenden könntest. Oder ein <img>. Hm. Möglicherweise HAST Du Bilder in Überschriften und WILLST sie im Outline-Mode ausblenden? Dann müsste man das noch feintunen.</p> <p>Die :is Pseudoklasse erspart Dir eine lange kommaseparierte Liste von Selektoren. Mit dem Margin an tieferen Überschriften hast Du auch gleich eine eingerückte Gliederung.</p> <p>Du musst dann nur die outlinemode Klasse hinzufügen. Entweder auf dem Body, oder auf dem .main Element. Zum Entfernen F5 drücken - oder dafür sorgen, dass der Toggle-Button nicht vom Outline gefressen wird.</p> <p>Bei etwas komplexeren Seitenlayouts mit Grid oder Sticky-Zeugs könnte es sein, dass die genannten Eigenschaften nicht reichen. Aber das wirst Du dann ja merken und kannst es ergänzen. Mit scheint, als wäre das primär ein Tool nur für Dich.</p> <p>Eine nur mausbedienbare Methode, die Gliederung auszuschalten und den gewünschten Abschnitt anzuspringen, bestünde darin, noch einen click-Eventhandler zu registrieren und bei click auf eine Überschrift den outline-Mode auszumachen und dann auf der Überschrift die scrollIntoView-Methode zu rufen. Das muss man ggf. über setTimeout hinter die Layoutphase verschieben.</p> <p>Um sicher zu sein, dass deine Regeln Vorrang haben, ohne dass Du mit Atombomben werden musst, kannst Du versuchen, mit <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@layer" rel="nofollow noopener noreferrer">@layer</a> zu arbeiten. Der Fuchs kann das schon, Chrome auch, Edge angeblich nicht obwohl er doch verchromt wurde.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/apr/08/html-nur-uberschriften-zeigen/1798166#m1798166 Rolf B 2022-04-08T16:33:26Z 2022-04-08T16:33:26Z HTML nur Überschriften zeigen <p>Hallo Jonathan,</p> <p>du hast zwar recht, aber lass es bitte. Linuchs ist gegen Urin dieser Art imprägniert, ihn damit anzupinkeln hat sich als sinnlos erwiesen. Die Self-Prioritäten sind nicht seine.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/apr/08/html-nur-uberschriften-zeigen/1798168#m1798168 Der Martin 2022-04-08T16:38:06Z 2022-04-08T16:38:06Z HTML nur Überschriften zeigen <p>Hallo,</p> <blockquote> <p>ein style Element im Body funktioniert, ist aber nicht standardkonform.</p> </blockquote> <p>das war mal, soweit ich weiß.<br> Aber es ist in HTML wie in der deutschen Rechtschreibung: Nicht alles, was das Regelwerk inzwischen als gültig akzeptiert, ist auch sinnvoll.</p> <p>Einen schönen Tag noch<br>  Martin</p> <div class="signature">-- <br> Мир для України. </div>