Viewport lässt Tabellenspalte verschwinden – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Viewport lässt Tabellenspalte verschwinden Tue, 07 Jan 20 18:46:56 Z https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762713#m1762713 https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762713#m1762713 <p>Hallo,</p> <p>ich habe bei einer Webseite für eine bessere Darstellung auf dem Handy nach einer Empfehlung von Google die Zeile</p> <p><meta name="viewport" content="width=device-width, initial-scale=1"></p> <p>eingefügt. Leider fehlt jetzt in der Handy-Darstellung eine ganze Tabellenspalte. Am besten sieht man sich die Seite auf dem PC an. Es geht um die Tabelle zwischen den beiden großen Strichen. Sie hat 3 Spalten. Die erste beginnt mit "Inhaltsverzeichnis", die zweite ist ein Abstandshalter, die dritte beginnt mit "Ohne Gebietsfilter" und sie fehlt auf dem Handy.</p> <p>Das Handy ist ein Samsung Galaxy S7 mit Android, der Browser ist Firefox, die Webseite ist <a href="http://peter-preus.de/nf/index.php" rel="nofollow noopener noreferrer">http://peter-preus.de/nf/index.php</a></p> <p>Liebe Grüße Peter</p> <p><strong>edited by marctrix</strong>: ich habe den Link korrigiert (Index.php) und anklickbar gemacht</p> Viewport lässt Tabellenspalte verschwinden Tue, 07 Jan 20 18:56:08 Z https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762714#m1762714 https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762714#m1762714 <p>Servus!</p> <blockquote> <p>Hallo,</p> <p>ich habe bei einer Webseite für eine bessere Darstellung auf dem Handy nach einer Empfehlung von Google die Zeile</p> <p><meta name="viewport" content="width=device-width, initial-scale=1"></p> <p>eingefügt.</p> </blockquote> <p>Das ist gut!</p> <blockquote> <p>Leider fehlt jetzt in der Handy-Darstellung eine ganze Tabellenspalte.</p> </blockquote> <p>Wenn man eine breite Tabelle hat, muss man eben über den Rand scrollen.</p> <p>Du hast imho aber keine tabellarischen Daten. Für die wäre so etwas besser geeignet:</p> <p><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Bilder_mit_Bildunterschriften" rel="nofollow noopener noreferrer">CSS/Tutorials/Bilder_mit_Bildunterschriften</a></p> <p>Das wäre dann auch responsiv, d.h. die Seite passt sich dem Viewport an!</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <h3>PS</h3><p>Bitte lies dir einmal diese Tutorials durch:</p> <ul> <li> <p><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5/Grundger%C3%BCst" rel="nofollow noopener noreferrer">HTML/Tutorials/HTML5/Grundgerüst</a></p> </li> <li> <p><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg" rel="nofollow noopener noreferrer">Einstieg in CSS</a></p> </li> </ul> <p>Bei Deiner Seite könnte man mit wenigen Schritten viel verbessern.</p> <div class="signature">-- <br> 25 Jahre SELFHTML → <strong><a href="https://forum.selfhtml.org/events/4" rel="noopener noreferrer">SELF-Treffen 05.-07. Juni 2020</a></strong> in <strong>Mannheim</strong> </div> Viewport lässt Tabellenspalte verschwinden Wed, 08 Jan 20 05:36:24 Z https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762716#m1762716 https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762716#m1762716 <p>Moin Peter,</p> <p>mal eine Frage: <code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"></code> Du weist, dass dies „Altmodisch“ ist?</p> <blockquote> <p><a href="https://www.w3.org/TR/2018/SPSD-html32-20180315/" rel="nofollow noopener noreferrer">HTML 3.2 Reference Specification</a> W3C Recommendation 14-Jan-1997 Superseded 15-March-2018</p> </blockquote> <p>Klar kann man heute auch noch mit einem VW Käfer auf der Straße fahren, es muss kein selbstfahrendes Auto sein. Doch ein punkto Sicherheit und Komfort ist ein modernes Auto besser. HTML 3.2 wird zwar auch heute noch von Modernen Browsern unterstütz. Aktuelles HTML5 ist ja eine Weiterentwicklung. Genau wie ein SUV eine Weiterentwicklung von einem Kübelwagen ist – der eine Weiterentwicklung des Käfers war. Doch aus heutiger Sicht, ist HTML5 weniger <a href="https://wiki.selfhtml.org/wiki/HTML/Regeln/Textauszeichnung#Valider_Code" rel="nofollow noopener noreferrer">reparaturanfällig</a> und komfortabler</p> <p>Live long and prosper \//_ </p> Viewport lässt Tabellenspalte verschwinden Tue, 07 Jan 20 21:34:38 Z https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762715#m1762715 https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762715#m1762715 <p>Hallo Matthias,</p> <p>ich glaube, ich muss mich entschuldigen. Ich habe die Dateien mit den Endungen index.php und index.html durcheinandergebracht. Letztere sollte es eigentlich gar nicht mehr geben. Meine Bemühungen wurden leider noch dadurch erschwert, dass gelöschte Dateien noch ewig im Browser-Cache und noch länger beim Provider vorhanden sind.</p> <p>Mein jetziger Stand der Erkenntnisse: Die vermisste Spalte ist doch da, der Browser "gibt sich Mühe", alles auf den schmalen Bildschirm zu bekommen. Darunter leidet allerdings die Lesbarkeit, so dass ich mir bei dieser Webseite nicht sicher bin, ob ich viewport derzeit wirklich verwenden will. Halte ich das Handy quer, so sieht es allerdings ein wenig besser aus.</p> <p>Gruß Peter</p> Viewport lässt Tabellenspalte verschwinden Wed, 08 Jan 20 07:57:08 Z https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762718#m1762718 https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762718#m1762718 <p>Hallo</p> <blockquote> <p>Mein jetziger Stand der Erkenntnisse: Die vermisste Spalte ist doch da, der Browser "gibt sich Mühe", alles auf den schmalen Bildschirm zu bekommen. Darunter leidet allerdings die Lesbarkeit</p> </blockquote> <p>Dann ist die Tabelle, so, <em>wie sie ist</em>, vermutlich nicht die richtige Wahl für schmale Viewports, wie im hochkant gehaltenen Smartphones <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup>.</p> <blockquote> <p>so dass ich mir bei dieser Webseite nicht sicher bin, ob ich viewport derzeit wirklich verwenden will.</p> </blockquote> <p>Das willst du (auch wenn du davon noch nichts weißt). Du willst aber über die Seitenaufteilung unter den verschiedenen Bedingungen unterschiedlicher Ausgabemedien nachdenken (auch wenn du auch davon noch nichts weißt).</p> <p>Da wäre das Inhaltsverzeichnis, das eine Liste ist und auch als solche ausgezeichnet werden sollte. Da wäre die Layouttabelle, die bei dir dazu dient, die einzelnen Tier- und Pflanzen- und Pilzarten untereinander darzustellen. Das geht besser – aber auch mit gedanklichen Umstellungen – ohne Tabelle. Und das geht ohne Tabelle so, dass sich dein hier vorgestelltes Problem in Wohlgefallen auflöst.</p> <p>Bist du an einer modernen Aufbereitung deier Seite interessiert? Wir <em>helfen</em> dir dabei.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.<br> <em>Hohle Köpfe</em> von Terry Pratchett </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Nachdem ich mir die Seite und ohnren Quelltext angeschaut habe, bin ich der Meinung, dass die Tabelle <em>in keiner Hinsicht</em> ein Mittel der Wahl ist. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> Viewport lässt Tabellenspalte verschwinden Wed, 08 Jan 20 07:45:59 Z https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762717#m1762717 https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762717#m1762717 <p>@@jensm</p> <blockquote> <p>mal eine Frage: <code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"></code> Du weist, dass dies „Altmodisch“ ist?</p> </blockquote> <p>Nicht nur altmodisch, sondern auch eher unsinnig, da dies die Browser in den <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode" rel="nofollow noopener noreferrer">Quirksmodus</a> versetzt. (siehe <a href="https://hsivonen.fi/doctype/#handling" rel="nofollow noopener noreferrer">Tabelle</a>)</p> <blockquote> <p>Genau wie ein SUV eine Weiterentwicklung von einem Kübelwagen ist</p> </blockquote> <p>Sehr gewagte These.</p> <blockquote> <p>[Kübelwagen] – der eine Weiterentwicklung des Käfers war.</p> </blockquote> <p>Der VW Typ 181 wurde auf Basis des Käfers entwickelt, aber Weiterentwicklung würde ich das nicht nennen.</p> <blockquote> <p>Live long and prosper \//_ </p> </blockquote> <p>Dir wurde ein Finger abgeschnitten?</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“<br> „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“</em><br> —Marc-Uwe Kling </div> Viewport lässt Tabellenspalte verschwinden Wed, 08 Jan 20 08:37:07 Z https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762720#m1762720 https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762720#m1762720 <p>Hallo jensm,</p> <p>schön, mal wieder von dir zu lesen. Ich wünsche dir ein frohes und gesundes neues Jahr.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> Viewport lässt Tabellenspalte verschwinden Thu, 09 Jan 20 23:43:44 Z https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762782#m1762782 https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762782#m1762782 <p>Hallo jensm,</p> <p>vielen Dank für deinen Beitrag. Bisher hat mich meine "altmodische" HTML-Deklaration noch nicht gestört. Du kannst an ihr sehen, wie alt meine Seite ist. Ich bin beim Programmieren zwar überaus konservativ (man könnte es auch faul nennen), aber dennoch Neuerungen nicht abgeneigt, wenn sie mir etwas bringen. Als ich das letzte Mal (das ist Jahre her) nach HTML5 geschaut habe, gab es allerdings noch ein paar Vorbehalte. Ich glaube gerne, dass diese Vorbehalte (frag mich nicht, was diese im einzelnen waren) inzwischen verschwunden sind, und so habe ich meine Seite jetzt mit <!DOCTYPE html> beginnen lassen. Ich hoffe, das ist richtig.</p> <p>Liebe Grüße<br> Peter</p> <p>PS: Die "problematische Seite" ist peter-preus.de/nf/index.php</p> Viewport lässt Tabellenspalte verschwinden Wed, 08 Jan 20 08:49:01 Z https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762724#m1762724 https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762724#m1762724 <p>Hallo Gunnar,</p> <blockquote> <blockquote> <p>Genau wie ein SUV eine Weiterentwicklung von einem Kübelwagen ist</p> </blockquote> </blockquote> <blockquote> <p>Sehr gewagte These.</p> </blockquote> <p>Noch gewagter finde ich die Andeutung, dass der SUV eine Analogie zu HTML5 sei - also etwas, dessen Gebrauch <strong>allgemein</strong> empfehlenswert ist.</p> <p>Es gibt Anwendungsfelder für SUVs. Aber auf diesen Feldern dürften die meisten als SUV verkauften Blechmonster scheitern. Und die meisten Leute, die einen „SUV“ fahren, haben diese Anwendung nicht. Statt dessen empören sie sich lieber künstlich über Lieder, die diesen Wahn persiflieren. Meine Omas waren auch arme Socken und keine Umweltsäue. Aber sehr viele, die sich heutzutage einen SUV leisten, haben das Geld im Wirtschaftswunder verdient und sind heutzutage Oma und Opa. Das Lied trifft exakt den Punkt (und ein paar unschuldige Punkte dazu).</p> <p>Ja, ich bin OT geworden. Sorry.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> Viewport lässt Tabellenspalte verschwinden Fri, 10 Jan 20 00:17:06 Z https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762784#m1762784 https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762784#m1762784 <p>Hallo auge,</p> <p>vielen Dank für deine Antwort. Bei meiner Seite (sieh sie dir am großen Bildschirm an) ist mir wichtig, dass sowohl die Auswahl der Lebewesengruppen als auch die geografische Auswahl auf einer Seite zu sehen sind. Durch Ändern von Abständen und Entfernen von Leerzeichen habe ich diesen Teil so hinbekommen, dass er auf dem Handy im Querformat schön (also ohne Zeilenumbrüche in den Tabellenelementen) anzusehen ist (getestet mit Firefox, Chrome und der Samsung-Internet-App).</p> <p>Was ich schlecht fände, wäre eine responsive Darstellung, bei der die Tabelle der Gruppen und die Tabelle der Orte bei zu schmalem Bildschirm untereinander erscheinen würden. Abschreckende Beispiele sind für mich Blogs, die oft zahlreiche Informationen in Seitenleisten enthalten, die bei responsiven Darstellungen ganz nach unten geraten, wo sie niemand mehr findet. Diese Informationen ganz oben zu positionieren, vermüllt andererseits den Blogbeitrag mit Dingen, die man nicht jedes Mal neu lesen möchte.</p> <p>Was mich noch interessieren würde, ist deine Aussage, dass man die lange Tabelle der Tier- und Pflanzenarten besser anders darstellen könnte. Hast du dafür einen konkreten Vorschlag?</p> <p>Liebe Grüße<br> Peter</p> Viewport lässt Tabellenspalte verschwinden Wed, 08 Jan 20 09:06:54 Z https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762727#m1762727 https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762727#m1762727 <p>Hallo Rolf,</p> <blockquote> <p>Es gibt Anwendungsfelder für SUVs. Aber auf diesen Feldern dürften die meisten als SUV verkauften Blechmonster scheitern.</p> </blockquote> <p>richtig - ein Ziel bei der Entwicklung von SUVs ist, dass sie geräumig sind und viel Platz auch für sperrige Ladung bieten. Das trifft wohl auch auf die meisten zu. Ein anderes Ziel ist, dass sie auch bedingt Offroad-tauglich sind. Und das sind wohl die wenigsten, wenn man auch mal Auto-Magazine anschaut. Und selbst wenn sie es sind, würden die meisten SUV-Besitzer um Himmels Willen nicht die befestigten Straßen und Wege verlassen, das Heilix Blechle könnte ja eine Schramme abkriegen.</p> <p>Ich war fassungslos und habe gehässig gegrinst, als ich vor einigen Jahren erlebt habe, wie ein Porsche Cayenne an der Steigung einer Tiefgaragen-Ausfahrt vom Hotel gescheitert ist: Der musste oben kurz anhalten, um den Querverkehr abzuwarten, und kam dann an der Steigung nicht mehr vom Fleck. Mit Automatik!<br> Der Fahrer hat dann seinen Beifahrer rausgeschickt, um auf der Straße aufzupassen, wann alles frei ist, und dann Handzeichen zu geben, während der Fahrer langsam rückwärts wieder die Auffahrt runterrollte und es dann mit Anlauf geschafft hat.</p> <p>Mein Kollege und ich hatten mit unserem Geschäftswagen, einem "popeligen Golf", keine Probleme an der Stelle (auch wenn mir dort beim Anfahren an der Steigung die Kupplung ein bisschen leid getan hat).</p> <blockquote> <p>Und die meisten Leute, die einen „SUV“ fahren, haben diese Anwendung nicht. Statt dessen empören sie sich lieber künstlich über Lieder, die diesen Wahn persiflieren. Meine Omas waren auch arme Socken und keine Umweltsäue. Aber sehr viele, die sich heutzutage einen SUV leisten, haben das Geld im Wirtschaftswunder verdient und sind heutzutage Oma und Opa. Das Lied trifft exakt den Punkt (und ein paar unschuldige Punkte dazu).</p> </blockquote> <p>Ich kenn zwar kein Lied, das auf deine Beschreibung passt, kann deine Ausführungen aber gut nachvollziehen.</p> <blockquote> <p>Ja, ich bin OT geworden. Sorry.</p> </blockquote> <p>Macht nix. Mutti hat Nasivin. ;-)</p> <p>Ciao,<br>  Martin</p> <div class="signature">-- <br> Ich stamme aus Ironien, einem Land am sarkastischen Ozean. </div> Viewport lässt Tabellenspalte verschwinden Wed, 08 Jan 20 09:11:55 Z https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762728#m1762728 https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762728#m1762728 <p>@@Rolf B</p> <blockquote> <p>Das Lied trifft exakt den Punkt (und ein paar unschuldige Punkte dazu).</p> </blockquote> <p>Ich hab <strong>das Lied</strong> im mein Repertoire aufgenommen und es vorgestern mit der Ansage vorgetragen, das Lied gehört gespielt, ohne dass man sich dafür entschuldigt, auch wenn – gerade weil – es einigen ⬛︎⬛︎⬛︎⬛︎⬛︎ nicht passt.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“<br> „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“</em><br> —Marc-Uwe Kling </div> Viewport lässt Tabellenspalte verschwinden Wed, 08 Jan 20 09:20:08 Z https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762729#m1762729 https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762729#m1762729 <p>@@Der Martin</p> <blockquote> <p>Ich kenn zwar kein Lied, das auf deine Beschreibung passt</p> </blockquote> <p><a href="https://www.youtube.com/watch?v=8AQD50V-ONw" rel="nofollow noopener noreferrer">Der WDR Kinderchor singt „Meine Oma ist ’ne alte Umweltsau“</a></p> <p>LLAP </p> <div class="signature">-- <br> <em>„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“<br> „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“</em><br> —Marc-Uwe Kling </div> Viewport lässt Tabellenspalte verschwinden Fri, 10 Jan 20 09:01:10 Z https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762792#m1762792 https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762792#m1762792 <p>Hallo</p> <blockquote> <p>vielen Dank für deine Antwort. Bei meiner Seite (sieh sie dir am großen Bildschirm an) ist mir wichtig, dass sowohl die Auswahl der Lebewesengruppen als auch die geografische Auswahl auf einer Seite zu sehen sind.</p> </blockquote> <p>Das kannst du nicht sicherstellen. Die Seite kann grundsätzlich mit den unterschiedlichsten Clients aufgerufen werden, über deren Eigenschaften du nichts <em>mit Sicherheit</em> sagen kannst. Mehr als Vermutungen sind von Anbieterseite aus nicht möglich, so dass es die Aufgabe des Seitenanbieters ist, möglichst wenig Barrieren zu errichten. Soweit zum generellen.</p> <blockquote> <p>Durch Ändern von Abständen und Entfernen von Leerzeichen habe ich diesen Teil so hinbekommen, dass er auf dem Handy im Querformat schön (also ohne Zeilenumbrüche in den Tabellenelementen) anzusehen ist (getestet mit Firefox, Chrome und der Samsung-Internet-App).</p> <p>Was ich schlecht fände, wäre eine responsive Darstellung, bei der die Tabelle der Gruppen und die Tabelle der Orte bei zu schmalem Bildschirm untereinander erscheinen würden.</p> </blockquote> <p>Mit hochformatig gehaltenem Smartphone (meine Standardhalteweise) funktioniert das natürlich nicht mehr. Da kommst du um eine untereinanderstehende Anzeige nicht mehr herum, was allerdings, um dein Argument, dass man die Funktionen dann nicht mehr findet, zu entkräfen, kein Problem ist, wenn die Filterfunktion im Inhaltsverzeichnis aufgeführt wird.</p> <p>Du hast mit deinem gegenwärtigen Inhaltsverzeichnis offensichtlich die Fotoauflistung an sich im Blick. Man kann es aber auch als Verzeichnis der Funktionen der Seite auffassen. Im Sinne der Besucher deiner Seite halte ich es für richtig, das Verzeichnis auf die Seite und nicht nur einen Teil der Seite zu beziehen.</p> <blockquote> <p>Abschreckende Beispiele sind für mich Blogs, die oft zahlreiche Informationen in Seitenleisten enthalten, die bei responsiven Darstellungen ganz nach unten geraten, wo sie niemand mehr findet. Diese Informationen ganz oben zu positionieren, vermüllt andererseits den Blogbeitrag mit Dingen, die man nicht jedes Mal neu lesen möchte.</p> </blockquote> <p>Ja, das ist imemr wieder ein Problem. Niemand hat behauptet, dass es dafür eine generell gültige Lösung gibt. Für jeden Einzelfall ist eine eigene, passende Lösung nötig.</p> <blockquote> <p>Was mich noch interessieren würde, ist deine Aussage, dass man die lange Tabelle der Tier- und Pflanzenarten besser anders darstellen könnte. Hast du dafür einen konkreten Vorschlag?</p> </blockquote> <p>Wenn wir uns gedanklich durch eine passende HTML-Struktur eines Inhaltsverzeichnisses inspirieren lassen, ergibt sich daraus eine analoge Struktur für die Inhalte.</p> <p>Nehmen wir mal an, die HTML-Struktur des Inhaltsverzeichnisses sähe folgendermaßen aus (ich habe mal frech den Filter mit reingenommen).</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</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>inhaltsverzeichnis<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>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#filter<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Auswahlfilter<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#tiere<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Tiere<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> (297/681) <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#insekten<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Insekten<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> (236/517) <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#bienen<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Bienen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> (3/11) <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#pflanzen<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Pflanzen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> (20/59)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#pilze<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Pilze<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> (8/25)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> <p>Das Verzeichnis ist eine verschachtelte Liste, in der die Punkte, die selbst Teilmengen von anderen Punkten sind, in eine eigene Liste, die Teil des Hauptpunktes ist, einsortiert werden. Beispiel sind die Unterpunkte bei „Tiere“ und die Unterpunkte von Teilmengen der Tiere, hier konkret die Insekten und deren Teilgruppen und Arten.</p> <p>Für die Struktur der Vorschauen der Bildergalerien ergibt sich eine gleichartige Struktur.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</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>tiere<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>h2</span><span class="token punctuation">></span></span>Tiere<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span> … <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</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>insekten<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>h3</span><span class="token punctuation">></span></span>Insekten<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bienen<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>h4</span><span class="token punctuation">></span></span>Bienen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>colletes-hederae<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>h5</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</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">colletes-hederae.html"</span><span class="token punctuation">></span></span>Colletes hederae<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>, Efeu-Seidenbiene<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h5</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bilderliste<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>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>colletes-hederae.html#1<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>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>colletes-hederae-18-5670k.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Colletes hederae, Bild 1<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>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>colletes-hederae.html#2<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>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>colletes-hederae-18-5678k.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Colletes hederae, Bild 2<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>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>colletes-hederae.html#3<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>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>colletes-hederae-18-5686k.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Colletes hederae, Bild 3<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>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</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>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>osmia-cornuta<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>h5</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>osmia-cornuta.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Osmia cornuta<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>, Gehörnte Mauerbiene<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h5</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bilderliste<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>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>osmia-cornuta.html#1<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>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>osmia-cornuta-16-6010k.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Osmia cornuta, Bild 1<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>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>osmia-cornuta.html#2<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>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>osmia-cornuta-16-6018k.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Osmia cornuta, Bild 2<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>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>osmia-cornuta.html#3<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>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>osmia-cornuta-16-6028k.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Osmia cornuta, Bild 3<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>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>osmia-cornuta.html#4<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>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>osmia-cornuta-15-3404k.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Osmia cornuta, Bild 4<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>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>osmia-cornuta.html#5<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>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>osmia-cornuta-15-3417k.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Osmia cornuta, Bild 5<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>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>osmia-cornuta.html#6<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>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>osmia-cornuta-15-3435k.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Osmia cornuta, Bild 6<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>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>osmia-cornuta.html#7<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>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>osmia-cornuta-15-3443k.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Osmia cornuta, Bild 7<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>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</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>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> … <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</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>pflanzen<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>h2</span><span class="token punctuation">></span></span>Pflanzen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> … <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</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>pilze<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>h2</span><span class="token punctuation">></span></span>Pilze<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> … <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> </code></pre> <p>Das ist mein Entwurf <em>ohne jegliche Formatierungen</em> und mit durchaus diskutabler Elementauswahl (<code>section</code> versus <code>div</code> in den tieferen Verschachtelungen).</p> <p>relevante Änderungen:</p> <ul> <li>Textabsätze (<code><p></code>) erhalten ein schließenden Tag (<code></p></code>) (sollten sie haben, das gilt natürlich auch für alle anderen Vorkommnisse)</li> <li>Bilder sind Listenpunkte</li> <li>Bilder haben Alternativtexte (müssen sie haben, hier bietet sich ein der Artenname mit Bildernummer als Text an)</li> <li>die nur fragmentarisch notierten Sektionen bekommen eine analoge Struktur mit ID, Überschriften und Unterelementen</li> <li>Umlaute (und eventuell weitere maskierte Buchstaben) werden als Buchstabe notiert („ö“ statt „&ouml;“ in „Gehörnte“), die Maskierung ist unnötig</li> </ul> <p>Vermutlich wird bei weiteren Vorschlägen anderer keine sehr viel andere HTML-Struktur herauskommen. Wenn die Struktur mitsamt anderen notwendigen Änderungen außen herum fest steht – und wirklich erst dann –, kann es an die Formatierungen gehen.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.<br> <em>Hohle Köpfe</em> von Terry Pratchett </div> Viewport lässt Tabellenspalte verschwinden Fri, 10 Jan 20 09:28:41 Z https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762793#m1762793 https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762793#m1762793 <p>Moin,</p> <blockquote> <p>Wenn wir uns gedanklich durch eine passende HTML-Struktur eines Inhaltsverzeichnisses inspirieren lassen, ergibt sich daraus eine analoge Struktur für die Inhalte.</p> </blockquote> <p>sollte die Denkweise nicht genau umgekehrt sein? Ich würde eher den Focus auf die eigentlichen Inhalte legen und dann aus deren Struktur das Inhaltsverzeichnis ableiten.</p> <blockquote> <ul> <li>Umlaute (und eventuell weitere maskierte Buchstaben) werden als Buchstabe notiert („ö“ statt „&ouml;“ in „Gehörnte“), die Maskierung ist unnötig</li> </ul> </blockquote> <p>Das stimmt; diese Verst&uuml;mmelung ist nur nötig, wenn man eine Codierung verwendet, in der diese Zeichen nicht darstellbar sind (z.B. ASCII), oder wenn man keinen Einfluss auf die Codierungs-Einstellungen hat und "safe" sein will. Ich kann mir aber gerade keinen realistischen Use Case vorstellen.</p> <p>Man darf es mit dem "Entmaskieren" aber bitte nicht zu weit treiben: Sonderzeichen im Sinne von HTML, also '<', '>' und '&' müssen auf jeden Fall maskiert werden (also als &lt;, &gt; oder &amp; geschrieben werden), wenn sie Teil des Textes sind.</p> <p>Ciao,<br>  Martin</p> <div class="signature">-- <br> Ich stamme aus Ironien, einem Land am sarkastischen Ozean. </div> Viewport lässt Tabellenspalte verschwinden Fri, 10 Jan 20 10:24:47 Z https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762796#m1762796 https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762796#m1762796 <p>Hallo Der Martin,</p> <blockquote> <p>Sonderzeichen im Sinne von HTML, also '<', '>' und '&' müssen auf jeden Fall maskiert werden (also als &lt;, &gt; oder &amp; geschrieben werden), wenn sie Teil des Textes sind.</p> </blockquote> <p>'>' ist unproblematisch, '&' auch wenn es von Leerzeichen umschlossen ist (oder inzwischen komplett unproblematisch, wenn es nicht als URL-Bestandteil auftaucht.</p> <p>'"' fehlt noch in der Reihe derjenigen Zeichen, die ggf. Berücksichtigung finden sollten.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> Viewport lässt Tabellenspalte verschwinden Fri, 10 Jan 20 11:34:52 Z https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762803#m1762803 https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762803#m1762803 <p>Hallo</p> <blockquote> <blockquote> <p>Wenn wir uns gedanklich durch eine passende HTML-Struktur eines Inhaltsverzeichnisses inspirieren lassen, ergibt sich daraus eine analoge Struktur für die Inhalte.</p> </blockquote> <p>sollte die Denkweise nicht genau umgekehrt sein? Ich würde eher den Focus auf die eigentlichen Inhalte legen und dann aus deren Struktur das Inhaltsverzeichnis ableiten.</p> </blockquote> <p><a href="/users/12573" class="mention registered-user" rel="noopener noreferrer">@pphtml</a> hat in seiner Seite, die auch als problematische Seite verlinkt ist, ein – <em>wenn auch nur optisch</em> – schlüssig strukturiertes Inhaltsverzeichnis (mMn) mitgeliefert. Also kann das, in eine sinnvolle HTML-Struktur gebracht, auch als Basis dienen.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.<br> <em>Hohle Köpfe</em> von Terry Pratchett </div> Viewport lässt Tabellenspalte verschwinden Fri, 10 Jan 20 10:35:57 Z https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762798#m1762798 https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762798#m1762798 <p>Hallo Matthias,</p> <blockquote> <blockquote> <p>Sonderzeichen im Sinne von HTML, also '<', '>' und '&' müssen auf jeden Fall maskiert werden (also als &lt;, &gt; oder &amp; geschrieben werden), wenn sie Teil des Textes sind.</p> </blockquote> <p>'>' ist unproblematisch, '&' auch wenn es von Leerzeichen umschlossen ist</p> </blockquote> <p>okay, stimmt - es ist dann einfach nur "unordentlich".</p> <blockquote> <p>(oder inzwischen komplett unproblematisch, wenn es nicht als URL-Bestandteil auftaucht.</p> </blockquote> <p>Nicht generell. Die Fehlerkorrektur der Browser toleriert z.B. das Weglassen des Semikolons als Abschluss einer Entity-Referenz, so dass z.B. paste&copy<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> in der Ausgabe als paste© erscheint.</p> <blockquote> <p>'"' fehlt noch in der Reihe derjenigen Zeichen, die ggf. Berücksichtigung finden sollten.</p> </blockquote> <p>Nur wenn es in Attributwerten steht, die ihrerseits mit Double Quotes begrenzt sind. Außerhalb von Attributwerten ist es AFAIK unkritisch.</p> <p>Ciao,<br>  Martin</p> <div class="signature">-- <br> Ich stamme aus Ironien, einem Land am sarkastischen Ozean. </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Ja, das ist eigentlich verkehrtrum. Nur der Demonstration wegen. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> Viewport lässt Tabellenspalte verschwinden Fri, 10 Jan 20 10:37:22 Z https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762799#m1762799 https://forum.selfhtml.org/self/2020/jan/07/viewport-lasst-tabellenspalte-verschwinden/1762799#m1762799 <p>@@Matthias Apsel</p> <blockquote> <blockquote> <p>Sonderzeichen im Sinne von HTML, also '<', '>' und '&' müssen auf jeden Fall maskiert werden (also als &lt;, &gt; oder &amp; geschrieben werden), wenn sie Teil des Textes sind.</p> </blockquote> </blockquote> <p>Nein, nicht in jedem Fall.</p> <blockquote> <p>'>' ist unproblematisch, '&' auch wenn es von Leerzeichen umschlossen ist (oder inzwischen komplett unproblematisch, wenn es nicht als URL-Bestandteil auftaucht.</p> <p>'"' fehlt noch in der Reihe derjenigen Zeichen, die ggf. Berücksichtigung finden sollten.</p> </blockquote> <p>Nicht, wenn es <em>Teil des Textes</em> ist.</p> <p>(Was es aber nicht sein sollte. <code>"</code> und <code>'</code> sollten im Text nicht vorkommen. Ausnahme: in <code>code</code>-Elementen.)</p> <p><code>"</code> muss escapet werden, wenn es in einem in <code>"</code> eingeschlossenen Attributwert vorkommt; <code>'</code> in <code>'</code> eingeschlossenen Attributwert.</p> <p><code><</code> in <code>"</code> oder <code>'</code> eingeschlossenem Attributwert hingegen ist unproblematisch.</p> <p>Man fährt aber sicher gut damit: <code><</code>, <code>></code> und <code>&</code> <strong>sollten</strong> maskiert werden. Dann kann man sich die Überlegung sparen, ob nun oder ob nicht.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“<br> „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“</em><br> —Marc-Uwe Kling </div>