tag:forum.selfhtml.org,2005:/self SELFHTML-Forum 2024-03-01T13:19:55Z https://forum.selfhtml.org/self/2024/mar/01/baustellen-im-wiki-helfende-hande-gesucht?srt=yes Matthias Scharwies mscharwies@selfhtml.org https://wiki.selfhtml.org/wiki/SELFHTML 2024-03-01T12:52:07Z 2024-03-01T13:19:55Z Baustellen im Wiki - helfende Hände gesucht <p>Die bestehenden Seiten im Wiki müssen immer wieder angepasst werden. Oft sind es nur Kleinigkeiten wie das Einfügen eines Links, manchmal die Verbesserung eines Beispiels. Leider hat der Tag aber auch nur 24 Stunden und wir können nicht immer so viel schaffen, wie wir wollen.</p> <p>Deshalb nun unser Aufruf:</p> <p><strong>HELP WANTED</strong></p> <p>Auf unserer <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer"><strong>Baustellenseite</strong></a> finden sich alle Seiten mit <strong>ToDo</strong>s. Trotzdem wollen wir einzelne Baustellen, die immer wieder auffallen, Euch hier besonders ans Herz legen:</p> <ol> <li> <p> <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Verschachtelte_Raster" rel="nofollow noopener noreferrer"><strong>CSS/Tutorials/Grid/Verschachtelte_Raster</strong></a><br> subgrid wird von allen Browsern unterstützt; jetzt fehlt ein gutes Beispiel!</p> </li> <li> <p> <a href="https://wiki.selfhtml.org/wiki/Datenvisualisierung/Baumdiagramm" rel="nofollow noopener noreferrer"><strong>Datenvisualisierung/Baumdiagramm</strong></a><br> Ursprünglich dachte ich an eine Umsetzung mit SVG, mittlerweile glaube ich, dass eine verschachtelte Liste mit @container besser geeignet wäre.<br> Im Netz schlug jemand ein x-card-Element vor.</p> </li> <li> <p> <a href="https://wiki.selfhtml.org/wiki/File_Upload" rel="nofollow noopener noreferrer"><strong>File Upload</strong></a><br> war bereits ein ToDo im Januar 2023 - wer erbarmt sich?<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> </li> </ol> <ol start="4"> <li> <p> <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Multimedia/Playlists" rel="nofollow noopener noreferrer"><strong>HTML/Tutorials/Multimedia/Playlists</strong></a><br> Audio, Video und JS - klingt doch interessant, oder?</p> </li> <li> <p> <a href="https://wiki.selfhtml.org/wiki/JavaScript_und_CSS#Siehe_auch" rel="nofollow noopener noreferrer"><strong>JavaScript und CSS</strong></a></p> <ul> <li>alles rund um das Thema „CSS durch JS ändern“. Vieles ist mittlerweile durch den Einsatz von custom properties überholt - der Rest müsste sortiert und aktualisiert werden.</li> <li>Das wird jetzt unter <a href="https://forum.selfhtml.org/self/2024/mar/05/javascript-und-css/1813859#m1813859" rel="noopener noreferrer">JavaScript und CSS</a> diskutiert!.</li> </ul> </li> <li> <p> <a href="https://wiki.selfhtml.org/wiki/PHP/Tutorials/Symfony_Mailer" rel="nofollow noopener noreferrer"><strong>PHP/Tutorials/Symfony Mailer</strong></a> - ja, das ist zu schwierig für jemanden, der nur „mal“ ein paar Mails senden will. Wir wollen aber best practices und aktuelle Frameworks vorstellen. Wenn es einem Anfänger zu schwierig ist, auch gut!</p> </li> </ol> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>SELF-Forum: <a href="https://forum.selfhtml.org/self/2023/jan/15/todo-im-januar-file-upload/1805531#m1805531" rel="noopener noreferrer"> ToDo im Januar: File Upload </a> vom 15.01.2023 <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2023/nov/16/frage-zu-kreisdiagrammen-im-wiki-artikel-balken-und-kreisdiagramme?srt=yes Robert B. 2023-11-16T11:20:34Z 2023-11-16T11:20:34Z Frage zu Kreisdiagrammen im Wiki-Artikel „Balken-_und_Kreisdiagramme“ <p>Hallo Forum,</p> <p>in o.g. genannten Abschnitt des Artikels ist ein Beispiel für ein Kreisdiagramm gegeben, das mir nicht einleuchtet:</p> <pre><code class="block language-svg"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</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>chart<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>420<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>150<span class="token punctuation">"</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chartinfo<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>desc</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>chartinfo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Ein Diagramm unserer Ernte<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>desc</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>defs</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>defs</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</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>pie<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-100 -100 200 200<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-0.25turn<span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>circle</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>background<span class="token punctuation">"</span></span> <span class="token attr-name">r</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<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>g</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>slice<span class="token punctuation">"</span></span> <span class="token attr-name">tabindex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<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>path</span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M 1 0 A 1 1 0 0 1 0.8 0.59 L 0 0 Z<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>text</span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>45<span class="token punctuation">"</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>9.5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>4 apples<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>g</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span> </code></pre> <p>Da ist erst einmal ein <code>svg</code> in einem <code>svg</code> – was soll das denn?</p> <p>Weiterhin:</p> <ol> <li>Wenn ich das richtig sehe, muss ich die Koordinaten für den Kreisbogen/die weiteren Tortenstücke aus den Anteilen (prozentual zur Basis 360° bzw. 2π) berechnen.</li> <li>Die Vorschau des Kreisdiagramm-Beispiels „existiert nicht“.</li> </ol> <p>Viele Grüße<br> Robert</p> https://forum.selfhtml.org/self/2024/mar/09/sinnhaftigkeit-von-meta-angaben-im-head-bezuglich-suchmaschinenoptimierung?srt=yes HTML_go https://kontakt-vs.de 2024-03-09T09:47:41Z 2024-03-09T09:47:41Z Sinnhaftigkeit von META-Angaben im HEAD bezüglich Suchmaschinenoptimierung <p>Guten Tag miteinander,</p> <p>meiner Homepage <a href="https://kontakt-vs.de" rel="nofollow noopener noreferrer">https://kontakt-vs.de</a> geht es dank Eurer Hilfe schon viel besser. Vor allem auch an Matthias, der mir half, die Grafik ganz neu (als SVG) zu erstellen. Vielen Dank!</p> <p>Es gibt aber noch zu tun. Ich denke, ich starte für verschiedene Fragen verschiedene Threads, das macht das Ganze für alle übersichtlicher. </p> <p>Meine Frage für <em>diesen</em> Thread also:</p> <p>Im nachstehenden Code des HEAD-Elements der Seite "Vorstellung" (Über uns) finden sich sehr viele META-Tags mit Informationen. Die hatte ich in der Struktur von meiner anderen Homepage <a href="https://www.xn--audiobibelne-olb.de" rel="nofollow noopener noreferrer">https://www.xn--audiobibelne-olb.de</a> größtenteils (natürlich angepasst) übernommen. Diese Tags sind auf allen Seiten nahezu gleich – bis auf die Zeilen 05, 08, und 09, denn die passen sich der jeweiligen Seite teilweise an.</p> <p><a href="https://wiki.selfhtml.org/wiki/Suchmaschinenoptimierung#Metadaten_f.C3.BCr_Suchmaschinen" rel="nofollow noopener noreferrer">Hier, im Wiki,</a> lese ich aber, dass viele META-Daten nicht mehr gebräuchlich / veraltet sind. Zu einem großen Teil werden sie von Suchmaschinen ignoriert (verbessern also das Ranking in keinster Weise, können sogar schädlich sein).</p> <p>Es könnte natürlich auch sein, dass ich einige Tags entferne, aber ein oder zwei hinzufügen sollte?</p> <p>Nun frage ich mich, inwiefern ich bei den META-Angaben ausmisten sollte? Vor allem die Icons (das ist vermutlich ein eigenes Thema, nämlich "Favicon") haben derzeit scheinbar keinen Einfluß; die Icons "funktionieren" (noch) nicht.</p> <p>Ich behaupte mal, die Zeilen 10 bis 12 ("author", "robots" und "revisit-after" könnte ich auf jeder der Seiten löschen?</p> <pre><code class="block language-<html>~~~">03 <head> 04 <meta charset="utf-8"> 05 <title>Über uns | Sozialwerk KONTAKT e.V. Villingen-Schwenningen</title> 06 <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes"> 07 <link href="./standard.css" rel="stylesheet"> 08 <meta name="description" content="Über uns | Sozialwerk KONTAKT e.V. Villingen-Schwenningen | Wer oder was ist KONTAKT e.V.?"> 09 <meta name="keywords" content="Über uns, KONTAKT Villingen-Schwenningen e.V., soziale Arbeit, Sozialwerk für Prävention und Integration, Kids Live, Lights On, Arbeit mit Jugendlichen, Arbeit mit Kindern, Integration, Migration, Suchtprävention"> 10 <meta name="author" content="Holger Hönle | selfthml.org"> 11 <meta name="robots" content="index, follow"> 12 <meta name="revisit-after" content="1 day"> 13 <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png"> 14 <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png"> 15 <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png"> 16 <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png"> 17 <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png"> 18 <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png"> 19 <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png"> 20 <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png"> 21 <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png"> 22 <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png"> 23 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> 24 <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png"> 25 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> 26 <link rel="manifest" href="/manifest.json"> 27 <meta name="msapplication-TileColor" content="#ffffff"> 28 <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"> 29 <meta name="theme-color" content="#ffffff"> 30 </head> </code></pre> <p>Dass ich einen neuen Favicon erstellen muss (vorzugsweise als SVG) ist mir bekannt, möchte ich hier im Thread aber nicht ausbreiten; das gibt einen eigenen Thread.</p> <p>Vielen Dank für Euer Feedback!</p> <p>Holger</p> https://forum.selfhtml.org/self/2024/mar/18/www-data-darf-nicht-lesen-und-schreiben-nahere-infos?srt=yes encoder 2024-03-18T12:59:31Z 2024-03-18T12:59:31Z www-data darf nicht lesen und schreiben - nähere Infos? <p>Hallo ihr</p> <p>Vor einiger Zeit habe ich gelesen dass der User "www-data" unter dem Webzugriffe laufen nicht auf alles zugreifen darf, auch wenn die Permissions es hergeben würden.<br> Ich finde leider nichts mehr darüber. Wer kann mir helfen?</p> <p>Ein paar Infos.<br> Auf einem Raspberry loggt ein cronjob regelmäßig mit einem php Script Daten von meiner PV Anlage. Das Script speichert zwischen den Aufrufen Daten auf einer ramdisk, damit nur Werte in meine Datenbank geschrieben werden die sich tatsächlich geändert haben.<br> Funktioniert soweit.</p> <p>Nur wenn ich das Script als Debugversion zwecks schönerer Ausgaben im Browser aufrufe, darf es nicht auf die ramdisk zugreifen.<br> Permissions der ramdisk sind maximal offen und wenn ich das Script in der Shell mit <code>sudo -u www-data</code> starte, funktioniert es auch. Es scheint demnach ein weiterer Sperrmechanismus zugange zu sein.<br> Nach was muss ich suchen um mehr über ihn zu finden?</p> https://forum.selfhtml.org/self/2024/mar/16/brauche-hilfe-bei-den-wiki-cards-hohe-des-inhalts-festlegen?srt=yes Rolf B 2024-03-16T18:51:46Z 2024-03-16T18:51:46Z Brauche Hilfe bei den Wiki-Cards: Höhe des Inhalts festlegen <p>Hallo alle,</p> <p>ich habe mal wieder ein Problem mit den Wiki-Cards. Auf der <a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials#F.C3.BCr_Fortgeschrittene" rel="nofollow noopener noreferrer">SVG/Tutorials</a> Seite ist eine Card, die auf die CSS-Transforms verlinkt. Diese Card habe ich zweizeilig gemacht. Ich möchte nun die Transform-Raute vertikal in der Card zentrieren. Das ist natürlich ein nice-to-have und wenn's nicht geht, dann geht's nicht. Aber das will ich natürlich genau wissen.</p> <p>Falls jemand denkt: Wieso, ist doch zentriert? - derzeit habe ich mir mit einem Füll-Div beholfen</p> <p>Die Card ist natürlich nur eine von vielen, d.h. das, was ich mache, muss für alle Cards passen.</p> <p>Die Idee ist, dass alle Cards über die Card-Vorlage erzeugt werden. Die erzeugt diesen HTML-Rahmen für die Cards:</p> <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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card<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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-titel<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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>logo<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">...</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> TITELTEXT <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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-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>div</span><span class="token punctuation">></span></span> </code></pre> <p>Das Logo ist rechts gefloatet, kann also aus dem Titel hinaus und in den Inhalt hinragen und in beiden Text verdrängen. Das möchte ich auch so haben. Das .card-Element ist ein inline-size Container, was mir den Zugriff auf die cqh-Einheit verwehrt. Die hätte ich in einem size-Container, aber dann bekomme ich keine dynamische Anpassung der Höhe an den Inhalt.</p> <p>Um die Transform-Raute vertikal zentrieren zu können, müsste .card-inhalt die volle Card-Höhe bekommen. Dann hätte ich diverse Möglichkeiten. Auf der Transform-Card wäre das mit height:100% möglich, aber nur, weil auf dieser Card das Titel-div nicht erzeugt wird. Wenn ich das auf anderen Cards mache, würde mir das Inhalt-div damit aus der Card hinaushängen. Ich kann daher nicht im Stylesheet grundsätzlich 100% Höhe auf den .card-inhalt geben. Ich muss es so machen, dass .card-inhalt so hoch ist, dass es in der Card den Platz unter dem Titel füllt. Es muss aber auch mindestens so hoch sein wie sein Inhalt, und die Card muss automatisch mindestens so hoch sein, dass Titel und Inhalt hineinpassen.</p> <p>Wenn für den Card-Inhalt Flexbox oder Grid hinzunehme, bekomme ich einen Blockformatierungskontext auf den Titel. Das ist auch wieder Mist, weil dann das Logo im Titel eingesperrt bleibt.</p> <p>Kann ich unter diesen Rahmenbedingungen nur mit CSS den .card-inhalt überhaupt die Card auffüllen lassen?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2024/mar/18/frage-zum-wiki-artikel-seiteninterne-verweise?srt=yes nix 2024-03-18T17:41:47Z 2024-03-18T17:41:47Z Frage zum Wiki-Artikel „Seiteninterne_Verweise“ <p>Hasch’ mich … ’tschuldigung, # mich, ich bin …?</p> <p>Jedenfalls vermisse ich in den gezeigten Beispielen zu internen Sprungzielen irgendwie das eine oder andere „#“. Und nich tnur das: neugierig gemacht, habe ich mir die Vorschauen mit dem Inspektor angesehen — und festgestellt, daß die nur recht eingeschränkt mit den gezeigten Quelltexten zu tun haben.</p> <p>Das liegt am Wiki? Kann sein. Oder muß sogar,auch wegen einer gewissen div-Suppe?</p> <p>Aber dann sollte man, denke ich, lieber auf eine Vorschau verzichten.</p> <hr> <p>BTW: draufgekommen bin ich, weil mein „Katalog“ gerade so umfangreich wurde, daß selbst auf einem großen Bildschirm das Grid in der Mitte so überfrachtet ist, daß ich im Titel-Bereich eine „ABC“-Navigation unterbringen <s><del>wollte.</del></s><ins>muß!</ins> Klappt aber irgendwie nicht.</p> <p>Fehler habe ich bislang keine gefunden. Nicht hier („neben“ den Vorschauen). Und auch die Inspektoren der Browser halten still, BBEdits’ Code-Folding ist auch einverstanden. Strukturell sollte als wenigstens kein göberer Fehler vorliegen. Aber: weder Safari noch FireFox lassen den Grid-Bereich scrollen. Das geht nur mit Maus (Scrollbalken und/oder Mausrad). Auch Tastatursteuerung via <code>tabindex</code> schlägt nicht an, selbst dann, wenn nur ein solcher Index (am Ende des Alphabets) überhaupt drin vor kommt …</p> <p>— Die nächste Baustelle „Marke nix“?</p> <p>Gut, ich werde basteln. Vielleicht diesmal sogar etwas Handliches. Aber erst mal drüber schlafen und nochmal genau überdenken …</p> https://forum.selfhtml.org/self/2024/mar/17/javascript-filereader?srt=yes Ich 2024-03-17T12:17:04Z 2024-03-17T12:17:04Z Javascript FileReader <p>Vielleicht kann hier jemand helfen? Ich habe ein Script mit dem der User ein Bild von seinem Gerät auswählen kann. Mit FileReader. Dann wird das auswähle Bild auf der Website angezeigt. Jetzt habe ich da noch ein Lösch-Button. Damit wird das Bild gelöscht und der User kann wieder ein Bild auswählen. Leider funktionieren nur andere Bilder. Wenn das gleiche Bild gewählt wird ist die BildAnzeige leer. Wenn ich ein anders Bild ausgewählt habe und dann wieder das erste funktioniert es. Warum ist das so und wie kann ich den Fehler verhindern? Danke</p> https://forum.selfhtml.org/self/2024/mar/14/anzahl-max-fibers-bei-vorgegebener-hardware?srt=yes Simone 2024-03-14T22:28:06Z 2024-03-14T22:28:06Z Anzahl Max-Fibers bei vorgegebener Hardware <p>Hallo,</p> <p>hat jemand Erfahrung ab welcher Anzahl PHP-Fibers der Server aussteigt, oder ob es überhaupt eine Obergrenze gibt, die man austesten muss?</p> <p>Ich verarbeite mit PHP per Konsole über 1 Million Jsons-Files und bereite diese für Mysql auf.</p> <p>Hierbei versuche ich per Script möglichst das Maximum aus Serverhardware und Entwicklungsumgebung herauszuholen, finde jedoch keine Informationen, wie hoch der Aufrufstapel (Call-Stack) sein darf.</p> <p>Vielen Dank ;o)</p> <p><a href="/images/1dc240e8-e251-11ee-94b9-9c6b00263d9f.jpg" rel="noopener noreferrer"><img src="/images/1dc240e8-e251-11ee-94b9-9c6b00263d9f.jpg?size=medium" alt="" loading="lazy"></a> <a href="/images/eb083b04-e24f-11ee-b097-9c6b00263d9f.jpg" rel="noopener noreferrer"><img src="/images/eb083b04-e24f-11ee-b097-9c6b00263d9f.jpg?size=medium" alt="" loading="lazy"></a></p> https://forum.selfhtml.org/self/2024/mar/12/bildauswahl-reset?srt=yes envoy 2024-03-12T20:21:21Z 2024-03-12T20:21:21Z Bildauswahl Reset <p>Hallo, ich habe 2 separate Bildauswahl-Elemente. Ich möchte beide, wenn ich auf den Button Reset drücke, jeweils auf das 1. Bild zurücksetzten. Einzeln kann ich ansprechen, weiß aber nicht, wie ich beide gleichzeitig zurücksetzten kann?</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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>tablinks<span class="token punctuation">"</span></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">changeImage</span><span class="token punctuation">(</span><span class="token string">'01.jpg'</span><span class="token punctuation">,</span> <span class="token string">'#bannerImage_(**all???**)'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>reset<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> </code></pre> <p>Viele Grüße</p> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</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><span class="token punctuation">"</span>tab<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>button</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>tablinks<span class="token punctuation">"</span></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">openCity</span><span class="token punctuation">(</span>event<span class="token punctuation">,</span> <span class="token string">'left'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>left<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>button</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>tablinks<span class="token punctuation">"</span></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">openCity</span><span class="token punctuation">(</span>event<span class="token punctuation">,</span> <span class="token string">'right'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>right<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>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>left<span class="token punctuation">"</span></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>tabcontent<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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bannerImage_left<span class="token punctuation">"</span></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>01.jpg<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>01_thumb.jpg<span class="token punctuation">"</span></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">changeImage</span><span class="token punctuation">(</span><span class="token string">'01.jpg'</span><span class="token punctuation">,</span> <span class="token string">'#bannerImage_left'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">cursor</span><span class="token punctuation">:</span>pointer<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span>40px<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span>40px</span><span class="token punctuation">"</span></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>02_thumb.jpg<span class="token punctuation">"</span></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">changeImage</span><span class="token punctuation">(</span><span class="token string">'02.jpg'</span><span class="token punctuation">,</span> <span class="token string">'#bannerImage_left'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">cursor</span><span class="token punctuation">:</span>pointer<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span>40px</span><span class="token punctuation">"</span></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>03_thumb.jpg<span class="token punctuation">"</span></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">changeImage</span><span class="token punctuation">(</span><span class="token string">'03.jpg'</span><span class="token punctuation">,</span> <span class="token string">'#bannerImage_left'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">cursor</span><span class="token punctuation">:</span>pointer<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span>40px</span><span class="token punctuation">"</span></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>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>right<span class="token punctuation">"</span></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>tabcontent<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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bannerImage_right<span class="token punctuation">"</span></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>01.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">""</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>01_thumb.jpg<span class="token punctuation">"</span></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">changeImage</span><span class="token punctuation">(</span><span class="token string">'01.jpg'</span><span class="token punctuation">,</span> <span class="token string">'#bannerImage_right'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">cursor</span><span class="token punctuation">:</span>pointer<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span>40px<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span>40px</span><span class="token punctuation">"</span></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>02_thumb.jpg<span class="token punctuation">"</span></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">changeImage</span><span class="token punctuation">(</span><span class="token string">'02.jpg'</span><span class="token punctuation">,</span> <span class="token string">'#bannerImage_right'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">cursor</span><span class="token punctuation">:</span>pointer<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span>40px</span><span class="token punctuation">"</span></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>03_thumb.jpg<span class="token punctuation">"</span></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">changeImage</span><span class="token punctuation">(</span><span class="token string">'03.jpg'</span><span class="token punctuation">,</span> <span class="token string">'#bannerImage_right'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">cursor</span><span class="token punctuation">:</span>pointer<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span>40px</span><span class="token punctuation">"</span></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>div</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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tablinks<span class="token punctuation">"</span></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">changeImage</span><span class="token punctuation">(</span><span class="token string">'01.jpg'</span><span class="token punctuation">,</span> <span class="token string">'#bannerImage_(**all???**)'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>reset<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>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span> </code></pre> https://forum.selfhtml.org/self/2024/mar/17/wann-json-und-wann-ein-objekt-nutzen?srt=yes ebody 2024-03-17T10:02:36Z 2024-03-17T10:02:36Z Wann JSON und wann ein Objekt nutzen? <p>Hallo,</p> <p>ich möchte eine Klasse erstellen, die eine Methode enthält, um Daten von einer API zu laden. Die Klasse soll zudem Methoden zum Abfragen und Filtern dieser Daten haben.</p> <p><strong>Ich frage mich jetzt</strong></p> <ol> <li>Was würde ein anderer Programmierer erwarten, in welcher Form (JSON oder Objekt) er diese Daten erhält, wenn er sie abfragt?</li> <li>Zudem, ob ich selbst im Script besser mit einem JSON oder Objekt arbeite?</li> </ol> <p><strong>Dazu muss ich vorab auch fragen, ist das wirklich JSON?:</strong></p> <pre><code class="block">let movies = [ { "Title": "The Dark Knight", "Year": 2008 }, { "Title": "Batman Begins", "Year": 2005 }, { "Title": "The Dark Knight Rises", "Year": 2012 } ]; </code></pre> <p>Oder wäre das JSON?</p> <pre><code class="block">let movies = '[ { "Title": "The Dark Knight", "Year": 2008 }, { "Title": "Batman Begins", "Year": 2005 }, { "Title": "The Dark Knight Rises", "Year": 2012 } ]'; </code></pre> <p>Ich gehe davon aus, dass Ersteres auch ein JSON ist und habe mir von ChatGTP ein Script zum Testen erstellen lassen. Die Funktionen würden sowohl mit einem Objekt und dem JSON funktionieren.</p> <p>Bzgl. Frage 2 wäre es also egal?</p> <p><strong>Wenn ich die Klasse erstelle und gefragt werde "Warum gibst du die Daten als Objekt und nicht als JSON wieder?" oder "Warum verendest du in der Klasse ein Objekt und nicht JSON" würde ich selbst gerne den Nutzen/Vorteil sehen, verstehen und damit auch erklären können.</strong></p> <p>Bisher sehe ich aber keinen Unterschied.</p> <pre><code class="block">// JavaScript-Objekt // let movies = [ // { Title: "The Dark Knight", Year: 2008 }, // { Title: "Batman Begins", Year: 2005 }, // { Title: "The Dark Knight Rises", Year: 2012 } // ]; // JSON let movies = [ { "Title": "The Dark Knight", "Year": 2008 }, { "Title": "Batman Begins", "Year": 2005 }, { "Title": "The Dark Knight Rises", "Year": 2012 } ]; // console.log(typeof movies); // myJSON = '{"name":"John", "age":30, "car":null}'; // console.log(typeof myJSON); // Funktion zum Finden des Elements mit dem Titel "Batman Begins" function findMovieByTitle(title) { return movies.find(movie => movie.Title === title); } // Funktion zum Hinzufügen eines neuen Films function addMovie(newMovie) { movies.push(newMovie); } // Funktion zum Löschen eines Films anhand des Titels function deleteMovieByTitle(title) { movies = movies.filter(movie => movie.Title !== title); } // Beispiel für das Löschen eines Films deleteMovieByTitle("Batman Begins"); // Aufruf der Funktion und Ausgabe des Ergebnisses const batmanBegins = findMovieByTitle("Batman Begins"); if (batmanBegins) { console.log("Gefundener Film:", batmanBegins); } else { console.log("Film nicht gefunden."); } // Aktualisierte Filme ausgeben console.log("Aktualisierte Filme:", movies); </code></pre> <p>Gruß ebody</p> https://forum.selfhtml.org/self/2024/mar/13/formular-accept-charset-utf-8?srt=yes phatman 2024-03-13T19:17:03Z 2024-03-13T19:17:03Z formular accept-charset="utf-8" <p>Guten Abend,</p> <p>habe jetzt Stunden das Internet durchsucht, aber leider nichts gefunden:(</p> <p>Es geht um mein Formular. Mit accept-charset="utf-8" gibt er zwar das <strong>ö</strong> <strong>ä</strong> und <strong>ü</strong> richtig aus!</p> <p>aber die großgeschriebenen Umlaute wie Ö Ä Ü und das scharfe ß nicht, kommt nur ein �!?</p> <p>Hat vielleicht irgendjemand einen Tipp?</p> <p>Danke Gruß phatman</p> https://forum.selfhtml.org/self/2024/mar/15/funktion-mit-fetch-soll-kein-promise-sondern-daten-liefern?srt=yes ebody 2024-03-15T13:56:35Z 2024-03-15T13:56:35Z Funktion mit fetch() soll kein Promise, sondern Daten liefern <p>Hi,</p> <p>kann man es vermeiden <code>then</code> und <code>catch</code> bei dem Aufruf der Funktion verwenden zu müssen? Die Funktion selbst wartet ja schon auf das Ergebnis. Wenn man in der Funktion und im Funktionsaufruf <code>then</code> und <code>catch</code> verwenden muss, erscheint es mir unnötig doppelt verwendet zu werden und falsch.</p> <pre><code class="block">/* Variante 1 */ async function load_1(apiURL){ try{ // Ausführen der HTTP-Anfrage, um JSON-Daten abzurufen const response = await fetch(apiURL); // JSON-Response speichern const json = await response.json(); // Daten zurückgeben return await json.data; } catch(err){ // Fehlerbehandlung throw err; } } const data1a = load_1('https://reqres.in/api/users/'); console.log('data1a',data1a); // => Promise </code></pre> <p>Wenn man <code>load_1()</code> aufruft, soll die Funktion direkt die Daten und kein Promise liefern. Wie kann man das machen?</p> <p>Gruß ebody</p> https://forum.selfhtml.org/self/2024/mar/03/tabelle-mit-css?srt=yes Darelius 2024-03-03T11:36:20Z 2024-03-03T11:36:20Z Tabelle mit CSS <p>Hallo erst einmal. Ich habe zwar keine Probleme, mit html und Co eine Tabelle zu machen, aber für meine Homepage habe ich immer frames benutzt. Da das "verpöhnt" ist, versuche ich das jetzt mit CSS hinzukriegen, scheitere aber sang und klanglos.</p> <p>Hier mein Problem:</p> <p>Ich habe 2 Blöcke: oben linkes ein Logo (120 px x 100 px) oben rechts eine Navigationsleiste (* x 100 px) unten links eine zweite Navigationsleiste (120 px x *) unten rechts der "Inhalt" mit dem Bildschirlrest.</p> <p>So weit kein Problem, da brauche ich nciht einmal CSS.</p> <p>ABER:</p> <p>Ich möchte, daß außer dem Inhalt alle Blöcke immer "fest" verankert sind und wenn der Inhalt zum "scrollen" ist, daß der nicht unter oder über deas andere rollt, sondern nur "seinen" Bereich wirklich hat.</p> <p>Auch benutze ich mehrere Tabellen und weiß nicht, wie ich untscheiedliche Tabellen unterschiedlich mit CSS ansteuern kann, da ich immer nur etwas finde, um alle tabellen zu beeinflussen.</p> <p>Mit html+frames kriege ich das in 5 minuten hin, bei CSS dampft mein Gehirn und ich finde keine Lösung, die funktioniert.</p> <p>Und nein, ich bin KEIN Trol, cellspacing, colspan etc kenne ich alles nur mit CSS stehe ich irghendwie auf Kriegsfuß, wen nes um Tabellen oder "Positionen" geht.</p> <p>Zu guter letzt eine Frage dazu: Ist CSS immer noch komplett Browserabhängig oder zeigen die das mittlerweile gleich an? Oder muß ich dann verschiedenen CSS machen, weil es in verschiedenen Browsern laufen soll, wie es früher war? (habe lange nicht mehr webseiten gemacht, zuletzt vor etwa 20 jahren oder so...)</p> <p>Vielen Dank für eure Hilfe im Voraus.</p> <p>...Darelius</p> https://forum.selfhtml.org/self/2024/mar/13/frage-zum-wiki-artikel-einbindung-mit-img?srt=yes Robert 2024-03-13T17:24:41Z 2024-03-13T17:24:41Z Frage zum Wiki-Artikel „Einbindung_mit_img“ <p>Das alt-Attribut ist bei <img> eine Pflichtangabe?(??)</p> <p>Das soll jetzt wirklich nicht aggressiv oder trollig klingen, aber wenn jemand (aus welchem Grund auch immer, surft noch per 14.4-er Modem, zahlt 5€ pro Kilobyte weil er vom Mond aus surft?) das Laden von Bildern ausgeschaltet hat, oder mit Lynx unterwegs ist, dann hilft es ihm auch nicht viel, wenn da steht "Schaltplan der tollen Schaltung". Selbst wenn dann kommt "Foto von Alicante", so ein Quatsch ist auch für Sehbehinderte keine Hilfe. Was soll das? Warum sollte ich mir für jedes Bild ein blödsinniges alt-Tag ausdenken? Es ist ja noch nichtmal sichergestellt, das beim Klick darauf irgendetwas passiert (etwa ein größeres Bild angezeigt oder ein Download des Bildes gestartet wird).</p> <p>Wieviele Prozent der Internetnutzer profitieren vom alt-Tag und warum? Ich kann mir keinen Grund für ein alt-Tag vorstellen. Selbst wenn Suchmaschinen, die (immer) noch keine Bilder auslesen können dann wissen, da ist der "Schaltplan der tollen Schaltung", was sollten sie damit machen? Zudem wäre die Unterstützung von primitiven Suchmaschinen oder von Sehbehinderten ja wohl mein Privatvergnügen, oder?</p> <p>Kann mich (und die zwei oder drei die das auch nicht verstehen) vielleicht jemand erleuchten? Danke!</p> https://forum.selfhtml.org/self/2024/mar/14/dropdown-menus-und-datenbank-aufruf-problem?srt=yes Darßfreund 2024-03-14T11:03:59Z 2024-03-14T11:03:59Z DropDown Menüs und Datenbank - Aufruf-Problem <p>Hallo,</p> <p>ich lasse Dropdown-Menüs für jeden Eintrag einer Datenbankabfrage per php erzeugen (Anfrage funktioniert). Bei der resultuierenden Webseite lässt sich jeder Menübutton anklicken - es öffnet sich jedoch immer das Dropdown-Menü des ersten Eintrages. Im resultierenden html-Code erscheinen die richtigen IDs in den Links des Menüs. Geöffnet wird aber immer nur das Dropdown-Menü des ersten Eintrages, auch wenn ich auf den Dropdown-Button den zweiten, dritten Eintrag klicke.</p> <p>Kann jemamd helfen? Ich finde den Fehler nicht ...</p> <p>Vielen Dank! Darßfreund</p> <p>Hier die Quelltext-Auszüge:</p> <p>php</p> <pre><code class="block language-php"><span class="token variable">$kla</span><span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> <span class="token variable">$klb</span><span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> <span class="token variable">$klc</span><span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> <span class="token variable">$kld</span><span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> <span class="token keyword">foreach</span> <span class="token punctuation">(</span><span class="token variable">$daten</span> <span class="token keyword">as</span> <span class="token variable">$inhalt</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$klausw</span> <span class="token operator">==</span> <span class="token string double-quoted-string">"klst"</span><span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$i1</span> <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<div class=\"container\">"</span><span class="token punctuation">;</span> <span class="token variable">$i1</span><span class="token operator">++</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$inhalt</span><span class="token operator">-></span><span class="token property">klasse</span> <span class="token operator">==</span> <span class="token string double-quoted-string">"<span class="token interpolation"><span class="token variable">$stuf</span></span>"</span><span class="token operator">.</span><span class="token string double-quoted-string">"a"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$kla</span> <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<div class=\"box\"><h2><a href=\"austragungsportal.php?klausw="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$stuf</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"a#1\">Klasse "</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$stuf</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"a</a></h2>"</span><span class="token punctuation">;</span> <span class="token variable">$kla</span><span class="token operator">++</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$inhalt</span><span class="token operator">-></span><span class="token property">ausgetragen</span> <span class="token operator">==</span> <span class="token string double-quoted-string">"kran"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<p class=\"ausgetragen\">"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$inhalt</span><span class="token operator">-></span><span class="token property">ausgetragen</span> <span class="token operator">==</span> <span class="token string double-quoted-string">"ausg"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<p class=\"ausgetragen\">"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<p class=\"anwesend\">"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<a href=\"?aktion=anfragen&ID="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$inhalt</span><span class="token operator">-></span><span class="token constant">ID</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"&klausw="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$klausw</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"#1"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"\"> <button class=\"angefragt\">Ange</button></a>"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<a href=\"?aktion=finden&ID="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$inhalt</span><span class="token operator">-></span><span class="token constant">ID</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"&klausw="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$klausw</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"#1"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"\"><button class=\"gefunden\">Gefu</button></a>"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<a href=\"?aktion=austragen&ID="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$inhalt</span><span class="token operator">-></span><span class="token constant">ID</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"&klausw="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$klausw</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"#1"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"\"><button class=\"ausgetragen\">Aust</button></a>"</span><span class="token punctuation">;</span> <span class="token comment">// Dropdown-Button</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<span class=\"dropdown\">"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<button onclick=\"myFunction()\" class=\"bibogta\">Dropdown-Button</button>"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<span id=\"myDropdown\" class=\"dropdown-content\">"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<a href=\"?aktion=gtaort&ID="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$inhalt</span><span class="token operator">-></span><span class="token constant">ID</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"&klausw="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$klausw</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"#1"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"\">Eintrag 1</a>"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<a href=\"?aktion=gtaort&ID="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$inhalt</span><span class="token operator">-></span><span class="token constant">ID</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"&klausw="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$klausw</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"#1"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"\">Eintrag 2</a>"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<a href=\"?aktion=gtaort&ID="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$inhalt</span><span class="token operator">-></span><span class="token constant">ID</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"&klausw="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$klausw</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"#1"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"\">Eintrag 3</a>"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<a href=\"?aktion=gtaort&ID="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$inhalt</span><span class="token operator">-></span><span class="token constant">ID</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"&klausw="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$klausw</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"#1"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"\">Eintrag 4</a>"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<a href=\"?aktion=gtaort&ID="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$inhalt</span><span class="token operator">-></span><span class="token constant">ID</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"&klausw="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$klausw</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"#1"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"\">Eintrag 5</a>"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"</span>"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"</span>"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"</p>"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>js</p> <pre><code class="block language-javascript"> <span class="token operator"><</span>script<span class="token operator">></span> <span class="token comment">/* When the user clicks on the button, toggle between hiding and showing the dropdown content */</span> <span class="token keyword">function</span> <span class="token function">myFunction</span><span class="token punctuation">(</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">"myDropdown"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token string">"show"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// Close the dropdown if the user clicks outside of it</span> window<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span><span class="token function">matches</span><span class="token punctuation">(</span><span class="token string">'.bibogta'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> dropdowns <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByClassName</span><span class="token punctuation">(</span><span class="token string">"dropdown-content"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> i<span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> dropdowns<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> openDropdown <span class="token operator">=</span> dropdowns<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>openDropdown<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span><span class="token string">'show'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> openDropdown<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'show'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> </code></pre> <p>css</p> <pre><code class="block language-css"><span class="token comment">/* Dropdown-Menue */</span> <span class="token selector">.dropbtn</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #3498DB<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropbtn:hover, .dropbtn:focus</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #2980B9<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown-content</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 property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #f1f1f1<span class="token punctuation">;</span> <span class="token property">min-width</span><span class="token punctuation">:</span> 160px<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0px 8px 16px 0px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown-content a</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 12px 16px<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown a:hover</span> <span class="token punctuation">{</span><span class="token property">background-color</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.show</span> <span class="token punctuation">{</span><span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.bibogta</span> <span class="token punctuation">{</span><span class="token property">background</span><span class="token punctuation">:</span> #ce5cee<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #ffffff<span class="token punctuation">;</span><span class="token punctuation">}</span> </code></pre> https://forum.selfhtml.org/self/2024/feb/09/cards-im-wiki?srt=yes Rolf B 2024-02-09T16:43:31Z 2024-02-09T16:43:31Z Cards im Wiki <p>Hallo Wiki-Autoren,</p> <p>das Thema Cards, das wir neulich im Discord besprochen hatten, ist jetzt soweit umgesetzt und im Hauptwiki verfügbar.</p> <p>Auf der Vorlage:Card Seite ist die Dokumentation und ein paar Beispiele. Auf der "Wie fange ich an?" Seite sind die ersten 6 Cards umgestellt.</p> <p>Ich bitte die, die es interessiert, um einen Review. Haben wir damit das, was wir besprochen hatten?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2024/mar/13/wiki-grundgerust-und-metaangaben?srt=yes Matthias Scharwies mscharwies@selfhtml.org 2024-03-13T07:33:48Z 2024-03-13T07:33:48Z Wiki: Grundgerüst und Metaangaben <p>Guten Morgen,</p> <p>ich hatte <a href="https://forum.selfhtml.org/self/2024/mar/09/sinnhaftigkeit-von-meta-angaben-im-head-bezuglich-suchmaschinenoptimierung/1813984#m1813984" rel="noopener noreferrer">hier</a> ja schon mal angedacht, Rolfs Liste der Meta-Angaben in's Wiki zu ziehen.</p> <p>Erst hatte ich überlegt, ob es in der Referenz beim <a href="https://wiki.selfhtml.org/wiki/HTML/Attribute/name" rel="nofollow noopener noreferrer">name-Attribut</a> schon etwas zu den verschiedenen Werten gäbe.</p> <p><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Grundger%C3%BCst" rel="nofollow noopener noreferrer"><strong>HTML/Tutorials/Grundgerüst</strong></a></p> <p>Dieses Tutorial ist ja Bestandteile des Theorie-Reihe, die die Grundlagen und Regeln von HTML vorstellt.</p> <p>Das Grundgerüst war nach der Syntax das zweite Kapitel und sollte ursprünglich eben die <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Grundger%C3%BCst#Kopiervorlage_f.C3.BCr_ganz_Ungeduldige" rel="nofollow noopener noreferrer">Kopiervorlage des minimalen Grundgerüsts </a> erklären.</p> <p>Im Abschnitt über den body leitet eine Fortsetzungsvorlage auf das Seitenstrukturierungs-Kapitel weiter.</p> <p>Danach kommt:</p> <p><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Grundger%C3%BCst#Metaangaben_im_Detail" rel="nofollow noopener noreferrer"><strong>Metaangaben im Detail</strong></a></p> <p>Anhand des heads des Forums <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> werden weitere Metaangaben erklärt und mit der {{Hauptartikel|...}}-Vorlage auf weitere Tutorials verlinkt.</p> <p>Einige Texte sind etwas kurz, wer Lust hat sich auszutoben…</p> <p>BTW: Das Tutorial zu <a href="https://wiki.selfhtml.org/wiki/Favicon" rel="nofollow noopener noreferrer"><strong>Favicon</strong>s</a> ist nagelneu, da hat sich einiges geändert!</p> <p>Was mir erst am Schluss auffiel: Das ist der Platz für einen Link zum "Stylesheets einbinden" und den Artikel zu <a href="https://wiki.selfhtml.org/wiki/RSS" rel="nofollow noopener noreferrer">RSS</a></p> <p>Fazit: Eine solche Liste kann das "Siehe auch" bzw. eine Reihe Cards ersetzen oder ergänzen.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Die Signatur findet sich auf der Rückseite des Beitrags. </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Das ist nicht 1:1 übernommen worden. Manche Sachen müsste man mit ck durchsprechen, aber nicht momentan - wir haben andere Baustellen. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2024/mar/10/anfange-mit-grid-html-und-css-sheets-korrekt-strukturieren?srt=yes einsiedler 2024-03-10T18:12:03Z 2024-03-10T18:12:03Z Anfänge mit GRID: HTML- und CSS-Sheets korrekt strukturieren <h3>Start mit GRID</h3><p>Hallo liebe Forumer,</p> <p>nach einer langen Abstinenz vom Forum habe ich nun erneut Fragen zu einem Projekt das ich mit Grid umsetzen möchte.</p> <p>Ich möchte alles so einfach wie möglich halten, schlicht Fotos / Videos und einen Kurztext dazu, ähnlich einem Blog, öffentlich machen.</p> <p>Mir ist klar das alles noch nicht perfekt ist, aber durch eure Mithilfe wäre ich zumindest näher daran.</p> <p>Ich habe mal verschiedene Versionen von allem erstellt, da ich nicht sicher bin ob die Struktur (das Grid / Flexbox - Raster) jeweils so richtig ist.</p> <p>Projekt A) - schlichter BLOG (ohne Menüführung)</p> <p>Sub-Projekt B) - Version mit Menüführung</p> <p>Ich möchte anmerken, ich verwende hier noch Blindtexte und diverse Vorschau / Ansichts Fotos und Videos.</p> <p>===</p> <p>Projekt A) - schlichter BLOG (ohne Menüführung)</p> <p>LINK: <a href="http://misanthrop.bplaced.net/test/public/Testseite_V8.html" rel="nofollow noopener noreferrer">Testseite_V8</a></p> <p>1a) Grundsätzliches zum Grid - Raster:</p> <p>Ist es erforderlich das angefangen vom obersten <em>html</em> über <em>body</em>, <em>main</em> bis zum verschachtelsten, untersten <em>div</em>, komplett alles mit display: grid; "durchgerastert" wird?</p> <p>Oder kann ich einmal beispielsweise dem <em>main</em> ein grid mitgeben und weiterhin einer untergeordneten <em>section</em> ebenso ein display: grid; wie ich es einfach benötige?</p> <p>Ist dies legitim?</p> <p>Siehe bitte meine <a href="http://misanthrop.bplaced.net/test/public/Testseite_V8.html" rel="nofollow noopener noreferrer">Beispielsseite</a>.</p> <p>2a) Frage zu <strong>inline-size</strong></p> <p>Breiten von nav id="skip-to-section" / header class="subheader" / details class="related-links" --- mit <strong>inline-size</strong> korrekt festlegen!</p> <p>Bisher habe ich immer das Problem damit, auch wenn ich % - Angaben verwende, dann passiert es, das das jeweilige grid Raster dem ganzen Raster nach ausserhalb überspringt / überlagert. So gehört sich das aber nicht. Auch möchte ich diese Elemente zentrieren, das gelingt mir aus irgendeinem Grund auch nicht, auch nicht mit <em>justify-items</em></p> <p>Kann mir jemand zeigen wie es richtig geht?</p> <p>3a) "<em>to-the-top</em>" Botton --- beim vertikalen auf- und abscrollen zum schnellen anklicken "nach oben"</p> <p>Zum "<em>to-the-top</em>" Botton gibt es noch eine anders gelöste Version, momentan ist es hier so, das der "<em>Sprung-Botton-Pfeil</em>" jeweils innerhalb eines "<em>section - Bereiches</em>" " vertikal auf und ab" fährt.</p> <p>Bei einer anderen Version ist dieser "<em>Sprung-Botton-Pfeil</em>" übergreifend aller <em>sections</em>, bleibt aber innerhalb des übergeordneten <em>article</em>. Hier habe ich das Raster dementsprechend geändert. Näheres später bei der "Version mit Menüführung" zum anschauen.</p> <p>Villeicht verwirrend beschrieben, deshalb einfach mal angucken.</p> <p><em>Hier nun meine Frage</em>: Ob man es so löst oder ob es noch anders, allerdings ohne JS, "machbar" ist.</p> <p><strong>!!! Wichtig</strong> ist mir hier allerdings dabei. das bei einem <strong>verschmälerten Bildschirmfenster</strong> dieser Botton <em>jeweils unter einer section</em> steht, da immer ein "<em>to-the-top</em>" Botton beim vertikalen auf- und abscrollen zum schnellen anklicken verfügbar sein soll.</p> <p>Ich hoffe es ist verständlich.</p> <p>4a) Größe eines Videos</p> <p>Die Bitrate meines Videos liegt bei mir bisher immer bei 1100 kbps bei einer maximalen Länge des Videos von 2 - 3 Min. Ist das zuviel und kann ich dies noch um einiges verringern. Ich frage, weil das Video ja noch "geladen" werden muss und deshalb "zu gross" ist und eine lange Ladezeit benötigt.</p> <p>Sub-Projekt B) - Version mit Menüführung</p> <p>Hier, um das oben beschriebene mit den "<em>to-the-top</em>" Botton deutlicher zu machen.</p> <p>LINK : <a href="http://misanthrop.bplaced.net/test/public/Testseite_V7b2.html" rel="nofollow noopener noreferrer">Testseite_V7b2</a></p> <p>Link : <a href="http://misanthrop.bplaced.net/test/public/Testseite_V7b1.html" rel="nofollow noopener noreferrer">Testseite_V7b1</a></p> <p>Dann eine Version mit fixed Menüs :</p> <p>LINK : <a href="http://misanthrop.bplaced.net/test/public/Testseite_V7d.html" rel="nofollow noopener noreferrer">Testseite_V7d.html</a></p> <p>und LINK : <a href="http://misanthrop.bplaced.net/test/public/Testseite_V7c.html" rel="nofollow noopener noreferrer">Testseite_V7c.html</a></p> <p>Das mit dem fixieren der Menüs hat nach meiner Ansicht mehr Nachteile, vorallem wenn man die Schrift vergrößert, weniger wenn man das Bildschirmfenster zusammenschiebt.</p> <p>Wenn man natürlich die querie-Abstände so geschickt setzt würde es weniger auffallen. Was denkt ihr dazu?</p> <p>Weitere Fragen zum zweiten Projekt muss ich grad noch formulieren.</p> <p>An die lustigen Witzbolde unter euch mit irgendwelchen Spökskes, unterlasst es einfach hier etwas beizutragen. Danke.</p> <p>Grüße T.</p> https://forum.selfhtml.org/self/2024/mar/12/javascript-lasst-sich-nicht-auslagern-reloaded?srt=yes Matze henning-etienne@t-online.de http://matzeweb.v6.rocks/coder/index.php/beitrag-eins 2024-03-12T10:07:28Z 2024-03-12T10:07:28Z Javascript läßt sich nicht auslagern - reloaded <p>So, wie angedroht bin ich jetzt mit einem Account angemeldet und werde meine Frage jetzt erweitern....</p> <p>Doch zuerst einmal der Code um den es mir geht:</p> <pre><code class="block"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- <script src="boxentest.js"></script> --> <meta name="viewport" content="width=device-width"> <title>Test</title> </head> <body> <label for="farbe01">Rand: </label> <input type="checkbox" id="s1" value="Rand"> <input id="farbe01" type="color" value="#466eaf"> <output id="ausgabe01"></output> <br> <label for="farbe02">Schatten: </label> <input type="checkbox" id="s2" value="schatten"> <input id="farbe02" type="color" value="#006767"> <output id="ausgabe02"></output> <br> <label for="farbe03">Steg: </label> <input type="checkbox" id="s3" value="steg"> <input id="farbe03" type="color" value="#00ff00"> <output id="ausgabe03"></output> <br><br><br> <p id="box1" aria-live="polite"></p> <p id="box2" aria-live="polite"></p> <p id="box3" aria-live="polite"></p> <script> window.addEventListener('DOMContentLoaded', function () {window.addEventListener("load", farbwahl00); document.getElementById("farbe01").addEventListener("change", farbwahl00); document.getElementById("farbe02").addEventListener("change", farbwahl00); document.getElementById("farbe03").addEventListener("change", farbwahl00); function farbwahl00() { const farbe01= document.getElementById("farbe01").value; const farbe02= document.getElementById("farbe02").value; const farbe03= document.getElementById("farbe03").value; document.getElementById("ausgabe01").textContent = farbe01; document.getElementById("ausgabe02").textContent = farbe02; document.getElementById("ausgabe03").textContent = farbe03;} }); const box02 = [ {"checkboxID": "s1", "checked": "Rand ist aktiviert!", "outputID": "box1", "unchecked": ""}, {"checkboxID": "s2", "checked": "Schatten ist aktiviert!", "outputID": "box2", "unchecked": ""}, {"checkboxID": "s3", "checked": "Steg ist aktiviert!", "outputID": "box3", "unchecked": ""} ]; document.body.addEventListener("input", event => { box02.forEach(data => { const checkbox = document.getElementById(data.checkboxID), output = document.getElementById(data.outputID); if (checkbox && output && event.target == checkbox) { output.textContent = checkbox.checked ? data.checked : data.unchecked; } }); }); </script> </body> </code></pre> <p>Hierzu habe ich mehrere Fragen (Herausforderungen).</p> <ol> <li> <p>Wenn ich den Scriptteil in die boxentest.js auslagere (ja, ist in diesem Beispiel auskommentiert, das weiß ich!)) aktualisiert er mir in der Anzeige zwar die Farbwerte aber Er zeigt nicht mehr an welches Element 'aktiviert' ist. Kann das daran liegen, dass ich in den unteren EventListener (box02) noch keinen 'DOMContentLoaded' gesetzt habe und wenn ja, wie füge ich den ein?</p> </li> <li> <p>Bezieht sich auch auf den unteren Eventlistener (box02). Macht hier ein 'input', daß sich auf den 'body' bezieht wirklich Sinn? Da ich ja weitere Funktionen einbaue ist es glaube ich nicht gut, sich nur für diese auf den Body zu beziehen. Wäre es also nicht klüger auch hier ein 'getElementById' mit 'change' zu setzen? Aber was setze ich dann als Auslöser (data.checkboxID), (box02) oder gibt es da etwas was ich übersehen habe?</p> </li> <li> <p>Gibt es eine Möglichkeit...... äehm... die in der ersten Funktion bestimmten Variablen (farbe01 - farbe03) mit der ausgabe der zweiten Funktion zu verknüpfen? Hinter dem 'Rand ist aktiviert' steht dann der Farbwert von farbe01, hinter dem 'Schatten ist aktiviert' steht dann der Wert von farbe02..... usw</p> </li> <li> <p>Eher unwichtig, könnte mir aber die zukünftige Arbeit an meinem Projekt erleichtern. In der ersten Funktion (farbwahl00) wiederhole ich auch sehr oft den selben code was ja nicht sehr 'Dry' ist wie ich gelernt habe - Kann ich auch da irgendwie ein Array einarbeiten.....</p> </li> </ol> <p>Ich habe mal zwei Links eingefügt..... Einen zur eigentlichen Seite Das ist aber im Moment eher ein grober Entwurf - zeigt aber in der verlinkten Unterseite wo ich mal hin will wenn ich groß bin. Der zweite link ist einfach nur ein Testaufbau der wieder verschwindet wenn meine Fragen beantwortet sind..... Die Ladezeiten können bei beiden etwas länger sein, weil der Server hier vor mir auf dem Küchentisch steht.</p> <p>Danke schon mal im vorraus für alle Tips und Anregungen, aber denkt daran - Bitte Langsam sprechen ich habe grade erst angefangen JS zu lernen.</p> <p>Okay, bis dann,</p> <p>Matze</p> https://forum.selfhtml.org/self/2024/mar/07/count-down-uhr-audiodatei-wird-nicht-abgespielt?srt=yes Franck Dettfurth 2024-03-07T09:03:30Z 2024-03-07T09:03:30Z Count down-Uhr, Audiodatei wird nicht abgespielt <p>Hallo: Hat jemand einen Tipp für mich, wo das Problem beim nachstehenden Code bestehen könnte? Die Audiodatei sollte bei Countdown 10 Sekunden abgespielt werden, aber es tut sich nichts - zumindest nicht im Browser. Beim Test auf W3Schools dagegen funktioniert alles wie gewollt.</p> <p>Danke schon mal für die Hilfe & Gruß, Franck.</p> <hr> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<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>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<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>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<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>title</span><span class="token punctuation">></span></span>Countdown Clock with Audio<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> Trebuchet MS<span class="token punctuation">,</span> sans-serif<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 property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 100vh<span class="token punctuation">;</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'https://schulressourcen.de/schulressourcen/0repositorium/bkgrd_pic1.jpg'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token comment">/* Background picture */</span> <span class="token property">background-size</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span> <span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span> <span class="token property">background-attachment</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token comment">/* Font color */</span> <span class="token punctuation">}</span> <span class="token selector">#countdown</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token comment">/* Font bold */</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</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>countdown<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>01:00.0<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>audio</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>audio<span class="token punctuation">"</span></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>https://schulressourcen.de/schulressourcen/0repositorium/thx.wav<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>audio</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token comment">// JavaScript for the countdown clock</span> <span class="token keyword">function</span> <span class="token function">startCountdown</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Set the countdown duration to 15 seconds (in milliseconds)</span> <span class="token keyword">var</span> countdownDuration <span class="token operator">=</span> <span class="token number">15</span> <span class="token operator">*</span> <span class="token number">1000</span><span class="token punctuation">;</span> <span class="token comment">// 15 seconds * 1000 milliseconds</span> <span class="token comment">// Set the time when the countdown should end</span> <span class="token keyword">var</span> endTime <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> countdownDuration<span class="token punctuation">;</span> <span class="token comment">// Update the countdown every 0.1 second</span> <span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Get the current date and time</span> <span class="token keyword">var</span> now <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Calculate the distance between now and the end time</span> <span class="token keyword">var</span> distance <span class="token operator">=</span> endTime <span class="token operator">-</span> now<span class="token punctuation">;</span> <span class="token comment">// Calculate minutes, seconds, and tenths of seconds</span> <span class="token keyword">var</span> minutes <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>distance <span class="token operator">/</span> <span class="token punctuation">(</span><span class="token number">1000</span> <span class="token operator">*</span> <span class="token number">60</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> seconds <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token punctuation">(</span>distance <span class="token operator">%</span> <span class="token punctuation">(</span><span class="token number">1000</span> <span class="token operator">*</span> <span class="token number">60</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> tenths <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token punctuation">(</span>distance <span class="token operator">%</span> <span class="token number">1000</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Format minutes, seconds, and tenths to add leading zeros if needed</span> <span class="token keyword">var</span> formattedMinutes <span class="token operator">=</span> <span class="token punctuation">(</span>minutes <span class="token operator"><</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token string">"0"</span> <span class="token operator">+</span> minutes <span class="token operator">:</span> minutes<span class="token punctuation">;</span> <span class="token keyword">var</span> formattedSeconds <span class="token operator">=</span> <span class="token punctuation">(</span>seconds <span class="token operator"><</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token string">"0"</span> <span class="token operator">+</span> seconds <span class="token operator">:</span> seconds<span class="token punctuation">;</span> <span class="token keyword">var</span> formattedTenths <span class="token operator">=</span> tenths<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>formattedTenths <span class="token operator"><</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> formattedTenths <span class="token operator">=</span> <span class="token string">"0"</span> <span class="token operator">+</span> formattedTenths<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// Display the countdown</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"countdown"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> formattedMinutes <span class="token operator">+</span> <span class="token string">":"</span> <span class="token operator">+</span> formattedSeconds <span class="token operator">+</span> <span class="token string">"."</span> <span class="token operator">+</span> formattedTenths<span class="token punctuation">;</span> <span class="token comment">// If the countdown reaches 00:10, play the audio</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>formattedMinutes <span class="token operator">==</span> <span class="token string">"00"</span> <span class="token operator">&&</span> formattedSeconds <span class="token operator">==</span> <span class="token string">"10"</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">"audio"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// If the countdown is over, display a message</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>distance <span class="token operator"><</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">clearInterval</span><span class="token punctuation">(</span>x<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">"countdown"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">"00:00.0"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// Start the countdown when the page loads</span> window<span class="token punctuation">.</span>onload <span class="token operator">=</span> startCountdown<span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> https://forum.selfhtml.org/self/2024/mar/01/seltsamer-firefox-bug?srt=yes Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2024-03-01T07:41:30Z 2024-03-01T07:41:30Z Seltsamer Firefox-Bug <p>Ich habe mehrere <code>details</code>-Elemente, deren <code>summary</code>s<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> inline nebeneinander stehen sollen, deren Inhalte (<code>iframe</code>s mit Videos in dem Fall) sich aber an derselben Stelle öffnen sollen.</p> <p>(Dabei sorgt JavaScript dafür, dass sich beim Öffnen eines <code>details</code>-Elements dessen Geschwister schließen. Aber das tut hier nichts zur Sache, denke ich.)</p> <p><s>Funktioniert</s>: <a href="https://codepen.io/gunnarbittersmann/pen/NWmWNoJ" lang="en" rel="noopener noreferrer">Ancestors & ghosts</a>.<sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup> <strong>Edit:</strong> Wie Rolf anmerkte, funktioniert schon dieses Beispiel nicht im Firefox – selbes Problem.</p> <p>Nun habe ich das aber <a href="https://codepen.io/gunnarbittersmann/pen/BaEaRoJ" rel="noopener noreferrer">mit etwas Listen-Markup</a>. Funktioniert auch – in Safari und Chromia.</p> <p>In Firefox sitzen die <code>iframe</code>s der ersten Gruppe (“Long Time Coming”) noch richtig; die der zweiten Gruppe (“Born in the U.S.A.”) werden aber zu hoch platziert.</p> <p>Manche Versuche (wie bspw. <code>content: '.'</code>) wirken temporär; nach Seitenreload aber nicht mehr.</p> <p>Findet vielleicht jemand einen Workaround?</p> <p lang="art-x-kwejian">Kwakoni Yiquan</p> <p>PS: Die Videos sind ansehenswert.</p> <p>Die Unterhaltung mit seinem Vater hatte ich aus der Autobiografie auch vorige Woche in meinem Programm <a href="https://gunnarbittersmann.de/programme/zum-wegrennen-geboren" rel="nofollow noopener noreferrer">„Zum Wegrennen geboren“</a>.</p> <div class="signature">-- <br> <em lang="la">Ad astra per aspera</em> </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Mir ist bewusst, dass sich <em lang="en">summaries</em> mit <em>ie</em> schreibt. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p><em lang="en">“We are ghosts or we are ancestors in our children’s lives.”</em> – Bruce Springsteen, intro to “Long Time Coming” <em>(Springsteen on Broadway)</em> <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2024/mar/07/javascript-lasst-sich-nicht-auslagern?srt=yes Matthias 2024-03-07T17:29:57Z 2024-03-07T17:29:57Z Javascript läßt sich nicht auslagern <p>Hallo,</p> <p>Ich habe einen Code geschrieben, der mir eine Anzeigt wenn eine Checkbox aktiviert wird. Das klapt auch soweit ganz gut, nur wenn ich das <script> in die Datei 'boxentest.js' auslagere funktioniert das ganze nicht mehr. (Ja die beiden Dateien liegen im selben Ordner!!) Was mache ich also falsch?</p> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<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>script</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>boxentest.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width<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>title</span><span class="token punctuation">></span></span>Test<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span> Rand: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></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>s1<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rand<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>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span> Schatten: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></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>s2<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Schatten<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>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span> Steg: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></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>s3<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Steg<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>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</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 attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<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>p</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 attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<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>p</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 attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box3<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>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"s1"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"change"</span><span class="token punctuation">,</span> <span class="token keyword">function</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><span class="token keyword">this</span><span class="token punctuation">.</span>checked<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">"box1"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">"Rand ist aktiviert!"</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">"box1"</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><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">"s2"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"change"</span><span class="token punctuation">,</span> <span class="token keyword">function</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><span class="token keyword">this</span><span class="token punctuation">.</span>checked<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">"box2"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">"Schatten ist aktiviert!"</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">"box2"</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><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">"s3"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"change"</span><span class="token punctuation">,</span> <span class="token keyword">function</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><span class="token keyword">this</span><span class="token punctuation">.</span>checked<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">"box3"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">"Steg ist aktiviert!"</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">"box3"</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><span class="token punctuation">)</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> https://forum.selfhtml.org/self/2024/mar/03/frage-zum-wiki-artikel-einstieg?srt=yes J. Behne 2024-03-03T12:17:59Z 2024-03-03T12:17:59Z Frage zum Wiki-Artikel „Einstieg“ <p>Guten Tag, ich bin ein Typ, der etwas Ausgedrucktes zum Erlernen braucht. Der Kurs ist sehr informativ und für mich interessant, daher meine Frage: Gibt es ihn auch in ausdruckbarer Form? Wenn ja, wo? Es geht um https://wiki.selfhtml.org/wiki/HTML/Tutorials/Einstieg</p> https://forum.selfhtml.org/self/2024/mar/09/in-memoriam-matthias-apsel?srt=yes Matthias Scharwies mscharwies@selfhtml.org 2024-03-09T04:06:18Z 2024-03-09T04:06:18Z In Memoriam: Matthias Apsel <p>Guten Morgen!</p> <p>Heute werden es 3 Jahre.</p> <p><a href="https://blog.selfhtml.org/2021/mar/11/besturzt-und-fassungslos-matthias-apsel-ist-gestorben" rel="noopener noreferrer">Bestürzt und Fassungslos – Matthias Apsel ist gestorben</a></p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> https://forum.selfhtml.org/self/2024/mar/09/frage-zum-wiki-artikel-requestanimationframe?srt=yes Thomas Mell 2024-03-09T00:15:47Z 2024-03-09T00:15:47Z Frage zum Wiki-Artikel „requestAnimationFrame“ <p>Die Aussage "Sie können keine eigenen Parameter für diese Funktion bereitstellen." ist falsch.</p> <p>requestAnimationFrame(function () { myFunction(para1, para2); }</p> <p>oder</p> <p>requestAnimationFrame(() => { myFunction(para1, para2); }</p> https://forum.selfhtml.org/self/2024/mar/07/css-grid-mit-autofill-erscheint-linksbundig-kann-man-auch-zentrieren?srt=yes Torsten 2024-03-07T15:29:36Z 2024-03-07T15:29:36Z css: grid mit autofill erscheint linksbündig - kann man auch zentrieren? <p>Hallo Leute,</p> <p>erstmal vielen Dank für die tolle selfhtml-Seite mit den vielen Tutorials und das Ihr hier ein Forum betreibt. Ich habe bereits viel ausprobiert und würde nun gern in einem Bereich meiner Homepage grid und autofill einsetzen wollen. Die Idee der "Responsivität ohne Media queries" finde ich genial. Leider bekomme ich es bei <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/responsive_Raster_ohne_Media_Queries#auto-fill" rel="nofollow noopener noreferrer">diesem Beispiel</a> nicht hin, die einzelnen Elemente zu zentrieren, wenn der Platz dafür vorhanden wäre. Eigentlich sollen die Elemente ja den gesamten Bildschirm ausnutzen, was aber bei bestimmten Fenstergrößen nicht geht. Und in diesem Fall <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:CSS-grid-responsiv-1.html" rel="nofollow noopener noreferrer">hier nochmal im Vollbild</a> wäre es toll, wenn die Elemente nicht auf der linken Seite kleben würden sondern zentriert in der Mitte. Auch bei 2 Elementen würde ich mir wünschen, dass die schön ausgemittelt und zentriert in der Mitte des Bildschirms plaziert würden.</p> <p><em>justify-content: center oder space-evenly</em> kommt meinem Wunsch schon sehr nahe. Aber das "<aside>-Element Top-News" oder ganz unten der "<footer> Kontakt" bleiben trotzdem solange ganz links (und nicht zentriert!), bis genug Platz vorhanden ist und dann eine Reihe hochspringt.</p> <p>Habt Ihr eine Idee? Oder hat man bei Verwendung der Autofill-Option diese Möglichkeiten gar nicht?</p> https://forum.selfhtml.org/self/2024/mar/02/tabellenlayout?srt=yes envoy 2024-03-02T19:00:23Z 2024-03-02T19:00:23Z Tabellenlayout <p>Hallo, ich würde gerne dieses Tabellenlayout umsetzen, siehe table_layout.jpg. Ich habe den Tabellenbereichen über Klassen unterschiedliche Größen zugewiesen. Leider funktioniert es nicht, wenn die Spaltenbreiten unterschiedlich sind. Wie kann ich den Spalten unterschiedliche Breiten zuweisen?</p> <p>Vielen Dank und viele Grüße</p> https://forum.selfhtml.org/self/2024/mar/07/wiki-uneinheitlicher-umgang-mit-leerzeichen-in-komposita?srt=yes Peter 2024-03-07T12:49:03Z 2024-03-07T12:49:03Z Wiki: uneinheitlicher Umgang mit 'Leerzeichen in Komposita' <p>Hallo Leute,</p> <p>Beim Stöberm im CSS-Wiki fällt mir des Öfteren auf, dass Komposita auseinander geschrieben werden, bzw. Bindestriche fehlen ('Deppenlehrzeichen', bekanntes Beispiel:'Ohne Grund Gebühr'). Auch wenn sich das mittlerweile fast überall eingebürgert hat, bleibt es dennoch falsch. Es ist jedoxh auch zu wenig, um jedes Mal einen Bugtracker auszulösen. Gibt es für so etwas nicht eventuell aich eine autmatische Korrektur, die bereits beim Schreiben des Artikels greift?</p> <p>Gruß, Peter</p> https://forum.selfhtml.org/self/2024/mar/07/dropdown-aus-datenbank-fullen?srt=yes Jürg j.staenz@sin.ch 2024-03-07T09:59:02Z 2024-03-07T09:59:02Z DropDown aus Datenbank füllen <p>Hallo</p> <p>ich bin neu in Sachen PHP / HTML.</p> <p>ich möchte ein Dropdown 'Stichworte' aus der Datenbank befüllen (Anfrage funktioniert).</p> <p>2 Fragen:</p> <p>ich möchte an 1. Stelle '< Alle Stichworte >' einfügen (nicht in DB) und dies als detault Wert anzeigen.</p> <p>Wie mache ich das? Was in PHP - was in HTML?</p> <p>Danke für allfällige Hilfe.</p> https://forum.selfhtml.org/self/2024/mar/06/html-und-css-sheets-strukturieren?srt=yes Merlin S 2024-03-06T15:56:21Z 2024-03-06T15:56:21Z HTML- und CSS-Sheets strukturieren <p>Hallo!</p> <p>Ich bin noch Anfänger und wollte fragen, ob ihr Tipps habt, wie ich meine Sheets am Besten strukturiere. Auch wollte ich fragen, ob ich Tabulator und Space problemlos zwischen Tags oder Elementen zum Einrücken etc. verwenden kann. Ich freue mich auf die Antworten. Vielen Dank!</p> <p>Liebe Grüße</p> <p>Merlin</p> <p>aus Wien</p> <p>P.S.: Also ich meine nicht die Struktur der Website selbst, dazu habe ich genug im Wiki gefunden.</p> https://forum.selfhtml.org/self/2024/mar/05/javascript-und-css?srt=yes Matthias Scharwies mscharwies@selfhtml.org 2024-03-05T05:10:32Z 2024-03-05T05:10:32Z JavaScript und CSS <p>Guten Morgen,</p> <p>ich möchte gemeinsam mit euch <a href="https://forum.selfhtml.org/self/2024/mar/01/baustellen-im-wiki-helfende-hande-gesucht/1813827#m1813827" rel="noopener noreferrer">Nr. 5 unserer Baustellen</a> diskutieren:</p> <blockquote> <ol start="5"> <li>   <a href="https://wiki.selfhtml.org/wiki/JavaScript_und_CSS#Siehe_auch" rel="nofollow noopener noreferrer"><strong>JavaScript und CSS</strong></a> <ul> <li>alles rund um das Thema „CSS durch JS Ändern“. Vieles ist mittlerweile durch den Einsatz von custom properties überholt - der Rest müsste sortiert und aktualisiert werden.</li> </ul> </li> </ol> </blockquote> <p>Ich habe angefangen das Tutorial von <a href="/users/35" class="mention registered-user" rel="noopener noreferrer">@molily</a> , das aus dem Jahre 2006-07 stammt, in Einzeltutorials zu zerlegen und zu aktualisieren:</p> <h3>1. <a href="https://wiki-test.selfhtml.org/wiki/JavaScript_und_CSS/CSS-Eigenschaften_setzen" rel="nofollow noopener noreferrer">JavaScript und CSS/CSS-Eigenschaften setzen</a></h3><p>Thema ist das schnelle Ändern von style mit JS und warum man da eigentlich Klassen setzen oder ändern sollte.</p> <p>Deshalb kommt das noch vor das vermeintlich einfachere <code>style.color = 'red'; </code></p> <blockquote> <blockquote> <p>Mir ist z.B. aufgefallen, dass in der Seite nennen wir sie mal <strong>CSS-Manipulation durch JavaScript</strong>, nicht angegeben wurde, dass man mit der Methode add mehrere Klassen gleichzeitig hinzufügen kann.</p> </blockquote> </blockquote> <p>Das ist gefixt!</p> <p>Zum Schluss gibt es einen Abschnitt, der das Setzen von Custom propertys mit <code>setProperty</code>, bzw. das Auslesen mit <code>getPropertyValue()</code> vorstellt.</p> <p>Das ist die grundsätzliche Frage bei diesem Thema: Welche Methoden sollen wir noch empfehlen, wann ist es einfacher, auf Custom properties zu setzen?</p> <p><strong>Könntet ihr den Artikel bitte gegenlesen / redigieren?</strong></p> <h3>2. <a href="https://wiki-test.selfhtml.org/wiki/JavaScript_und_CSS/CSS-Eigenschaften_auslesen" rel="nofollow noopener noreferrer">JavaScript und CSS/CSS-Eigenschaften auslesen</a></h3><p>Dieses Kapitel vergleicht das <em>legacy</em> <code>getComputedStyle</code> mit <code>getBoundingClientRect</code> und <code>computedStyleMap</code> und stellt dann die imho „praktischeren“ Technologien <code>resizeObserver</code>und <code>matchMedia</code> vor.</p> <p>Vorhandene Seiten der Elementreferenz sollen natürlich bleiben; von Seiten wie clientWidth, clientHeight, offsetWidth und offsetHeight muss eine Verlinkung erfolgen!</p> <h4>Exkurs: Wiki-Struktur</h4><p>Da ist mir einfach aufgefallen, wie sich der JavaScript-Bereich in alle Richtungen entwickelt hat.</p> <p>Stefan Münz hatte in der Doku alle Eigenschaften und Methoden auf einer langen Seite angeordnet. <em>→ wird irgendwann zu lang</em></p> <p>Dogma des Wiki war die Auftrennung in einzelne Seiten. Manche der „unwichtigeren“ Eigenschaften wie <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Element/clientWidth" rel="nofollow noopener noreferrer">JavaScript/DOM/Element/clientWidth</a> sind <em>Stubs</em>, von denen auch kein Link zu „ergiebigeren“ Seiten führte. <em>→ man findet bei euch nix!</em></p> <p>2015 trennte @Orlok Node- und Element-Schnittstellen, weil das „ja was ganz anderes sei“. Mittlerweile ist die style-Eigenschaft über HTMLElement zur <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/ElementCSSInlineStyle" rel="nofollow noopener noreferrer">JavaScript/DOM/ElementCSSInlineStyle</a>-Schnittstelle gewandert - Unbedarfte würden das aber wohl doch bei Element suchen und nicht finden. <em>Eine Übersichtsseite mit nur einer Methode sorgt für keine Übersicht.</em></p> <p><em>(Auch das bestehende Tutorial JavaScript/Tutorials/JavaScript und CSS war zwar bei JS, aber nicht bei CSS gelistet - das ist jetzt mein Ziel, das alles sichtbar und vorzeigbar zu präsentieren.)</em></p> <h4><a href="https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/CSS-Eigenschaften_auslesen#computedStyleMap" rel="nofollow noopener noreferrer">computedStylemap</a></h4><p>Ich finde, dass die Methode hier hin gehört - aber eben auch zu CSS Typed OM.</p> <p>Wo soll <code>CSSStyleValue</code> hinführen - zu diesem Beispiel oder einem Grundlagen-Tutorial?</p> <p>Da müsste man noch diskutieren, wie der Übergang aussieht.</p> <h4><a href="https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/CSS-Eigenschaften_auslesen#resizes_mit_resizeObserver" rel="nofollow noopener noreferrer">ResizeObserver</a></h4><p>Da mach' ich noch ein Beispiel!</p> <p><strong>Könntet ihr den Artikel bitte gegenlesen / redigieren?</strong></p> <h3>3. <a href="https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/Stylesheets_dynamisch_wechseln" rel="nofollow noopener noreferrer">JavaScript und CSS/Stylesheets dynamisch wechseln</a></h3><p>Eigentlich eher ein legacy-Artikel, andererseits verwenden wir diese Technologie in unseren fertigen Beispielen, wie <a href="https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/Stylesheets_dynamisch_wechseln#Siehe_auch" rel="nofollow noopener noreferrer">der neue Siehe auch-Abschnitt</a> zeigt.</p> <h3>4. <a href="https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/Stylesheets_dynamisch_%C3%A4ndern" rel="nofollow noopener noreferrer">JavaScript_und_CSS/Stylesheets_dynamisch_ändern</a></h3><p>Das ist ein Stub. Neues Thema sollte ein Tutorial über <strong>CSSOM</strong> und evtl. auch <strong>CSS Typed OM</strong> sein. In der Spec ist dann gleich CSS.escape() mit drin, <a href="https://drafts.csswg.org/css-conditional-3/#the-css-interface" rel="nofollow noopener noreferrer">7.5. The CSS namespace, and the supports() function</a> aber woanders.</p> <p>Inwieweit man das zusammen erklären kann oder sollte, weiß ich nicht! Da würde ich gerne intensiv diskutieren, auch inwieweit wir etwas wie <em>CSS Typed OM,</em> das vom Firefox in den letzten 3 Jahren nicht aufgenommen wurde, behandeln müssen. (Komisches Gefühl, das ein Beispiel im MDN Fehler wirft, weil es die Methode nicht kennt - ich sollte den Browser wechseln!)</p> <p>Das würde ich gerne am 06.03. am Stammtisch diskutieren.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> https://forum.selfhtml.org/self/2024/feb/23/css-typografie-hurenkinder-und-schusterjungen-bei-zeilenumbruch?srt=yes Linuchs 2024-02-23T12:10:09Z 2024-02-23T12:10:09Z CSS-Typografie: Hurenkinder und Schusterjungen bei Zeilenumbruch? <p>Moin,</p> <p>meine Liedtexte versehe ich mit Akkorden, so sieht es aus:</p> <p><a href="/images/f043a37e-d241-11ee-a538-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/f043a37e-d241-11ee-a538-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Die Akkorde am Zeilenende sollen auf die nächste Zeile. Der Akkord steckt in einem inline-block, zum nächsten Buchsteben gibt es KEINE Leerstelle, wieso wird da umgebrochen?</p> <p>Bei Seitenumbrüchen gibt (gab?) es <a href="https://de.wikipedia.org/wiki/Hurenkind_und_Schusterjunge" rel="nofollow noopener noreferrer">Hurenkinder und Schusterjungen</a>. Gibt es sowas für Zeilenumbrüche auch?</p> <p>HTML:</p> <p>bald sind wir ein <b><b class="cur_pointer" onclick="akkorde.src='mp3/akkord_g_dur.mp3';akkorde.play();">G</b></b>Pärchen, / komm und <strong>lass mich nie a-<b><b class="cur_pointer" onclick="akkorde.src='mp3/akkord_d_dur.mp3';akkorde.play();">D</b></b>lleine,</strong> oh no, no, no, no, <b><b class="cur_pointer" onclick="akkorde.src='mp3/akkord_g_dur.mp3';akkorde.play();">G</b></b>no.</p> <pre><code class="block language-css"><span class="token selector">.akkorde b</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.akkorde b b</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> -.5em<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span> .3em<span class="token punctuation">;</span> <span class="token property">font-family</span><span class="token punctuation">:</span> sans-serif<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #f00<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 110%<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2024/mar/01/ki-bildgenerierung-text-absichtlich-falsch?srt=yes Lisa 2024-03-01T12:43:19Z 2024-03-01T12:43:19Z KI Bildgenerierung Text absichtlich falsch? <p>Hallo,</p> <p>kann es sein, dass KI Bildgeneratoren absichtlich keine gewünschten Texte ausgeben?</p> <p>Habs jetzt schon zig mal probiert mit unterschiedlichsten Texten und Buchstaben und es geht nicht.</p> <p>Beispiel: create a modern logo, corpoate identity, from the letters D,P,A and the lettering "Deutsche philosophische Academy"</p> <p>Raus kommt dann so was:</p> <p><a href="/images/fbd335e2-d7c8-11ee-98dd-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/fbd335e2-d7c8-11ee-98dd-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Das müsste für eine KI doch ein Klacks sein, also kann es doch nur Absicht sein, aber warum?</p> <p>lg.</p> https://forum.selfhtml.org/self/2024/jan/07/der-rote-kreis-ist-rund-stehend-oval-und-liegend-oval-je-nach-betriebssystem?srt=yes Günter https://www.peutekunst.de 2024-01-07T14:18:59Z 2024-01-07T14:18:59Z Der rote Kreis ist rund stehend oval und liegend oval je nach Betriebssystem <p>Ein frohes Jahr euch allen! Ich bin dabei, die als problematische Seite genannte zu entwickeln und habe folgendes Problem: Unter jedem Bild ist ein Button platziert, dem ich einen Border und eine Hintergrundfarbe gegeben habe. Meine Erwartung ist einen runden roten Kreis zu sehen in dem ein eingekreistes "I" zu sehen ist. Der Kreis ist zu sehen unter Windows 11 und Ubuntu bei allen Browsern mit denen ich getestet habe. Die gleichen Browser zeigen jedoch unter iOS ein liegendes Oval und unter Android ein stehendes Oval. Ist das ein bekanntes Problem? Mir fehlt jede Idee, an welcher Schraube ich drehen muss, um überall den roten Kreis zu sehen. Bin dankbar für jeden Tipp. Mit freundlichem Gruß Günter</p> https://forum.selfhtml.org/self/2024/feb/29/google-versucht-sehr-alte-seiten-zu-indexieren-die-es-schon-sein-mindestens-10-jahren-nicht-mehr-gibt?srt=yes oxo888oxo 2024-02-29T18:11:53Z 2024-02-29T18:11:53Z Google versucht sehr alte Seiten zu indexieren, die es schon sein mindestens 10 Jahren nicht mehr gibt <p>Hallo</p> <p>In meiner Google Search Console werden mir unter "Seitenindexierung >> Nicht gefunden (404)" recht viele Seiten angezeigt. Das sind alles Unterseiten, meiner Website, die es mal gegeben hat. Inzwischen gibt es diese aber nicht mehr. Und das teilweise schon seit weit mehr als 10 Jahren.</p> <p>Meine Frage ist nun, warum versucht Google immer noch, die uralten Seiten zu indexieren? Macht Google das quasi für immer, wenn es die Seite irgendwann mal gegeben hat? Oder hat das einen anderen Grund?</p> <p>Und dann frage ich mich noch, wie ich damit umgehen soll?</p> <p>Soll ich das einfach ignorieren? Es wirkt sich bei Google doch eher negativ auf die Reputation meiner Website aus, wenn es viele 404-fehler gibt.</p> <p>Gruß Ingo</p> https://forum.selfhtml.org/self/2024/feb/29/weiterleitungen-per-htaccess-in-welcher-reihenfolge?srt=yes oxo888oxo 2024-02-29T18:00:22Z 2024-02-29T18:00:22Z Weiterleitungen per htaccess in welcher Reihenfolge? <p>Hallo</p> <p>Ich habe in meiner .htaaccess-Datei an zwei Stellen Weiterleitungen eingerichtet.</p> <p>Zu Beginn diese hier, um grundsätzlich auf https (ohne www) umzuleiten:</p> <pre><code class="block">RewriteEngine On RewriteCond %{SERVER_PORT} !=443 [OR] RewriteCond %{HTTP_HOST} ^www\.example\.org RewriteRule ^(.*)$ https://example.org/$1 [R=301,L] </code></pre> <p>Und dann weiter unten habe noch noch einzelne Seiten umgeleitet:</p> <pre><code class="block">Redirect 301 /produkte/beispiel-1.php https://example.org/produkte/beispiel-1-neu.php Redirect 301 /produkte/beispiel-2.php https://example.org/produkte/beispiel-1-neu.php </code></pre> <p>Meine Frage ist, ob die Reihenfolge so richtig uns sinnvoll ist. Oder sollte der teil für https (ohne www) unten nach den Umleitungen der einzelnen Seiten kommen?</p> <p>Mir geht es darum, möglichst zu vermeiden, dass ein bestimmter Aufruf zu oft um- bzw. weitergeleitet wird. Auch um es Google möglichst lieb zu machen.</p> <p>Gruß Ingo</p> https://forum.selfhtml.org/self/2024/feb/29/29-02-designing-search-ux-in-2024?srt=yes Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2024-02-29T11:58:55Z 2024-02-29T11:58:55Z 29.02. Designing Search UX In 2024 <p>Heute 19:00 online: <a href="https://smashingconf.com/online-workshops/workshops/search-ux-vitaly-friedman/" rel="nofollow noopener noreferrer">Designing Search UX In 2024</a> (kostenloser Workshop mit Vitaly Friedman)</p> <p><em lang="en">In many products, search is critical, yet too often it’s forgotten or overlooked. Many users heavily rely on search, and investing time and effort into good search is usually a very good investment. So how do people search and what do they expect from a first-class search experience in 2024? And what can we, as designers, do to design better experiences for them?</em></p> <p><em lang="en">In this free session, we’ll explore how to do just that — how to design better autocomplete, how to deal with complex filters and improve sorting, how to design better search results pages and improve the experience for power users.</em></p> <p><em lang="en">Roll up your sleeves: expect plenty of real-life examples, do’s, don’ts and a healthy dose of “Aha!”-moments. Beware: you might never forget what you’ll learn in this session!</em></p> <p lang="art-x-kwejian">Kwakoni Yiquan</p> <div class="signature">-- <br> <em lang="la">Ad astra per aspera</em> </div> https://forum.selfhtml.org/self/2024/feb/28/php-logik-zwei-json-mit-sendedaten-vergleichen-und-differenzen-aufzeigen?srt=yes Tatortreiniger 2024-02-28T11:04:52Z 2024-02-28T11:04:52Z PHP Logik: Zwei JSON mit Sendedaten vergleichen und Differenzen aufzeigen!? <p>Liebe Community,</p> <p>ich habe zwei JSON Datein:</p> <ol> <li>Meine JSON Sendezeiten (exportiert aus meinen Daten) besteht aus timestamp, sender, titel</li> <li>Externe JSON Sendezeiten bestehend aus timestamp, sender, titel</li> </ol> <p>Beispiel:</p> <pre><code class="block language-json"> <span class="token punctuation">{</span> <span class="token property">"Timestamp"</span><span class="token operator">:</span> <span class="token string">"1709586000"</span><span class="token punctuation">,</span> <span class="token property">"Datum"</span><span class="token operator">:</span> <span class="token string">"04.03.2024"</span><span class="token punctuation">,</span> <span class="token property">"Uhrzeit"</span><span class="token operator">:</span> <span class="token string">"22:00"</span><span class="token punctuation">,</span> <span class="token property">"Sender"</span><span class="token operator">:</span> <span class="token string">"HR"</span><span class="token punctuation">,</span> <span class="token property">"Titel"</span><span class="token operator">:</span> <span class="token string">"hessenschau"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> </code></pre> <p>Ich möchte nun meine Json mit der externen JSON vergleichen und Änderungen/Neu Daten angezeigt bekommen. Ich dache zuerst ich könnte mich an dem Titel festhalten. Doch da gibt es z.B. die Tagesschau die mehrfach täglich auf verschiedenen Sendern läuft. Mein zweiter Gedanke war ich erstelle eine Art "HASH" für einen Datensatz zu erstellen, so kann ich einfacher vergleichen.</p> <p>Aber jetzt habe ich einen großen Knoten im Kopf. Wie kann das vergleichen realisieren?</p> <p>array_diff_key?</p> <p>Sicher habt Ihr da bessere Ideen die Datensätze zu vergleichen.</p> <p>Euer Tatortreiniger</p> https://forum.selfhtml.org/self/2024/feb/28/frage-zur-schnittstelle-von-boardgamegeek?srt=yes Passwort 2024-02-28T10:30:16Z 2024-02-28T10:30:16Z Frage zur Schnittstelle von boardgamegeek <p>Hallo</p> <p>Die Seite boardgamegeek bietet eine Schnitstelle in Python an: https://lcosmin.github.io/boardgamegeek/</p> <p>dazu habe ich zwei Fragen: Brauche ich Python auf meinem Webserver, um diese Schnittstelle zu nutzen? Denn das wird bei mir nicht angeboten. Und gibt es eine DAU-Anleitung um auf die BGG-Daten zuzugreifen? :-)</p> <p>Die Quick installl Anleitung auf der verlinkten Seite ist für mich jedenfalls nicht verständlich. Was ist pip? Geht das über SSH?</p> <p>Danke & Gruss</p> https://forum.selfhtml.org/self/2024/feb/28/stoppropagation?srt=yes Linuchs 2024-02-28T04:23:20Z 2024-02-28T04:23:20Z stopPropagation(); <p>Moin,</p> <p>bei meinen Liedtexten kann man zwecks Übung (Singen / Ukulele) eine Textzeile anklicken, dann startet die Audio-Wiedergabe dort.</p> <p><a href="/images/393ce89a-d5f0-11ee-98e8-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/393ce89a-d5f0-11ee-98e8-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Nun möchte ich noch eins draufsetzen und die roten Akkorde anklicken, damit sie erklingen.</p> <p>Doch dann beginnt die Textzeile neu, das ist nicht erwünscht.</p> <p>Ist stopPropagation() das geeignete Mittel und wie wende ich es an?</p> <p>So funktioniert es nicht:</p> <pre><code class="block language-js"><span class="token operator"><</span>b<span class="token operator">></span><span class="token operator"><</span>b <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"cur_pointer"</span> onclick<span class="token operator">=</span><span class="token string">"akkorde.src='../mp3/akk_C_dur.mp3';akkorde.play();this.stopPropagation();"</span><span class="token operator">></span><span class="token constant">C</span><span class="token operator"><</span><span class="token operator">/</span>b<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>b<span class="token operator">></span> </code></pre> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2024/feb/27/werbelink-dienstkleidung-fur-selfhtmler?srt=yes Matthias Scharwies mscharwies@selfhtml.org 2024-02-27T18:09:33Z 2024-02-27T18:09:33Z Werbelink: Dienstkleidung für SELFHTMLer <p>Servus!</p> <p>Grad auf Mastodon gefunden: <a href="https://bildung.social/@heydon@front-end.social/112004524755176933" rel="nofollow noopener noreferrer">https://bildung.social/@heydon@front-end.social/112004524755176933</a></p> <p>Large Heydon Collider schrub:</p> <blockquote> <p>I wore this to a pub and the barman said it gave him disturbing flashbacks to his previous job </p> </blockquote> <p><a href="/images/2fc50950-d59b-11ee-b6b6-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/2fc50950-d59b-11ee-b6b6-9c6b00263d9f.png?size=medium" alt="div hoodie" loading="lazy"></a></p> <p><a href="https://webbed-briefs.teemill.com/product/divs-hoodie/" rel="nofollow noopener noreferrer">https://webbed-briefs.teemill.com/product/divs-hoodie/</a></p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Die Signatur findet sich auf der Rückseite des Beitrags. </div> https://forum.selfhtml.org/self/2024/feb/23/sticky-header-beim-scrollen-logo-verkleinern?srt=yes Jensen 2024-02-23T18:28:52Z 2024-02-23T18:28:52Z Sticky Header beim Scrollen Logo verkleinern <p>Hallo, bin neu im Forum und habe sofort eine Frage ;-)</p> <p>Ich habe ein Codeschnipsel, mit dem ich einen Sticky-Header für mein Logo + Menü erstellt habe, das beim Scrollen in der Höhe kleiner wird. Es funktioniert gut.</p> <p>Jedoch möchte ich erreichen, dass auch das Logo darin sich mit verkleinert. Ist das überhaupt anhand des bestehenden Codes möglich?</p> <pre><code class="block language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span> <span class="token property">--logo-oben-tagline-height</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span> <span class="token property">--logo-oben-tagline-inside-height</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span> <span class="token property">--header-height-difference</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> <span class="token function">var</span><span class="token punctuation">(</span>--logo-oben-tagline-height<span class="token punctuation">)</span> - <span class="token function">var</span><span class="token punctuation">(</span>--logo-oben-tagline-inside-height<span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">--logo-oben-tagline-bg</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#logo-oben-tagline</span> <span class="token punctuation">{</span><span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--logo-oben-tagline-height<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> sticky<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> <span class="token function">var</span><span class="token punctuation">(</span>--header-height-difference<span class="token punctuation">)</span> * -1 <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/* Multiply by -1 to get a negative value */</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token comment">/* Other */</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--logo-oben-tagline-bg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 2px 10px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span> 0.1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 999 <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#logo-oben-tagline .inside</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span>1200px<span class="token punctuation">;</span> <span class="token property">max-width</span><span class="token punctuation">:</span>1200px<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span>auto<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span>auto<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--logo-oben-tagline-inside-height<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> sticky<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token comment">/* Other */</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#logo-oben-tagline img</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--logo-oben-tagline-inside-height<span class="token punctuation">)</span> - 20px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Über jede Hilfe / Ansatz wäre ich dankbar.</p> <p>Viele Grüße Jensen</p> https://forum.selfhtml.org/self/2024/feb/19/geloschte-webseite-wiederfinden?srt=yes Ich 2024-02-19T17:03:14Z 2024-02-19T17:03:14Z Gelöschte Webseite wiederfinden <p>guten Tag, ich suche eine Webseite, die ich vor einigen Wochen/Monaten noch im iNet gesehen habe. Nun ist sie verschwunden. Leider weiß ich keine URL. Wie kann man die Seite über Archive wiederfinden?</p> <p>Es geht um einen Typen Namens Prof. Dr. Florian Ebrecht und um Wohnungswirtschaft.</p> <p>Es war die Seite seines Unternehmens.</p> <p>mfG</p> https://forum.selfhtml.org/self/2024/feb/26/mobiles-menu-funktioniert-nicht-richtig?srt=yes Joergi 2024-02-26T02:57:22Z 2024-02-26T02:57:22Z Mobiles Menü funktioniert nicht richtig <p>Hallo zusammen,</p> <p>ich versuche zur Zeit, ein mobile Menü für meine Homepage zu erstellen. Dazu habe ich den untenstehenden freien Code gefunden und entsprechend modifiziert. Auf einem normalen Heimcomputer funktioniert das ganze auch einwandfrei. Wenn man z.B. über "Dropdown 1" mit der Maus fährt, öffnet sich das Untermenü. Beim Verlassen schließt es sich wieder.</p> <p>Auf mobilien Geräten ist das anders. Da muss man auf den entsprechenden Untermenüpunkt klicken. Dieser öffnet sich auch problemlos. Jedoch können die dann nachfolgenden Menüpunkte nicht mehr korrekt angewählt. Klickt man z.B. nach dem Öffnen von Dropdown 1 auf Drowdown 2, schließt sich Dropdown 1 und die Datei "9.htm" wird ausgeführt. Normalerweise sollte sich aber dann nur Dropdown 2 öffnen. Gibt es eine Möglichkeit, das zu beheben? Vielen Dank im voraus für Eure Hilfe. Hier der Code:</p> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=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>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">body</span> <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">font-family</span><span class="token punctuation">:</span>Arial<span class="token punctuation">}</span> <span class="token selector">.topnav</span> <span class="token punctuation">{</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #333<span class="token punctuation">;</span> <span class="token property">max-width</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span>9999<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.topnav a</span> <span class="token punctuation">{</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #f2f2f2<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 14px 16px<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 17px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.active</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #04AA6D<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.topnav .icon</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">.dropdown</span> <span class="token punctuation">{</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown .dropbtn</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 17px<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">outline</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 14px 16px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">font-family</span><span class="token punctuation">:</span> inherit<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 punctuation">}</span> <span class="token selector">.dropdown-content</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 property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #f9f9f9<span class="token punctuation">;</span> <span class="token property">min-width</span><span class="token punctuation">:</span> 160px<span class="token punctuation">;</span> <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0px 8px 16px 0px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown-content a</span> <span class="token punctuation">{</span> <span class="token property">float</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 12px 16px<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.topnav a:hover, .dropdown:hover .dropbtn</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #555<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown-content a:hover</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown:hover .dropdown-content</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.topnav a:not(:first-child), .dropdown .dropbtn</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">.topnav a.icon</span> <span class="token punctuation">{</span> <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.topnav.responsive</span> <span class="token punctuation">{</span><span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.topnav.responsive .icon</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.topnav.responsive a</span> <span class="token punctuation">{</span> <span class="token property">float</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.topnav.responsive .dropdown</span> <span class="token punctuation">{</span><span class="token property">float</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.topnav.responsive .dropdown-content</span> <span class="token punctuation">{</span><span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.topnav.responsive .dropdown .dropbtn</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</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 special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span>fixed<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span>8000<span class="token punctuation">;</span></span><span class="token punctuation">"</span></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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>topnav<span class="token punctuation">"</span></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>myTopnav<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 attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1.htm<span class="token punctuation">"</span></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>active<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<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>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>2.htm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>News<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>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>3.htm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Contact<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>div</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>dropdown<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>button</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>dropbtn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Dropdown 1<span class="token entity named-entity" title="&nbsp;">&nbsp;</span><span class="token entity named-entity" title="&nbsp;">&nbsp;</span>&#9660 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</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>fa fa-caret-down<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>i</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 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><span class="token punctuation">"</span>dropdown-content<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 attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4.htm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 1<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>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>5.htm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 2<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>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>6.htm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 3<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>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>div</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>dropdown<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>button</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>dropbtn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Dropdown 2<span class="token entity named-entity" title="&nbsp;">&nbsp;</span><span class="token entity named-entity" title="&nbsp;">&nbsp;</span>&#9660 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</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>fa fa-caret-down<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>i</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 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><span class="token punctuation">"</span>dropdown-content<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 attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>7.htm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 4<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>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>8.htm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 5<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>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>9.htm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 6<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>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>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>10.htm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<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>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>javascript:void(0);<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span>15px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></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>icon<span class="token punctuation">"</span></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">myFunction</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>☰<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>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>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">padding-top</span><span class="token punctuation">:</span>50px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></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>Responsive Topnav with Dropdown<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>p</span><span class="token punctuation">></span></span>Resize the browser window to see how it works.<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>p</span><span class="token punctuation">></span></span>Hover over the dropdown button to open the dropdown menu.<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>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">function</span> <span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> x <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"myTopnav"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>x<span class="token punctuation">.</span>className <span class="token operator">===</span> <span class="token string">"topnav"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> x<span class="token punctuation">.</span>className <span class="token operator">+=</span> <span class="token string">" responsive"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> x<span class="token punctuation">.</span>className <span class="token operator">=</span> <span class="token string">"topnav"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> https://forum.selfhtml.org/self/2024/feb/25/mathematik-zum-wochenende?srt=yes Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2024-02-25T07:21:49Z 2024-02-25T07:21:49Z Mathematik zum Wochenende <p><img src="/images/5bb2481e-d3ae-11ee-921b-9c6b00263d9f.jpg" alt="" loading="lazy"></p> <p>Vier Quadrate. Wie groß ist die grüne Fläche?</p> <p lang="art-x-kwejian">Kwakoni Yiquan</p> <div class="signature">-- <br> <em lang="la">Ad astra per aspera</em> </div> https://forum.selfhtml.org/self/2024/feb/25/27-02-smashing-meets-the-future-of-design-systems?srt=yes Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2024-02-25T07:33:13Z 2024-02-25T07:33:13Z 27.02. Smashing Meets: the Future of Design Systems <p>Am Dienstag, 27.02. um 17:00 MEZ live im Netz:</p> <p lang="en"><a href="https://smashingconf.com/meets-future-design-systems" rel="nofollow noopener noreferrer">The Future of Design Systems</a>: the state of Design Systems and tools, and how AI impacts the future development and management of Design Systems.</p> <p lang="art-x-kwejian">Kwakoni Yiquan</p> <div class="signature">-- <br> <em lang="la">Ad astra per aspera</em> </div> https://forum.selfhtml.org/self/2024/feb/21/video-tipp-heydon-pickering-uber-you-dont-know-your-users-and-never-will?srt=yes Matthias Scharwies mscharwies@selfhtml.org 2024-02-21T05:30:30Z 2024-02-21T05:30:30Z Video-Tipp: Heydon Pickering über You don't know your users (and never will) <p>Servus!</p> <p>Grad auf <a href="https://bildung.social/@heydon@front-end.social/111936293018525222" rel="nofollow noopener noreferrer">Mastodon</a> gefunden:</p> <blockquote> <p> I will be speaking at #AxeCon this Wednesday (tomorrow) at 2pm (GMT)</p> </blockquote> <blockquote> <p>My talk is titled <em>The Folly Of Chasing Demographics</em></p> </blockquote> <blockquote> <p>Here is a promo I made...</p> </blockquote> <p><a href="https://vimeo.com/913355854" rel="nofollow noopener noreferrer">https://vimeo.com/913355854</a></p> <p>You don't know your users (and never will)</p> <p>Der Vortrag ist <strong>schon heute um 13:00 unserer Zeit</strong>! (2pm GMT)</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Die Signatur findet sich auf der Rückseite des Beitrags. </div> https://forum.selfhtml.org/self/2024/feb/19/svg-kein-glow-effekt-bei-horizontaler-linie-warum?srt=yes spunky 2024-02-19T09:10:16Z 2024-02-19T09:10:16Z SVG: kein glow-Effekt bei horizontaler Linie, warum? <p>Hallo,</p> <p>Ich möchte eine SVG-Linie mit fließendem und leuchtendem Effekt erstellen. Dies funktioniert auch für Pfadlinien, aber nicht für horizontale oder vertikale Linien. Sobald ich den Filter (filter: url(#glow)") in den letzten beiden Linien hinzufüge, werden die Linien nicht mehr angezeigt. Wie kann man das Problem lösen?</p> <p>Hat jemand eine andere oder bessere Idee für einen Fließ- und Glüheffekt?</p> <p>Danke.</p> <pre><code class="block"><html style="margin: 0; background: #000;"><body> <svg viewBox="0 0 600 600" stroke-linecap="round" fill-opacity="0"> <defs> <filter id="glow" x="-50%" y="-50%" width="200%" height="200%"> <fegaussianblur class="blur" result="coloredBlur" stddeviation="5"></fegaussianblur> <femerge> <femergenode in="coloredBlur"></femergenode> <femergenode in="coloredBlur"></femergenode> <femergenode in="coloredBlur"></femergenode> <femergenode in="SourceGraphic"></femergenode> </femerge> </filter> </defs> /* sinus */ <g class="svgWrapper" transform="translate(300,275)"> <path id="svgWrapper1" class="exampleGlow" d="M100,250 C200,0 300,500 400,250" stroke-width=15 stroke=#800 stroke-dasharray=0 stroke-dashoffset=100 filter=url(#glow) transform='translate(-250,-200)'/> </g> <g class="svgWrapper" transform="translate(300,275)"> <path id="svgWrapper2" class="exampleGlow" d="M100,250 C200,0 300,500 400,250" stroke-width=8 stroke=#f00 stroke-dasharray=50,50 stroke-dashoffset=100 filter=url(#glow) box-shadow=0px transform='translate(-250,-200)' style="animation: move 1.0s linear infinite"/> </g> /* horizontal */ <g class="svgWrapper" transform="translate(300,400)"> <path class="exampleGlow" d="M100,250 H400" style="stroke-width: 15; stroke: #008; stroke-dasharray: 0; stroke-dashoffset: 100;" transform="translate(-250,-200)"/> </g> <g class="svgWrapper"> <path class="exampleGlow" d="M150,450 H450" style="stroke-width: 8; stroke: #00f; stroke-dasharray: 75 25; stroke-dashoffset: 100; animation: move 2.0s linear infinite; box-shadow: 0px;"/> </g> </svg> <style> @keyframes move { 100% {stroke-dashoffset: 0; box-shadow: 0px 0px 50px rgba(255, 255, 255, 1);} } @keyframes glow { from {box-shadow: 0px;} to {box-shadow: 0px 0px 50px rgba(255, 255, 255, 1);} } </style> </body> </html> </code></pre> https://forum.selfhtml.org/self/2024/feb/23/after-pseudoelement-mittig-zu-element-platzieren?srt=yes Tobias 2024-02-23T17:15:50Z 2024-02-23T17:15:50Z ::After-Pseudoelement mittig zu Element platzieren <p>Hallo ihr Lieben,</p> <p>ich bräuchte einmal Hilfe beim Gestalten einer Webseite mit CSS. Ich habe dort Profilbilder von Menschen, auf die man klicken soll. Dann öffnet sich deren Profil:</p> <p><a href="/images/536316e8-d26e-11ee-a0ff-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/536316e8-d26e-11ee-a0ff-9c6b00263d9f.png?size=medium" alt="Screenshot der beabsichtigten Webseite" title="Screenshot Profilbild" loading="lazy"></a></p> <p>Ich habe ein ::after Pseudoelement zur "Profilbild"-Klasse der Bilder (= img in figure, erzwingt wordpress so) erstellt. Darin ist der content "-> Profil". Ich möchte jetzt, dass der Schriftzug immer mittig zum Foto angezeigt wird.</p> <p>Momentan sieht meine Notlösung wie folgt aus:</p> <pre><code class="block language-css"><span class="token selector">.Profilbild</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">transition-duration</span><span class="token punctuation">:</span> 0.2s<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.Profilbild img</span> <span class="token punctuation">{</span> transition-duration 0.2s<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.Profilbild::after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">'→ Profil'</span><span class="token punctuation">;</span> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'GrueneType'</span><span class="token punctuation">;</span> <span class="token property">align-self</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 37%<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">transition-duration</span><span class="token punctuation">:</span> 0.2s<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.Profilbild:hover::after</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> larger<span class="token punctuation">;</span> <span class="token property">transition-duration</span><span class="token punctuation">:</span> 0.2s<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.Profilbild img:hover</span> <span class="token punctuation">{</span> <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0px 5px 15px -5px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.8<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.01<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transition-duration</span><span class="token punctuation">:</span> 0.2s<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Das ist jetzt aber nicht optimal, da sich die width des <div>-containers je nach viewport verändert, sodass der Abstand von links sich auf die Position im <img> auswirkt. Manchmal ist der Textzug weiter links, mal mittiger.</p> <p>Habt ihr eine bessere Lösung, die an den effekt von text-align: center herankommt?</p> <p>Vielen Dank schon einmal!</p> https://forum.selfhtml.org/self/2024/feb/06/private-anfrage-erhalten-wie-dreht-man-die-uberschrift?srt=yes Rolf B 2024-02-06T09:56:31Z 2024-02-06T09:56:31Z Private Anfrage erhalten: Wie dreht man die Überschrift <p>Hallo alle,</p> <p>ich hatte eine Anfrage per PN. Darin wurde um Hilfe für ein Layout dieser Art gebeten:</p> <p><img src="https://forum.selfhtml.org/images/7f441c46-c466-11ee-bf3c-9c6b00263d9f.jpg" alt="Layoutdarstellung" loading="lazy"></p> <p>Der Headerbereich war als SVG dargestellt. An Hand einer @media-Abfrage sollte bei genügend breitem Bild der Header links an die Seite rücken. Ich wurde gefragt, wie man das im SVG hinbekommt.</p> <p>Da sich die fragende Person direkt an mich gewendet hat, nenne ich keine Namen. Aber ich möchte meinen Lösungsvorschlag vorstellen, falls es weitere Ideen dazu gibt.</p> <p>Es wäre sicherlich irgendwie machbar gewesen, mit @media-Abfragen im SVG Element zu arbeiten. Man hätte das SVG auch rotieren können. Das fand ich aber beides wenig responsiv und vor allem nicht zugänglich (bzw. man hätte den SVG Inhalt als alt-Text doppeln müssen). Deswegen habe ich Abstand davon genommen und eine reine HTML Lösung vorgeschlagen.</p> <p>Normalfall: schmaler Viewport. Header steht oben.</p> <p>Enhancement-Fall: breiter Viewport. Header kommt nach links und wird senkrecht gestellt.</p> <p>Dazu habe ich:</p> <ul> <li>den Body als Grid layoutet</li> <li>bei breitem Bild den head-Bereich nach links gestellt</li> <li>mit writing-mode:vertical-rl und text-orientation:sideways die Überschrift senkrecht gestellt</li> <li>mit rotate:180deg dafür gesorgt, dass sie so herum steht, wie sich der Autor das vorstellt. Mit writing-mode und text-orientation habe ich das nicht lösen können.</li> </ul> <p>Fixe Abmessungen, die ich für eine SVG Implementierung gebraucht hätte, entfallen damit. Und der Text im Header kann obendrein noch umbrechen, wenn der Viewport noch schmaler wird.</p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100vh - 16px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">grid</span><span class="token punctuation">:</span> <span class="token string">"head"</span> auto <span class="token string">"main"</span> 1fr <span class="token string">"footer"</span> auto / 1fr<span class="token punctuation">;</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> 50em<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">grid</span><span class="token punctuation">:</span> <span class="token string">"head main"</span> 1fr <span class="token string">"head footer"</span> auto / auto 1fr<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">header</span> <span class="token punctuation">{</span> <span class="token property">writing-mode</span><span class="token punctuation">:</span> vertical-rl<span class="token punctuation">;</span> <span class="token property">rotate</span><span class="token punctuation">:</span> 180deg<span class="token punctuation">;</span> <span class="token property">text-orientation</span><span class="token punctuation">:</span> sideways<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p><strong>Nachtrag:</strong> text-orientation:sideways scheint unnötig, es gibt aber genügend Zeichen, die ohne diese Angabe nicht mitgedreht werden.</p> <p>Ja, den body-margin habe ich als magic number drin, kann man verbessern. Den footer habe ich in meinem Fiddle noch mit drin, für die Attributierung meiner Textquelle.</p> <p><a href="https://jsfiddle.net/Rolf_b/eouj1L39/" rel="noopener noreferrer">So sieht's aus</a></p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2024/feb/22/filezilla-3-64-und-3-66-ubuntu-fehler-beim-laden-der-warteschlange?srt=yes Linuchs 2024-02-22T14:27:50Z 2024-02-22T14:27:50Z Filezilla 3.64 und 3.66 (Ubuntu): Fehler beim Laden der Warteschlange <p>Moin,</p> <p>sowohl bei Version 3.64 und der heute entpackten 3.66 erscheint beim Start und Beenden diese Meldung:</p> <p><a href="/images/c16f92c4-d18d-11ee-96b4-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/c16f92c4-d18d-11ee-96b4-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Was könnte der Grund sein? Die Datei hat das Datum</p> <p><a href="/images/0a61608e-d18e-11ee-b3e9-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/0a61608e-d18e-11ee-b3e9-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>und die Rechte</p> <p><a href="/images/6019afd6-d18e-11ee-9ac5-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/6019afd6-d18e-11ee-9ac5-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2024/feb/19/javascript-warum-hat-safari-probleme-mit-const?srt=yes j.j. moz@jeka.info 2024-02-19T20:13:27Z 2024-02-19T20:13:27Z Javascript: Warum hat Safari Probleme mit const? <p>Hallo!</p> <p>Nach über 20 Jahren schau ich hier mal wieder rein.</p> <p>Fast ein Jahr lief ein kleiner Internetauftritt problemlos, bis ich auf die idee gekommen bin, in der Scriptdatei einige <code>var</code> durch <code>const</code> zu ersetzen. <strong>Getestet mit Chromium und Firefox</strong>, alles ok.</p> <p>Es hat acht Wochen gedauert, bis aufgefallen ist, daß in Safari das komplette Script ignoriert wird (Grundfunktionen brauchen nur CSS). Ich hab keinen Mac und kein Iphone und prüfe Safari lediglich mit online-Scrennshots, was Zeitaufwendig ist und ich wegen der Banalität der Änderung wohl für überflüssig gehalten habe (jajahaha...).</p> <p>Frage: Kennt jemand das Problem? Bei meinen Recherchen bin ich auf einige Ergebnisse gekommen, aber nicht schlauer geworden.</p> <p>Das Schript ist hier: <code>peter-hindelang.de/Bilder/script.js</code> Wenn man von den ersten sechs <code>var</code> eine oder mehrere durch <code>const</code> ersetzt, steigt Safari aus.</p> <p>Es ist mir nicht gelungen, das Problem durch Versuch und Irrtum einzugrenzen. Die Welt wird auch mit <code>var</code> nicht untergehen.</p> https://forum.selfhtml.org/self/2024/feb/22/hilfe-vollkommen-unbekannte-sprache-im-firefox-tablet?srt=yes Linuchs 2024-02-22T14:55:02Z 2024-02-22T14:55:02Z Hilfe! Vollkommen unbekannte Sprache im Firefox (Tablet) <p>Moin,</p> <p>irgendwann habe ich mit ungelenken Fingern eine Schaltfläche berührt und die Sprache des Firefox auf dem Samsung-Tablet (Android 6.0.1) verstellt. So sieht es aus:</p> <p><a href="/images/1ada5a02-d192-11ee-8011-9c6b00263d9f.JPG" rel="noopener noreferrer"><img src="/images/1ada5a02-d192-11ee-8011-9c6b00263d9f.JPG?size=medium" alt="" loading="lazy"></a></p> <p>Kann mir bitte jemand im „Blindflug“ zur deutschen Sprache (meinetwegen auch englisch) zurückhelfen?</p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2024/feb/06/wie-umrahmt-man-zeichen?srt=yes Linuchs 2024-02-06T10:10:43Z 2024-02-06T10:10:43Z Wie umrahmt man Zeichen? <p>Moin,</p> <p>ich habe in Erinnerung, dass man Zeichen umrahmen kann. Etwa, wenn sich das Zeichen kaum vom Hintergrund (vorgegebene Boomwhacker-Farben) abhebt:</p> <p><a href="/images/51b8a672-c4d7-11ee-9a45-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/51b8a672-c4d7-11ee-9a45-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Mir fehlt das Stichwort für die Recherche. border oder shadow scheint es nicht zu sein.</p> <p>Oder brauche ich da entspr. Schriftfonts?</p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2024/feb/19/firefox-auf-dem-tablet-wie-javascript-einschalten-suche-tablet-mit-linux?srt=yes Linuchs 2024-02-19T10:48:15Z 2024-02-19T10:48:15Z Firefox auf dem Tablet - wie Javascript einschalten? | Suche Tablet mit Linux <p>Tablet: Samsung Galaxy SM-T805 Android 6.01</p> <p>Firefox: Version kann ich nicht abfragen, habe versehentlich eine fremde Sprache angetippt, so sieht es aus. Wie komme ich im Blindflug nach D zurück?</p> <p><a href="/images/c8e26f64-cf11-11ee-a46c-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/c8e26f64-cf11-11ee-a46c-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Moin,</p> <p>für meine eigenen Webseiten mit mehreren Audio-Spuren und/oder Video suche ich eine Möglichkeit, die auf dem Tablet lokal anzuschauen und anzuhören.</p> <p>JS wird benötigt, um mehrere Audio- Spuren synchron zu starten und auch, um die Texte à la Karaoke zu markieren (problematische Seite).</p> <p>Wie kann ich im Android-Firefox Javascript aktivieren?</p> <p>Zusatzfrage: Bin bereit, ein neues Tablet zu kaufen, Budget 250€. Gibt's sowas mit Linux(Ubuntu). Dieses Vordrängeln von Google bin ich leid.</p> <p>In der Übersicht wird Firefox zensiert zu „Internet“.</p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2024/feb/21/externe-festplatte-wird-nicht-erkannt?srt=yes Markus 2024-02-21T15:33:04Z 2024-02-21T15:33:04Z externe Festplatte wird nicht erkannt <p>Hallo,</p> <p>wenn ich meine Samsung SSD T5 Festplatte an meinen Windows 11 PC anschließe, wird sie nicht erkannt (nicht im Explorer aufgelistet). Woran kann dies liegen?</p> https://forum.selfhtml.org/self/2024/feb/21/mittels-micrsoft-graph-api-einen-kalendereintrag-fur-einen-benutzer-erstellen?srt=yes KevinB 2024-02-21T10:11:27Z 2024-02-21T10:11:27Z Mittels Micrsoft Graph API einen Kalendereintrag für einen Benutzer erstellen <p>Hallo,</p> <p>wir werden bald auch Mitglied der MS Sekte und wechseln zu O365. Um unsere bisherigen intern wunderbar funktionierenden Dienste weiter nutzen zu können, bin ich auf der Suche, wie ich einen Kalendereintrag für einen Benutzer über die Microsoft Graph API erstellen kann.</p> <p>Die APP-Registrierung ist erfolgt und die Berechtigung erteilt. Der Zugriff bspw. um den Benutzernamen über die Mail-Adresse zu bekommen funktioniert auch schonmal.</p> <p>Der Code dafür sieht bspw wie folgt aus:</p> <pre><code class="block">require_once '../vendor/autoload.php'; // Path to Microsoft Graph SDK and OAuth2 Client library use Microsoft\Kiota\Authentication\Oauth\ClientCredentialContext; use Microsoft\Kiota\Abstractions\ApiException; use Microsoft\Graph\Core\Authentication\GraphPhpLeagueAuthenticationProvider; use Microsoft\Graph\GraphServiceClient; $tokenContext = new ClientCredentialContext( $tenantId, $clientId, $clientSecret); $graphServiceClient = new GraphServiceClient($tokenContext); try { $user = $graphServiceClient->users()->byUserId('max.mustermann@example.com')->get()->wait(); echo "User Name = {$user->getDisplayName()} <br/>"; } catch (ApiException $ex) { echo "Fehler: ".$ex->getError()->getMessage(); exit; } </code></pre> <p>Aber der folgende Versuch einen Kalendereintrag zu schreiben</p> <pre><code class="block">$requestBody = new Event(); $requestBody->setSubject('Let\'s go for lunch'); $body = new ItemBody(); $body->setContentType(new BodyType('hTML')); $body->setContent('Does noon work for you?'); $requestBody->setBody($body); $start = new DateTimeTimeZone(); $start->setDateTime('2024-02-22T12:00:00'); $start->setTimeZone(new DateTimeZone('Europe/Berlin')); $requestBody->setStart($start); $end = new DateTimeTimeZone(); $end->setDateTime('2024-02-22T13:00:00'); $end->setTimeZone(new DateTimeZone('Europe/Berlin')); $requestBody->setEnd($end); $location = new Location(); $location->setDisplayName('Harry\'s Bar'); $requestBody->setLocation($location); $result = $graphServiceClient->users()->byUserId('max.mustermann@example.com')->events()->post($requestBody, $requestConfiguration)->wait(); </code></pre> <p>erzeugt den Fehler <code>Fatal error: Uncaught Error: Class 'Event' not found</code></p> <p>Was habe ich falsch gemacht oder vergessen? In Beispiele von MS sind da leider nicht erleuchtend.</p> <p>LG KevinB</p> https://forum.selfhtml.org/self/2024/feb/17/duplikate-beim-kopieren?srt=yes Gerhard 2024-02-17T16:13:16Z 2024-02-17T16:13:16Z Duplikate beim Kopieren <p>Hallo,<br> immer wieder passiert folgendes.<br> Beim Kopieren von Dateien eines Verzeichnisses in ein anderes, garantiert leeres Verzeichnis kommt die Meldung, dass eine Datei bereits vorhanden ist.<br> Wie kann dies passieren?</p> https://forum.selfhtml.org/self/2024/feb/19/rechner-platt-machen?srt=yes Hanno 2024-02-19T09:04:35Z 2024-02-19T09:04:35Z Rechner "platt" machen <p>Hi,<br> ich habe einen gebrauchten Laptop geschenkt bekommen, auf dem Unix und Windows installiert ist.<br> Ich wollte nun beides deinstallieren und den Rechner neu partitionieren. Am Deinstallieren bin ich schon gescheitert.<br> Dann habe ich unter Windows versucht, die Partitionen zu löschen und neu aufzuteilen.<br> Leider ließen sich einige nicht löschen.<br> Wie komme ich zu einem sauberen Laptop, auf dem ich dann Windows installieren kann (die Unix-Fans mögen mir verzeihen)?</p> https://forum.selfhtml.org/self/2024/feb/16/click-event-auf-datalist?srt=yes Nico R. 2024-02-16T11:23:57Z 2024-02-16T11:23:57Z click-Event auf datalist <p>Hallo allerseits,</p> <p>ich versuche, per JS einen per Klick ausgewählten Wert aus einer Dataliste zu erhalten. Hört sich eigentlich banal an, aber ich kriegs nicht hin.</p> <p>Ich habe also ein input-Feld mit einer angehängten datalist. Den Formular-Button zur Weiterverarbeitung möchte ich nur einblenden, wenn wirklich ein Wert aus der Dataliste ausgewählt wurde. Das funktioniert auch, wenn ich den Wert nach dem Tippen per Eingabetaste auswähle. Offenbar bezieht sich das keyup-Event - obwohl ich mich ja eigentlich in der datalist befinde - auf das input-Feld.</p> <p>Beim click auf die datalist verhält sich das offenbar anders. Genauer gesagt tut sich hier gar nichts. Mausaktionen werden von der datalist komplett ignoriert. Die Lösung wäre <strong>selectionchange</strong>, aber das kann ja offenbar nur der Firefox.</p> <p>Hier mein Versuchsscript: <a href="https://fsv-optik.de/tests/datalist.html" rel="nofollow noopener noreferrer">https://fsv-optik.de/tests/datalist.html</a></p> <p>Vielleicht könnt ihr mir ja wieder auf die Sprünge helfen.</p> <p>Schöne Grüße</p> <p>Nico</p> https://forum.selfhtml.org/self/2024/feb/18/viewport-problem-darstellung-website-safari?srt=yes mikhtml24 2024-02-18T10:24:01Z 2024-02-18T10:24:01Z Viewport/Problem Darstellung Website Safari <p>Hallo, ich bin neu im Forum weil ich seit Wochen mit einem Problem kämpfe, das ich nicht lösen kann. Ich habe eine Website erstellt (aus einem Template) und alles funktioniert bestens bis auf ein wichtiges Detail.</p> <p><a href="/images/0cf2ee2a-ce47-11ee-89db-9c6b00263d9f.jpg" rel="noopener noreferrer"><img src="/images/0cf2ee2a-ce47-11ee-89db-9c6b00263d9f.jpg?size=medium" alt="Verschiedene dynamische Viewports" loading="lazy"></a></p> <p>Wenn ich die Website öffne stimmt alles und das Menü/Logo werden korrekt angezeigt, auch der Fuillscreen Hintergrund. Wenn ich nun nach unten scrollen und dann eine Site öffne, paßt sich die Website nicht an den neuen Viewport an sondern bleibt im "alten" dadurch wandert das Menü/Logo sowie das Fullscreen Image nach oben und stimmt nicht mehr. Im style.css habe ich</p> <p>.section.fullscreen { min-height: 100vh } verwendet und auf den Websites</p> <p>meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover</p> <p>Ich habe auch gelesen, daß es für Safari svh und andere Werte gibt, aber wie wendet man sie an? Wenn ich height: 100vh; und height: 100 svh, im css angebe dann passiert gar nichts.</p> <p>Kann mir jemand helfen, dieses Problem zu lösen bitte? Die Website ist aus diesem Grund seit Wochen nicht online...</p> https://forum.selfhtml.org/self/2024/feb/18/neueste-version-von-lampp-lokal-installiert-zugriff-auf-lokale-webdateien-funktioniert-nicht-403-seite?srt=yes Yadgar yazdegird@gmx.de 2024-02-18T14:32:51Z 2024-02-18T14:32:51Z Neueste Version von LAMPP lokal installiert... Zugriff auf lokale Webdateien funktioniert nicht (403-Seite) <p>Hi(gh)!</p> <p>Nach einer umfassenden Linux-Neuinstallation versuche ich mein privates Webprojekt (http://www.bergisch-afghanistan.de/khyberspace) auch lokal wieder ans Laufen zu bringen... habe also einen Ordner "khyberspace" in /var/lampp/htdocs/ erstellt, dort alle Rechte rekursiv auf 777 gesetzt und anschließend meine Projektdaten dort hineinkopiert... den Apache- und MariaDB-Server gestartet... aber wenn ich localhost/khyberspace/ eingebe kommt die im Betreff genannte Fehlerseite!</p> <p>Das "Khyberspace"-Webprojekt hat eine index.html, daran kann es also nicht liegen...</p> <p>Bis bald im Khyberspace!</p> <p>Yadgar</p> https://forum.selfhtml.org/self/2024/feb/16/input-textfeld-soll-so-breit-sein-wie-die-maximale-zeichenzahl?srt=yes Linuchs 2024-02-16T14:13:37Z 2024-02-16T14:13:37Z input-Textfeld soll so breit sein wie die maximale Zeichenzahl <p>Moin,</p> <p>sämtliche meiner Input-Felder haben die font-family monospace.</p> <p>Nun könnte man annehmen, dass ein Zeichen 1em breit ist. Wenn ein Feld 50 Zeichen aufnehmen kann, möchte ich max-width:50em setzen.</p> <p>Das klappt gar nicht:</p> <p><a href="/images/429469ba-ccd4-11ee-937b-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/429469ba-ccd4-11ee-937b-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <pre><code class="block language-css"><input required type = <span class="token string">"text"</span> id = <span class="token string">"titel_input"</span> name = <span class="token string">"titel"</span> title = <span class="token string">"titel (varchar 50)"</span> maxlength = 50 style = <span class="token string">"font-family:monospace;max-width:50em;"</span> value = <span class="token string">"[titel]"</span> placeholder = <span class="token string">"Titel max. 50"</span> /> </code></pre> <p>Das Feld soll in derselben Zeile stehen wie sein label (12em). Ohne diese max-width klappt das auch, ist aber ebenfalls breiter als 50 Zeichen.</p> <p><a href="/images/ceda27d4-ccd4-11ee-b079-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/ceda27d4-ccd4-11ee-b079-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Hab'sauch mit size=50 versucht, aber calc( 100% - 13em ) ist stärker, das Feld ist zu lang und gaukelt freie Stellen vor.</p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2024/feb/17/logo-bleibt-beim-seiten-verkleiner-nicht-an-seinem-platz?srt=yes Mick62 2024-02-17T17:19:34Z 2024-02-17T17:19:34Z Logo bleibt beim Seiten verkleiner nicht an seinem Platz <p>Mir ist gerade aufgefallen, dass ich ein Problem mit der Seite meiner Kneipe habe. Und zwar wandert das Logo in der Mitte, beim Aufziehen und verleinern der Seite, hin und her springt.</p> <p>das css</p> <pre><code class="block">/*------------------------- ________section gude_______ ---------------------------*/ #welcome{ display: flex; flex-direction: column; align-items: center; margin-top: 0vw; height: 50vh; background-image: url(../images/beer2.jpg); } #welcome>img{ width: 25vw; margin:0rem; } #welcome>h1{ font-family: Verdana, Geneva, Tahoma, sans-serif; color: rgb(77, 67, 100); margin-top: 7vw; } .flex-container { display: flex; height: 40vh; width: 100%; box-sizing: border-box; } .container { display: flex; justify-content: space-between; margin: auto; margin-bottom: 40px; width: 100%; } .box1 { position: relative; min-width: 40%; text-align: center; padding: 20px; border: none; background-color:transparent; } .box2 { position: relative; min-width: 40%; text-align: center; padding: 20px; border:none; background-color:transparent; } @media only screen and (max-width: 900px) { #welcome { /* height: 55vh; */ background-image: url(../images/beer2_th.jpg); } #welcome>img{ width: 42vw; margin:0vw; } #welcome>h1{ font-family: Verdana, Geneva, Tahoma, sans-serif; font-size:larger; color: rgb(31, 23, 46); margin-top: 10vw; } .container { flex-direction: column; /* Änderung: Auf Stapelrichtung ändern */ } .box1, .box2 { max-width: 100%; /* Änderung: Vollständige Breite für kleinere Bildschirme */ margin-left: 0; margin-right: 0; font-size: small; background-color: transparent; } } @media only screen and (max-width: 600px) { #welcome { /* height: 55vh; */ background-image: url(../images/beer2_th.jpg); } #welcome>img{ width: 52vw; margin:8vw; } #welcome>h1{ font-family: Verdana, Geneva, Tahoma, sans-serif; font-size:larger; color: rgb(31, 23, 46); margin-top: 10vw; } } </code></pre> <p><a href="https://www.miflo.de/test/index.html" rel="nofollow noopener noreferrer">die Seite zu probieren hier</a></p> https://forum.selfhtml.org/self/2024/feb/14/pwa-auf-ios-17-4beta-mit-ungewisser-zukunft?srt=yes Felix Riesterer https://felix-riesterer.de 2024-02-14T12:29:33Z 2024-02-14T12:29:33Z PWA auf iOS 17.4beta mit ungewisser Zukunft <p>Liebe Mitlesende,</p> <p>gerade bei Heise gelesen: <a href="https://heise.de/-9627974" rel="nofollow noopener noreferrer">Web-Apps außer Funktion: iOS 17.4 Beta bereitet Entwicklern große Sorge</a></p> <p>[Edit]<a href="https://glm.io/182255" rel="nofollow noopener noreferrer">Golem.de bestätigt</a>[/Edit]</p> <p>Mir gefällt nicht, was Apple da treibt. Ist ja schon höchst fragwürdig, warum man dort bisher keine andere Browser-Engine neben WebKit geduldet hat - und die noch nicht einmal auf dem immer neuesten Stand hält! OS-Upgrade, damit eine Browser-Engine auf eine neue Version kommt? Seriously?</p> <p>Bleibe weiter ein Apple-Gegner.</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/self/2024/feb/09/suche-webhosting?srt=yes Linuchs 2024-02-09T09:49:56Z 2024-02-09T09:49:56Z Suche Webhosting <p>Moin,</p> <p>bitte um Empfehlungen für ein Webhosting-Paket für meine private Homepage mit Mail-Adresse, PHP, MySQL.</p> <p>Budget ist 50 € jährlich.</p> <p>Danke schon mal.</p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2024/feb/16/self-wiki-offline?srt=yes Matthias Scharwies mscharwies@selfhtml.org 2024-02-16T06:05:35Z 2024-02-16T08:44:46Z SELF-Wiki offline <p>Guten Morgen!</p> <p>Seit einer halben Stunde ist das Wiki offline.</p> <p>Dedlfix ist verständigt.</p> <p>Hoffen wir, dass es zeitnah gefixt werden kann.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Die Signatur findet sich auf der Rückseite des Beitrags. </div> https://forum.selfhtml.org/self/2024/feb/15/seitenkontakte-zahlen-weiterleitung?srt=yes Harrywood info@harrywood.de http://www.harrywood.de 2024-02-15T03:41:44Z 2024-02-15T03:41:44Z Seitenkontakte zählen, Weiterleitung <p>Ich habe eine Frage zum Thema Kontaktzählung einer Seite nach Weiterleitung.</p> <p>Problem: Ich möchte von einer bestehenden Seite auf eine Seite einer anderen Domain weiterleiten, natürlich mit Genehmigung des "Opfers". Zweck ist die Erfassung der Kontakte, die über die Weiterleitung per Link per Klick entstehen. Die Idee: zwischen die Startseite und die Zielseite soll eine sog. Nullseite geschaltet werden, die nur zur Zählung der Kontakte dient. Das könnte ich z.B. eine Zählfunktion per "eXTReMe-Tracking" legen, die Seite wird gleichzeitig auf die Zielseite geschaltet per "0" oder höher, sodass der Betrachter die Schaltung nicht bemerkt. Es wird also nur die Zählseite erfasst, nicht die Zielseite selbst. Das dient der Datensicherheit, denn die Zielseite wird ja nicht "angefasst". Frage: Kann das als laienhafte Idee funktionieren, gibt es doch rechtliche Bedenken, oder gibt es für einen reine HTML-Kenner elegantere Lösungen, die beim Provider keine Gebühren kosten? Einen kurzen Stand über meine "Kenntnisse" soll die o.g. Homepage geben. Etwas anderes als HTML habe ich nie gelernt, sorry! </p> https://forum.selfhtml.org/self/2024/jan/27/problem-wohl-schon-behoben-warnung-domain-fritz-box-ist-in-unbekannten-handen?srt=yes Raketenwilli 2024-01-27T15:13:42Z 2024-01-27T15:13:42Z (Problem wohl schon behoben) Warnung: Domain fritz.box ist in unbekannten Händen <p><a href="https://www.heise.de/news/Verwirrend-Internet-Domain-fritz-box-zeigt-NFT-Galerie-statt-Router-Verwaltung-9610149.html" rel="nofollow noopener noreferrer">https://www.heise.de/news/Verwirrend-Internet-Domain-fritz-box-zeigt-NFT-Galerie-statt-Router-Verwaltung-9610149.html</a></p> <p>Besitzer einer Fritzbox sollten höllisch aufpassen, denn die Sache birgt zwei Gefahren:</p> <ul> <li>Wenn man unterwegs ist und den Link oder Favorit auf <a href="https://fritz.box" rel="nofollow noopener noreferrer">https://fritz.box</a> benutzt: Vortäuschen des Logins in die Fritzbox, Abgreifen von Benutzername und Passwort.</li> <li>in der Fritzbox manuell oder per DHCP registierte Geräte (Rechner, Drucker, ...) werden als „RECHNERNAME.fritz.box“ registriert: Auch hier hätte, bei vorliegender Schädingungsabsicht, ein Angreifer „viele schöne Möglichkeiten“.</li> </ul> <p>Bis eben sah die Analyse der DNS-Auflösung noch so aus:</p> <pre><code class="block">dig fritz.box @1.1.1.1 ; <<>> DiG 9.18.19-1~deb12u1-Debian <<>> fritz.box @1.1.1.1 ;; global options: +cmd ;; Got answer: ;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 7543 ;; flags: qr rd ra; QUERY: 1, ANSWER: 5, AUTHORITY: 0, ADDITIONAL: 1 ;; OPT PSEUDOSECTION: ; EDNS: version: 0, flags:; udp: 1232 ; EDE: 3 (Stale Answer) ; EDE: 22 (No Reachable Authority): (time limit exceeded) ;; QUESTION SECTION: ;fritz.box. IN A ;; ANSWER SECTION: fritz.box. 30 IN CNAME site.my.box. site.my.box. 30 IN A 18.215.42.147 site.my.box. 30 IN A 34.232.152.68 site.my.box. 30 IN A 52.20.143.163 site.my.box. 30 IN A 3.221.134.22 </code></pre> <p>Das whois lieferte:</p> <pre><code class="block">Domain Name: FRITZ.BOX Registry Domain ID: D426926400-CNIC Registrar WHOIS Server: whois.namesilo.com Registrar URL: https://www.namesilo.com Updated Date: 2024-01-22T23:06:21.0Z Creation Date: 2024-01-22T23:06:20.0Z </code></pre> <p><strong>Problem behoben?</strong></p> <p>Inzwischen sind beide (DNS-Namensauflösung und Whois-Daten wieder sauber. DNS-Server in Internet lösen den Name nicht mehr auf, der Whoi)s-Eintrag wurde gelöscht.</p> <p><strong>Versursacht bzw. ermöglicht hat das aber AVM.</strong> Denn diese Firma hätte spätens als die TLD „.box“ vergeben wurde eben die Domain „fritz.box“ registrieren <a href="https://en.wikipedia.org/wiki/Special-use_domain_name" rel="nofollow noopener noreferrer">oder besser noch alle Fritz-Boxen per Update auf eine für solche Zwecke reservierte TLD wie „.home“ oder „.private“ umstellen sollen</a>.</p> https://forum.selfhtml.org/self/2024/feb/12/selfmade-homepage-fur-ein-grosses-projekt?srt=yes Cowreline https://cowreline-plantage.com/ 2024-02-12T21:27:25Z 2024-02-12T21:27:25Z Selfmade Homepage für ein großes Projekt <p>Hallo,</p> <p>es geht hierbei um mehrere Kleinigkeiten die ich erfragen muss. Werde es aber nach und nach tun.</p> <p>Darum meine erste frage:</p> <p>Ich habe ein Account bei Ionos und php 8.2 im webhost. Dennoch kann keine PHP Seite angezeigt werden.</p> <p>wie kann ich das ändern?</p> <p>Danke im voraus. Liebe grüße, Cowreline~</p> https://forum.selfhtml.org/self/2024/feb/10/css-hilfe-benotigt?srt=yes Passwort 2024-02-09T23:19:18Z 2024-02-09T23:19:18Z CSS Hilfe benötigt <p>Hallo</p> <p>Ich habe aktuell ein (vermutlich) CSS Problem mit einer Seite. Es geht um das Titelbild. In diesem Titelbild befindet sich ein Text. Auf einem grossen Monitor sieht das alles gut aus, aber auf dem schmalen Handybildschirm ist der Text gequetscht. Da ich mich in CSS nicht gut auskenne, hoffe ich, dass Ihr mir helfen könnt </p> <p>Das Titel-Hintergrundbild wird im header-Tag aufgerufen:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</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>d-block<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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Titel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> T<span class="token entity named-entity" title="&ouml;">&ouml;</span>sstal spielt <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>br</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><span class="token punctuation">"</span>Untertitel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Das Spiele-Wochenende im T<span class="token entity named-entity" title="&ouml;">&ouml;</span>sstal <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>header</span><span class="token punctuation">></span></span> </code></pre> <p>Und der dazu passende CSS Code ist der folgende:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">header</span> <span class="token punctuation">{</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'<?= RESSOURCE_URL ?>/img/game-340574_1280.jpg'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 30vh<span class="token punctuation">;</span> <span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span> <span class="token property">background-size</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.Titel</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 8vh<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span> -50%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">"Lucida Handwriting"</span><span class="token punctuation">,</span> <span class="token string">"Brush Script MT"</span><span class="token punctuation">,</span> Cursive<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 6em<span class="token punctuation">;</span> <span class="token property">font-style</span><span class="token punctuation">:</span> oblique<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.Untertitel</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 15vh<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span> -50%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">"Lucida Handwriting"</span><span class="token punctuation">,</span> <span class="token string">"Brush Script MT"</span><span class="token punctuation">,</span> Cursive<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span> <span class="token property">font-style</span><span class="token punctuation">:</span> oblique<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> </code></pre> <p>Wie es dann aussieht: <a href="/images/9cf1cad0-c7a0-11ee-a8a6-9c6b00263d9f.jpg" rel="noopener noreferrer"><img src="/images/9cf1cad0-c7a0-11ee-a8a6-9c6b00263d9f.jpg?size=medium" alt="So sieht das auf dem grossen Monitor aus" loading="lazy"></a> So sieht das auf dem grossen Monitor aus</p> <p><a href="/images/f746cb16-c7a0-11ee-afbf-9c6b00263d9f.jpg" rel="noopener noreferrer"><img src="/images/f746cb16-c7a0-11ee-afbf-9c6b00263d9f.jpg?size=medium" alt="Ab hier kommts schon zu einem Seitenumbruch, obwohl an den Seiten noch Platz wäre." loading="lazy"></a> Ab hier kommts schon zu einem Seitenumbruch, obwohl an den Seiten noch Platz wäre.</p> <p><a href="/images/053f41da-c7a1-11ee-abaf-9c6b00263d9f.jpg" rel="noopener noreferrer"><img src="/images/053f41da-c7a1-11ee-abaf-9c6b00263d9f.jpg?size=medium" alt="So ungefähr sieht es am Handy aus." loading="lazy"></a> So ungefähr sieht es am Handy aus.</p> <p>Ich dachte eigentlich, dass die Schrift mit kleiner werdendem Bereich auch kleiner wird, oder hängt das nur von der Höhe ab?</p> <p>Besten Dank falls Ihr eine Lösung parat habt. Die Screenshots haben jeweils Original-Grösse.</p> https://forum.selfhtml.org/self/2024/feb/13/webseite-testen-und-seo-aber-noch-nicht-online?srt=yes dergumbl 2024-02-13T14:58:42Z 2024-02-13T14:58:42Z Webseite testen und seo aber noch nicht online? <p>Hallo</p> <p>Ich bin schon lange auf selfhtml unterwegs und finde die Seiten sehr gut und hilfreich. Hat mir sehr beim Einstieg in die Programmierwelt geholfen. Nun habe ich Fragen.</p> <p>Wie kann ich bei einer Webseite die Ladezeiten und SEO testen, bevor sie Online geht.</p> <p>Git es dafür Möglichkeiten?</p> <p>Und gibt es überhaupt die Möglichkeit eine Webseite zu hosten ohne das diese Online ist? Damit man diese in realen Bedingungen testen kann. z.B. mit Smartphone und mobilen Geräten.</p> <p>Vielen Dank</p> https://forum.selfhtml.org/self/2024/feb/12/grid-fester-offset-zu-fr-breitenangabe?srt=yes Rolf B 2024-02-12T19:27:24Z 2024-02-12T19:27:24Z Grid, fester Offset zu fr-Breitenangabe? <p>Hallo alle,</p> <p>ich hab da eine Liste:</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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>grid<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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Block 1<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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Block 2<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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>c<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Block 3<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>Die Elemente sind als Grid nebeneinandergesetzt</p> <pre><code class="block language-css"><span class="token selector">.grid</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 1fr 1fr 1fr<span class="token punctuation">;</span> <span class="token property">gap</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0 50px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.grid li</span> <span class="token punctuation">{</span> <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<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-block</span><span class="token punctuation">:</span> 0.5em<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Die 50px im Padding sind symbolisch für's Beispiel.</p> <p>Nun möchte ich das erste und das dritte List Item "anspitzen". Das kann ich mit ::before/::after und geschickter Border machen, aber das führt ggf. zu Rundungsfehlern und einer feinen Lücke zwischen li und ::after. Bäh.</p> <p>Darum hatte ich die alternative Idee mit clip-path. Wie gesagt, die 50px sind symbolisch, eigentlich ist's ein var(), und das würde hier alles aufblähen.</p> <pre><code class="block language-css"><span class="token selector">.grid li.a</span> <span class="token punctuation">{</span> <span class="token property">padding-left</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token property">clip-path</span><span class="token punctuation">:</span> <span class="token function">polygon</span><span class="token punctuation">(</span>0% 50%<span class="token punctuation">,</span> 50px 0%<span class="token punctuation">,</span> 100% 0%<span class="token punctuation">,</span> 100% 100%<span class="token punctuation">,</span> 50px 100%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> -50px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.grid li.c</span> <span class="token punctuation">{</span> <span class="token property">padding-right</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token property">clip-path</span><span class="token punctuation">:</span> <span class="token function">polygon</span><span class="token punctuation">(</span>0% 0%<span class="token punctuation">,</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% - 50px<span class="token punctuation">)</span> 0%<span class="token punctuation">,</span> 100% 50%<span class="token punctuation">,</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% - 50px<span class="token punctuation">)</span> 100%<span class="token punctuation">,</span> 0% 100%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span> -50px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Das Padding ist nötig, damit der Inhalt nicht in den Pfeilbereich hineinragt. Dadurch wird der Inhaltsbereich des li aber schmaler. Interessanterweise bewirkt die negative Margin-Angabe, dass der betreffende li-Rand aus der Gridzelle hinausgezogen wird UND das li um die 50px breiter wird. Die Gridzellen an sich bleiben gleich breit.</p> <p>Aber dieser Margin scheint mir ein blöder Hack, der eher zufällig als absichtlich funktioniert, und ich frage mich, wie ich dem Grid korrekt sage, dass die erste und letzte Spalte die Breite "calc(50px + 1fr)" bekommen sollen. Hinschreiben kann ich das so nicht, das ist wohl ungültige Syntax.</p> <p><a href="https://jsfiddle.net/Rolf_b/xu3zre6w/" rel="noopener noreferrer">Anschauungsmaterial</a>, etwas komplexer…</p> <p>Oder geht's nicht anders als so?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2024/feb/03/ruckruf-wegen-zu-kleiner-schrift?srt=yes JürgenB https://www.j-berkemeier.de 2024-02-03T08:56:50Z 2024-02-03T08:56:50Z Rückruf wegen zu kleiner Schrift <p>Hallo,</p> <p>zur Info: <a href="https://www.spiegel.de/auto/tesla-ruft-millionen-autos-zurueck-wegen-zu-kleiner-schrift-a-cb202a81-a491-4ef3-acec-c132953ba26b" rel="nofollow noopener noreferrer">https://www.spiegel.de/auto/tesla-ruft-millionen-autos-zurueck-wegen-zu-kleiner-schrift-a-cb202a81-a491-4ef3-acec-c132953ba26b</a></p> <p>Ich bin gespannt, wann die ersten Webseiten wegen zu kleiner Schrift zurückgerufen werden .</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2024/jan/27/technik-der-strassenmusik-konnen-zwei-quellen-einen-bluetouth-lautsprecher-speisen?srt=yes Linuchs 2024-01-26T23:58:37Z 2024-01-26T23:58:37Z Technik der Straßenmusik: Können zwei Quellen einen Bluetouth Lautsprecher speisen? <p>Moin Freaks,</p> <p>so langsam nähere ich mich meinem Traum, Straßenmusik zu machen.</p> <p>Da wäre ein Laptop (oder ein Tablet), das die Melodie per Bluetooth auf einen aktiven Lautsprecher gibt.</p> <p><a href="/images/79bb7c9a-bca7-11ee-a608-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/79bb7c9a-bca7-11ee-a608-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Mein ergänzender Gesang wäre als akustische Ergänzung laut genug.</p> <p>Aber die Mundharmonika bräuchte Verstärkung. Ich weiß noch nicht wie, aber ist es möglich, sie als ergänzende Quelle auf denselben Bluetooth-Lautsprecher zu geben?</p> <p>Wenn das Tablet die „Kapelle“ ist, kann ich dann das Smartphone als Mikrofon nutzen?</p> <p>Wie machen das Einmann-Kapellen?</p> <p>Bisher meinte ich, dass Bluetooth eine 1:1 Verbindung ist.</p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2024/feb/10/click-handler-fur-tabellenspalte-ausser-thead-tfoot?srt=yes MudGuard http://www.andreas-waechter.de/ 2024-02-10T10:45:00Z 2024-02-10T10:45:00Z Click-Handler für Tabellenspalte (außer thead/tfoot) <p>Hi,</p> <p>ich habe eine Tabelle mit mehreren TBody darin, die jeweils mehrere tr zusammenfassen.</p> <p>Ich hätte jetzt gerne auf einer Spalte einen Click-Handler, der dann Daten aus der betroffenen Zeile braucht.</p> <p>Wie ist das sinnvollste Vorgehen?</p> <p>onclick in jede Zelle der Spalte durch php reingenerieren (nur innerhalb der tbody-Elemente, nicht im thead/tfoot), dabei die Daten für die handler-Funktion gleich als Parameter übergeben</p> <p>Selbiges, aber nicht per PHP, sondern per Javascript im Browser einmal über alle Zellen der betroffenen Spalten gehen und den passenden Funktions-Aufruf samt Parametern reingenerieren</p> <p>EINEN Clickhandler auf der Tabelle, der sich dann anhand des targets die betroffene Zelle und dann über parent die betroffene Zeile raussucht. Dann müßte ich noch rauskriegen, ob der Klick überhaupt die richtige Spalte getroffen hat. *)</p> <p>Gibt's noch ne bessere Variante?</p> <p>(ich brauch keinen fertigen Code, nur mal Aussagen dazu, wie Ihr das angehen würdet)</p> <p>*) ob die richtige Spalte getroffen wurde, kann ich nicht am Inhalt erkennen, der kann bei mir auch leer sein (und der Inhalt anderer Spalten auch). Da muß ich wohl gucken, das wievielte Kind der Zeile das Target ist - verbundene Zellen hab ich zum Glück nicht, so daß das wenigstens zuverlässig sein sollte - Spalten kommen auch eher nicht dazu - nur Zeilen werden es immer mehr …</p> <p>PS: ist nur für mich, also kein Problem mit dem Click auf td wg. accessability ...</p> <p>cu,<br> Andreas a/k/a MudGuard</p> https://forum.selfhtml.org/self/2024/jan/29/frage-zum-wiki-artikel-counter?srt=yes nix 2024-01-29T12:10:24Z 2024-01-29T12:10:24Z Frage zum Wiki-Artikel „counter()“ <p>Die Preisfrage lautet: wer zählt (hier; s. u.) richtig? Schnell ein Stück heruasgeschnittener und auf Wesentliches gekürzter Quelltext:<br> Stylesheet:</p> <pre><code class="block">body { &:not(:has(:target)), &:has(p.default:target) { #extra { display: none; } #default { display: block; } } &:has(p.extra:target) { #extra { display: block; } #default { display: none; } } > article { counter-reset: total; &::after { color: purple; font-size: x-small; font-family: fantasy; content: "— [" counter(total) "] —"; }}} body:has(.extra:target) { & li.extra { display: inline; }} ul { display: contents; } li { list-style-type: none; } name-group { display: inline; counter-reset: nameIndex; li::after { display: inline-block; counter-increment: nameIndex; content: "(" counter(nameIndex) ")"; vertical-align: sub; }} article { display: flex; flex-flow: row wrap; li { display: inline; &:not(.Alias) { counter-increment: total; } &.extra { display: none; } }} </code></pre> <p>HTML:</p> <pre><code class="block"><!DOCTYPE html> <html><head><link rel="stylesheet" type="text/css" href="index.css" /></head> <body> <header> <p id="default" class="default"><a href="#extra">Basis-Info</a></p> <p id="extra" class="extra"><a href="#default">Erweiterte Infos</a></p> </header> <article> <ul> <li class="default"><a href="Adb….html">Ade…</a></li> <name-group> <li class="default"><a href="Ade….html">Ade…</a></li> <li class="default"><a href="Ade….html">Ade…</a></li> </name-group> <li class="default"><a href="Akr….html">Akr…</a></li> <li class="default"><a href="Ale….html">Ale…</a></li> </ul> <ul> <name-group> <li class="extra"><a href="Bell….html">Bel…</a></li> <li class="default"><a href="Bell….html">Bel…</a></li> </name-group> <li class="default"><a href="Bip….html">Bip…</a></li> </ul> </article> </body> </html> </code></pre> <p>Sprich: eine Art Katalog(inhaltsverzeichnis), das beim Klicken auf den Header ggf. mehr Infos ausspuckt.<br> Das Problem aber: bei den Indizes (name-group li::after) sind sie sich noch einig, aber beim Aufklappen zählt Firefox (IMO korrekt) hoch, Safari ignoriert die Extra-Einträge, zählt sie nicht (article::after).</p> <p>BTW: display: hidden und Screen-Reader … das Verstecken von Infos stellt für die eigentlich welches Problem dar? Sehende sehen nix, was dann auch nicht vorgelesen wird? Ich kenne solche Gerätschaften ja nicht, kam nur beim Nachdenken darüber ins Stirnrunzeln …</p> https://forum.selfhtml.org/self/2023/dec/19/unverstandnis-von-css-eigenschaften-hintergrund-der-aktiven-navigationsauswahl-andern?srt=yes HTML_go https://xn--audiobibelne-olb.de UND https://kontakt-vs.de 2023-12-19T10:34:52Z 2023-12-19T10:34:52Z Unverständnis von CSS-Eigenschaften; Hintergrund der aktiven Navigationsauswahl ändern <p>Guten Tag miteinander,</p> <p>nach langen Jahren suche ich hier im Forum mal wieder Rat.</p> <p>Es geht um die Navigationsleiste dieser "nur" in HTML und CSS erstellten Website: <a href="https://www.kontakt-vs.de" rel="nofollow noopener noreferrer">https://www.kontakt-vs.de</a>.</p> <p>Ach ja noch was: das CSS hat größtenteils ein Bekannter erstellt, ich kenne mich damit (noch) zu wenig aus. Und Manpower ist rar und ich sollte ja auch mal was dazulernen; also frage ich hier, nachdem ich in der Suche nicht erfolgreich war ...</p> <p>Also: ich hätte gerne, dass der aktiv ausgewählte Navigationsbereich (z. B. <a href="https://www.kontakt-vs.de/kinderarbeit.html" rel="nofollow noopener noreferrer">https://www.kontakt-vs.de/kinderarbeit.html</a> in der gleichen (türkisgrünen) Farbe hinterlegt <strong>bleibt</strong>, bis der Navigationsbereich gewechselt wird. Derzeit geschieht dies ja nur, solange die Maus in der Navigationsposition schwebt; das dürfte wohl in diesem Bereich (ungefähr) der "standard.css"</p> <pre><code class="block">.topnav a:hover { background-color: #169f94; color: black; } .topnav a.active { background-color: #04AA6D; color: white; } </code></pre> <p>zu ändern sein?</p> <p>Vielen Dank für Hilfestellung!</p> <p>Gruß</p> <p>Holger</p> https://forum.selfhtml.org/self/2024/feb/09/inline-und-block-elemente?srt=yes Mel 2024-02-08T23:14:40Z 2024-02-08T23:14:40Z Inline und Block-Elemente <p>Hi zusammen,</p> <p>habe vielleicht eine dumme Frage, da ich aber neu im Business bin: disst mich bitte nicht.</p> <p>Können alle Elemente in Inline und Block-Elemente unterteilt werden?</p> <p>Ich möchte mir gerade so eine Art Spickzettel machen, mit allen HTML-Tags und wollte diese farblich unterteilen, in Inline- und Block-Elemente. Ist das unnötig?</p> <p>In Eurem Wiki sind die Angaben in den Tags nicht gesetzt, darum vermute ich, dass es unnötig ist?</p> <p>VG Melanie</p> https://forum.selfhtml.org/self/2024/feb/08/laptop-akku-anzeige-defekt?srt=yes Peter 2024-02-08T08:13:02Z 2024-02-08T08:13:02Z Laptop: Akku-Anzeige defekt? <p>Hallo Leute,</p> <p>ich habe seit einigen Tagen ein eigenartiges Problem mit meinem Notebook (Voyo V3):</p> <p>Laut der Akkuanzeige von Windows 10 hat der Akku nur noch 0% und lässt sich nicht mehr aufladen. Wenn ich den Laptop vom Strom wegnehme, geht er jedoch nicht sofort aus, was bei dem Akkustand sonst der Fall gewesen wäre.</p> <p>Der Battery-Report (CMD/ »powercfg /batteryreport«) hat keine Angaben zum aktuellen Ladestatus geliefert, die entsprechende Tabellenspalte bleibt leer.</p> <p>Ich gehe davon aus, dass die Ladeanzeige defekt ist. Gibt es eine Möglichkeit, das zu beheben, sollte man den Akku austauschen oder das ganze Gerät? Es ist jetzt sechs Jahre alt und ich würde vermuten, dass eine Neuanschaffung sinnvoller wäre.</p> <p>Beste Grüße, Peter</p> https://forum.selfhtml.org/self/2023/nov/13/alle-bilder-einer-galerie-mit-dialog-methode-offnen?srt=yes gewe gweber@gmx.info https://www.webersite.de 2023-11-13T12:44:57Z 2023-11-13T12:44:57Z alle Bilder einer Galerie mit dialog- Methode öffnen <p>Hallo, es gibt ja die Möglichkeit,ein Bild per JS in einem dialog-Element vergrößert darzustellen:</p> <pre><code class="block">document.getElementById("show-dialog").addEventListener("click", () => { document.getElementById("dialog").showModal(); }); document.getElementById("close-dialog").addEventListener("click", () => { document.getElementById("dialog").close(); }); </code></pre> <p>Das funktioniert bei mir auch .</p> <p>Frage geht das auch mit allen Bildern einer Galerie (in einem array)?</p> <p>Gruß aus Köln Gerhard</p> https://forum.selfhtml.org/self/2024/jan/30/schrift-und-bilder-grosser-in-chrome-als-in-firefox?srt=yes littbarski 2024-01-30T12:27:18Z 2024-01-30T12:27:18Z Schrift und Bilder größer in Chrome als in Firefox <p>Hallo zusammen,</p> <p>ich bin HTML-Laie, würde aber gerne etwas wissen, was ich mich schon ein paar Jahre frage.</p> <p>Wo kann ich ansetzen, um herauszufinden, warum eine (reine) HTML-Seite, in Chrome (und Edge) ganz anders aussieht als in Firefox? Also von der Text-Größe her, und auch die Bilder werden nicht als 100% angezeigt in Chrome, sondern größer.</p> <p>Liegt dies eher an Browser-Einstellungen, oder gibt es in HTML (Font, Style) bestimmte Vorgaben, die in Firefox ganz anders funktionieren als in Chrome?</p> <p>Meine Vermutung wäre HTML, weil ich bei den Einstellungen in Chrome (die es ja durchaus gibt) keinen Erfolg habe bzw. immer nur Teile besser werden.</p> <p>Ich habe für eine Freundin eine Seite erstellt, und seit langer Zeit ist das so, was uns aber erst jetzt auffiel.</p> <p>Danke für jeden Tipp. Und tut mir leid, dass ich alles so laienhaft und mit wenig Informationen darstelle, ich weiß eben wirklich nicht, wo man ansetzen muss (s.o).</p> https://forum.selfhtml.org/self/2024/feb/08/stylesheet-der-homepage-uberschreiben-eingebundenes-include-kontakt-formular?srt=yes sonne 2024-02-08T15:43:32Z 2024-02-08T15:43:32Z Stylesheet der Homepage überschreiben eingebundenes (include) Kontakt-Formular <p>Hallo, ich binde ein Kontakt-Formular per include ein. Leider zerschießt mir dann die stylesheet aus meiner css Datei das Formular. Das Kontakt-Formular ist keine Eigenkreation, ich nutze ein fertiges Skript mit Spam Schutz usw., das eine eigene css Datei mitbringt. Ich könnte jetzt alle identische CSS Klassen aus den Formular und die für meine Homepage suchen und gegebenenfalls umbenennen. Schöner wäre es, wenn es eine Möglichkeit geben würde, dass die include Kontakt.php Datei auch nur die für sie bestimme css Datei nutzt. Ist das möglich?</p> <p>Grüße</p> https://forum.selfhtml.org/self/2024/feb/01/phplist-interne-sprungmarken-funktionieren-nicht?srt=yes Julia 2024-02-01T14:11:02Z 2024-02-01T14:11:02Z phplist: Interne Sprungmarken funktionieren nicht <p>Liebe Gemeinschaft,</p> <p>zur Newsletter-Erstellung nutzen wir in unserer Orga phplist und haben folgendes Problem: Die Sprungmarken, die wir definieren, funktionieren nicht. Wir haben am Anfang ein Inhaltsverzeichnis und die einzelnen Einträge mit einer internen Sprungmarke versehen. Wenn ich mir diese als Test schicke, springt er sonst wo hin, aber nicht zu dem jeweiligen Eintrag!</p> <p>In der Box, die sich in der Umgebung öffnet, steht der Anzeigetext und der Link-Typ ("Anker in dieser Seite"). Darunter steht dann aber "(Keine Anker im Dokument vorhanden)".</p> <p>Im Quellcode sieht es folgendermaßen aus:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><span class="token selector">*</span> <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">body</span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> Arial<span class="token punctuation">,</span> Helvetica<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #eee<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#wrapper</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 class="token property">min-width</span><span class="token punctuation">:</span>360px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span>0 auto<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span>20px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span>#fff<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</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>wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> **Hier beginnt der Inhalt** <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>strong</span><span class="token punctuation">></span></span>Text<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</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 special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin-left</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token entity named-entity" title="&rArr;">&rArr;</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>#1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>XYZ<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>p</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> **Hier steht weiterer Inhalt** <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</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>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>XYZ<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> </code></pre> <p>Warum funktioniert das nicht? Es funktioniert mit allen Ankern nicht.Könntet ihr mir bitte helfen? Was müsste in dem Pop-Up vielleicht noch eingestellt werden (wenn man es nicht über den HTML-Code macht)?</p> <p>LG</p> <p>Julia</p> https://forum.selfhtml.org/self/2024/feb/04/bildersuche?srt=yes Connie 2024-02-04T10:29:15Z 2024-02-04T10:29:15Z Bildersuche <p>Hallo,<br> im Internet gibt es die Bildersuche mit z.B. dem G....<br> Gibt es eine ähnliche Möglichkeit, auf dem PC zu suchen?<br> Danke</p> https://forum.selfhtml.org/self/2024/feb/05/listen-value-attribut-und-counters-bug-oder-unverstandenes-feature?srt=yes Rolf B 2024-02-05T14:02:06Z 2024-02-05T14:02:06Z Listen, value-Attribut und counters() - Bug oder unverstandenes Feature? <p>Hallo alle,</p> <p>ich bin gerade etwas erstaunt. Arg erstaunt! Mein eigentliches HTML war umfangreicher, hier ist die minimalistische Version:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</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>Bananen<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 attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>7<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Äpfel<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>Birnen<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>ol</span><span class="token punctuation">></span></span> </code></pre> <p>Diese Liste wird brav 1,7,8 durchnummeriert, aber jetzt füge ich eine counter<strong>s</strong>()-Ausgabe hinzu:</p> <pre><code class="block language-css"><span class="token selector">li::after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">' ('</span> <span class="token function">counters</span><span class="token punctuation">(</span>list-item<span class="token punctuation">,</span> <span class="token string">'.'</span><span class="token punctuation">)</span> <span class="token string">')'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Erwartet:</p> <p>1. Bananen (1)<br> 7. Äpfel (7)<br> 8. Birnen (8)</p> <p>Vorgefunden (Edge Chromium v120)</p> <p>1. Bananen (1)<br> 7. Äpfel (1.7)<br> 8. Birnen (1.8)</p> <p>Das heißt: die Value-Eigenschaft hat nicht, wie die Counters- und HTML-Spec schreiben, einen <code>counter-set: list-item 7</code> durchgeführt, sondern einen <code>counter-reset</code> und einen geschachtelten Zähler erzeugt.</p> <p>Das finde ich jetzt gruselig falsch. Für mein Minibeispiel ist's natürlich wurscht, aber wenn man real mit geschachtelten Zählern und dem value-Attribut arbeitet, führt das gefundene Verhalten zu blödsinniger Darstellung.</p> <p>Als Workaround kann ich mit <code>style="counter-set: list-item 7"</code> arbeiten. Dann ist das Ergebnis richtig. Aber das solle ja eigentlich nicht nötig sein.</p> <p>Bevor ich bei Chromium einen Bug poste: Mache ich was falsch? Bringen andere Browser das auch? Ich habe jetzt nur Chromium parat.</p> <p>Fiddle: <a href="https://jsfiddle.net/vcmh3pf7/1/" rel="noopener noreferrer">https://jsfiddle.net/vcmh3pf7/1/</a></p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2024/feb/02/kein-div-und-kein-p-im-summary-erlaubt-was-tun?srt=yes fietur 2024-02-02T21:52:52Z 2024-02-02T21:52:52Z Kein <div> und kein <p> im <summary> erlaubt - was tun? <p>Hallo.</p> <p>Warum dürfen weder <code><div></code> noch <code><p></code> innerhalb eines <code><summary></code> stehen?</p> <p>"Element div not allowed as child of element summary in this context." lautet die Validator-Meldung hierzu.</p> <p>Auf meiner Seite habe ich eine Vielzahl von <article>-Containern mit folgendem Aufbau:</p> <pre><code class="block"><article> <details> <summary> <img ...> <p>ein paar Zeilen</p> </summary> <p>weiterer Text>/p> <img ...> <p>...</p> </details> </article> </code></pre> <p>Im CSS ist <code>p {padding:1rem;}</code> notiert. Die Bilder sollen (meist) die gesamte Breite einnehmen.</p> <p>Das obenstehende HTML wird zwar wie gewünscht gerendert, ist aber eben nicht Validator-konform.</p> <p>Wenn ich die <code><p></code>-Tags entferne und <code>summary {padding:1rem;}</code> notiere, wird es zwar konform, aber <code><img></code> erhält unerwünschterweise ebenfalls Ränder. <code>summary :not(img)</code> zu notieren, ändert daran nichts (wäre das überhaupt korrekt so?).</p> <p><code><div></code> darf (weil kein phrasing content) ebenfalls nicht notiert werden. Wählt man hilfsweise etwas wie <code><span></code> und weist so einen Rand zu, wird ja nur die erste Zeile eingerückt, was ebenfalls unerwünscht ist - es passt nicht zum Rest.</p> <p>Wie kann ich im <code><summary></code> Text von Grafik getrennt auszeichnen?</p> https://forum.selfhtml.org/self/2024/feb/03/frage-zum-wiki-artikel-vorlage-weblink?srt=yes Rolf B 2024-02-03T13:50:52Z 2024-02-03T13:50:52Z Frage zum Wiki-Artikel „Vorlage:Weblink“ <p>Hallo Wikiautoren,</p> <p>bin ich der einzige, der diese Vorlage sch...recklich misslungen findet?</p> <ul> <li>Sie erzeugt automatisch einen Listeneintrag</li> <li>Die Parameter sind unübersichtlich. Drei bis Sechs UNBENANNTE Parameter?</li> <li>Sie möchte - mutmaßlich - einen Eintrag in einer Linkliste erzeugen, wie er in der Referenzenliste vorkommt. Aber dann wäre eine Vorlage, die ein <ref></ref>-Element erzeugt, wesentlich sinnvoller.</li> </ul> <p>Ich bin jetzt drüber gestolpert, weil Robert das Konstrukt</p> <p><ref>{{Weblink|...}}</ref> verwendet hat und das Listensternchen in der Vorlage Durcheinander stiftet. Darum habe ich das in einfache <ref>...</ref> umgewandelt.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2024/feb/01/frage-zum-wiki-artikel-element-tag-und-attribut?srt=yes Raoul Becke doc--s0-v1@becke.ch https://becke.ch 2024-02-01T20:54:09Z 2024-02-01T20:54:09Z Frage zum Wiki-Artikel „Element,_Tag_und_Attribut“ <p>Im Abschnitt: "Guter HTML-Stil" steht: <em>Elemente, die in HTML auch ohne schließendes Tag notiert werden dürfen (p, th, td, dt, dd, li), werden immer mit schließendem Tag notiert.</em></p> <p>Das Code Beispiel im darunterliegenden Abschnitt: "Semantik - der Inhalt bestimmt die Struktur" folgt ABER nicht dieser Empfehlung:</p> <pre><code class="block"> <li>Lesen <li>Faulenzen <li>Joggen </code></pre> <p>Können die HTML Code Beispiele bitte so angepasst werden dass sie den Empfehlungen in "Guter HTML-Stil" folgen.</p> https://forum.selfhtml.org/self/2024/feb/03/js-css-use-case-fur-clientwidth-und-getboundingclientrect?srt=yes Matthias Scharwies mscharwies@selfhtml.org 2024-02-03T08:04:54Z 2024-02-03T08:04:54Z JS + CSS: Use Case für clientWidth und getBoundingClientRect() <p>Guten Morgen!</p> <p>Wir haben ja schon einige Beispiele für die Ermittlung von Elementgrößen mit JS.</p> <p>Aber alle - auch der Grundlagen-Artikel <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements" rel="nofollow noopener noreferrer">Determining the dimensions of elements</a> stellen eigentlich nur vor, <strong>wie</strong>'s geht, nicht, <strong>wann und wo</strong> man es einsetzen sollte.</p> <p>Habt ihr ein Praxisbeispiel, wo man so etwas anwenden kann?</p> <p>[EDIT] Evtl. in Verbindung mit Lazy Loading - Einschweben von Bildern<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> [/EDIT]</p> <p>Und eines für matchMedia?</p> <p>Vielen Dank im Voraus!</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Die Signatur findet sich auf der Rückseite des Beitrags. </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p><a href="https://toruskit.com/blog/how-to-get-element-bounds-without-reflow/" rel="nofollow noopener noreferrer">https://toruskit.com/blog/how-to-get-element-bounds-without-reflow/</a> <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2024/feb/02/frage-zum-wiki-artikel-selfhtml?srt=yes Verzweifelnde Schülerin 2024-02-02T11:36:55Z 2024-02-02T11:36:55Z Frage zum Wiki-Artikel „SELFHTML“ <p>wie bekomme ich die verlinkung zur nächsten Seite weiß</p> https://forum.selfhtml.org/self/2024/jan/31/firefox-soll-auf-dem-tablet-lokale-html-seiten-aufrufen-wie-heissen-die-ordner?srt=yes Linuchs 2024-01-31T20:12:28Z 2024-01-31T20:12:28Z Firefox soll auf dem Tablet lokale HTML-Seiten aufrufen. Wie heißen die Ordner? <p>Moin,</p> <p>meine selbsterstellen HTML-Seiten möchte ich auf dem Android-Tablet anschauen / anhören. Dazu habe ich vom PC (per USB) Dateien überspielt.</p> <p>So sieht der PC das:</p> <p><a href="/images/dc9b9bd6-c073-11ee-829e-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/dc9b9bd6-c073-11ee-829e-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Das Tablet (eigene Dateien) sieht das anders:</p> <p><code>Gerätespeicher > musik > index.htm</code></p> <p>Der Firefox auf dem Tablet kann offenbar die lokalen Dateien nicht suchen, sowas wie [Strg][O] habe ich nicht gefunden.</p> <p>Versuchte Eingaben in die Adresszeile:</p> <p><code>file:///musik/</code> ergibt eine leere Seite</p> <p><code>file:///storage/musik/</code> ebenfalls.</p> <p>Wie könnte es funktionieren?</p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2024/jan/31/counter-und-vererbung?srt=yes Rolf B 2024-01-31T08:57:04Z 2024-01-31T08:57:04Z Counter und Vererbung <p>Hallo alle,</p> <p>ausgehend von Nixens Counterei habe ich nochmal versucht, das Wiki zu verbessern, und kratze mich am Kopf. Es ist natürlich wieder mal ein Edge Case, aber trotzdem...</p> <p>Dieses Beispiel:</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 punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</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>A<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>tricorder<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 attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>B<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>flux coupler <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>(or coil-spanner?)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>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>li</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>C<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>self-sealing stem bolt<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>mit diesem CSS</p> <pre><code class="block language-css"><span class="token selector">ul</span> <span class="token punctuation">{</span> <span class="token property">counter-reset</span><span class="token punctuation">:</span> FOO 17<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li</span> <span class="token punctuation">{</span> <span class="token property">counter-increment</span><span class="token punctuation">:</span> FOO<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#B span</span> <span class="token punctuation">{</span> <span class="token property">counter-reset</span><span class="token punctuation">:</span> FOO 88<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li::after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" - "</span> <span class="token function">counters</span><span class="token punctuation">(</span>FOO<span class="token punctuation">,</span> <span class="token string">'/'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">span::after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" - "</span> <span class="token function">counters</span><span class="token punctuation">(</span>FOO<span class="token punctuation">,</span> <span class="token string">'*'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>(-> <a href="https://jsfiddle.net/Rolf_b/dtnkmqyu/" rel="noopener noreferrer">Fiddle</a>)</p> <p>Gemäß Spec sollte der in #B span erzeugte FOO Counter den FOO-Counter aus dem ul-Element überlagern. D.h. eine counters()-Ausgabe innerhalb dieses span-Elements darf zwei Werte zeigen. Außerhalb dieses Span hingegen…</p> <p>Ebenfalls gemäß Spec sollte ein nachfolgendes Geschwisterelement dieses span den FOO-Counter des Elternelements erben. Counter aus dem vorhergehenden Geschwisterelement sollten <strong>nur dann</strong> geerbt werden, wenn es keinen gleichnamigen Zähler im Elternelement gibt (<a href="https://drafts.csswg.org/css-lists/#inheriting-counters" rel="nofollow noopener noreferrer">Inheriting Counters</a>).</p> <p>Das li::after Element im Listenelement #B sollte demnach den FOO Counter aus dem span nicht übernehmen und nur "19" anzeigen. Chrome und Firefox geben mir aber "19/88" aus, d.h. das im span erzeugte FOO wird an seine Geschwisterelemente weitervererbt.</p> <p>Das gezeigte Verhalten entspricht der Aussage im vorherigen Spec-Abschnitt (<a href="https://drafts.csswg.org/css-lists/#nested-counters" rel="nofollow noopener noreferrer">Nested Counters and Scope</a>): Ein Counter gilt für seine Kind-Elemente und seine nachfolgenden Geschwisterelemente.</p> <p>Aber nach meinem Verständnis widerspricht es den formalen Vererbungsregeln der Spec, wie sie in Inheriting Counters aufgeschrieben sind.</p> <p>Ist die Spec da widersprüchlich oder verstehe ich sie nur nicht?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2024/jan/31/frage-zum-wiki-artikel-was-ist-ein-webformular-3f?srt=yes nix 2024-01-31T21:46:28Z 2024-01-31T21:46:28Z Frage zum Wiki-Artikel „Was_ist_ein_Webformular%3F“ <p><strong>buttons:</strong></p> <p>„… wie das <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Was_ist_ein_Webformular%3F#Buttons" rel="nofollow noopener noreferrer">button</a>-Element verwendet …“ hat einen Link. Und der Link, der führt umgehend „GOTO 0“ aus.</p> <p>Mir scheint, es sollte besser <a href="https://wiki.selfhtml.org/wiki/HTML/Elemente/button" rel="nofollow noopener noreferrer">dahin</a> gehen.</p> https://forum.selfhtml.org/self/2024/jan/29/unerklarlicher-fehler-im-php-programm?srt=yes Sara 2024-01-29T21:24:32Z 2024-01-29T21:24:32Z Unerklärlicher Fehler im PHP-Programm <p>Hallo,<br> trotz langer Suche komme ich nicht dahinter, wo der Fehler liegt.<br> Ich setze jetzt meine Hoffnung auf Euch.</p> <p>Meine PHP-Statements:</p> <pre><code class="block language-php"><span class="token keyword">echo</span> <span class="token string double-quoted-string">"*** \$_SERVER['MyAkt_SeitenDir'] = "</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$_SERVER</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'MyAkt_SeitenDir'</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<br>***<br>"</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>@<span class="token function">opendir</span> <span class="token punctuation">(</span><span class="token variable">$_SERVER</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'MyAkt_SeitenDir'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">echo</span> <span class="token constant">PHP_EOL</span><span class="token punctuation">;</span> <span class="token keyword">require_once</span> <span class="token punctuation">(</span><span class="token variable">$_SERVER</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'MyAkt_SeitenDir'</span><span class="token punctuation">]</span> <span class="token operator">.</span> <span class="token string single-quoted-string">'/meta_ind.php'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token keyword">echo</span> <span class="token string single-quoted-string">'Unzulässiger Aufruf: require_once ('</span> <span class="token operator">.</span> <span class="token variable">$_SERVER</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'MyAkt_SeitenDir'</span><span class="token punctuation">]</span> <span class="token operator">.</span> <span class="token string single-quoted-string">'/meta_ind.php)'</span><span class="token punctuation">;</span> <span class="token keyword">exit</span><span class="token punctuation">;</span> </code></pre> <p>Obwohl laut Testausgabe $_SERVER['MyAkt_SeitenDir'] vorhanden ist, kommt die nachfolgende Fehlermeldung:</p> <blockquote> <p>*** $_SERVER['MyAkt_SeitenDir' = /home/mydom/htdocs/de/zSeite<br> ***<br> Unzulässiger Aufruf: require_once (/home/mydom/htdocs/de/zSeite/meta_ind.php)</p> </blockquote> https://forum.selfhtml.org/self/2024/jan/31/firefox-bei-ende-sollen-einige-cookies-nicht-geloscht-werden?srt=yes Linuchss 2024-01-31T19:55:20Z 2024-01-31T19:55:20Z Firefox: Bei Ende sollen einige Cookies NICHT gelöscht werden <p>Moin,</p> <p>abends schließe ich den Firefox (Ubuntu), damit der ganze Dreck an Cookies gelöscht wird.</p> <p>Jedoch soll selfhtml ausgenommen sein:</p> <p><a href="/images/b2857738-c071-11ee-bfc1-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/b2857738-c071-11ee-bfc1-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p><a href="/images/5fbf3c68-c072-11ee-b0ff-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/5fbf3c68-c072-11ee-b0ff-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Cookies werden trotzdem gelöscht. Was läuft da schief?</p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2024/jan/17/lesetipp-accessible-notifications-with-aria-live-regions-sara-soueidan?srt=yes Matthias Scharwies mscharwies@selfhtml.org 2024-01-17T07:47:00Z 2024-01-17T07:47:00Z Lesetipp: Accessible notifications with ARIA Live Regions (Sara Soueidan) <p>Guten Morgen,</p> <p>Sara Soueidan hat 2 Kapitel ihres neuen Buchs zum Vorablesen veröffentlicht:</p> <ul> <li><a href="https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-1/" rel="nofollow noopener noreferrer">Accessible notifications with ARIA Live Regions (Part 1)</a></li> <li><a href="https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-2/" rel="nofollow noopener noreferrer">Accessible notifications with ARIA Live Regions (Part 2)</a></li> </ul> <hr> <p>Fundstücke auf <a href="https://bildung.social/@selfhtml" rel="nofollow noopener noreferrer">Mastodon</a>:</p> <p><a href="/images/6b2e4150-b50c-11ee-a082-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/6b2e4150-b50c-11ee-a082-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p><a href="/images/73693208-b50c-11ee-a6a1-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/73693208-b50c-11ee-a6a1-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p><strong>Fazit</strong>: Verwende Aria nur, wenn Du weißt, was du tust!</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Die Signatur findet sich auf der Rückseite des Beitrags. </div> https://forum.selfhtml.org/self/2023/dec/18/mathematik-zur-letzten-adventswoche?srt=yes ottogal 2023-12-18T11:23:21Z 2023-12-19T06:49:15Z Mathematik zur letzten Adventswoche <p>Hallo in die Runde!</p> <p><a href="/images/abb57aae-9d97-11ee-9193-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/abb57aae-9d97-11ee-9193-9c6b00263d9f.png?size=medium" alt="stern.png" title="stern.png" loading="lazy"></a></p> <p>Die 12 goldenen Punkte sind gleichmäßig auf der Kreislinie verteilt.<br> Die 4 eingezeichneten Strecken verbinden jeweils zwei davon.<br> <em>Man sieht:</em> Diese 4 Strecken gehen durch einen gemeinsamen Punkt.</p> <p>Dies zu beweisen ist die Aufgabe.</p> <p>Viele Grüße<br> ottogal</p> https://forum.selfhtml.org/self/2024/jan/29/dreamweaver-allgemein-und-konkret?srt=yes Detlev 2024-01-29T12:22:54Z 2024-01-29T12:22:54Z Dreamweaver - Allgemein und Konkret <p>Weil mir "Adobe Muse" nicht mehr zur Verfügung steht lerne ich zur Zeit HTML und CSS von Grund auf neu.</p> <p>Allgemein:</p> <p>Das mache ich mit Dreamweaver. Wenn ich bei Fragen dazu im Netz suche, finde ich nur wenige aktuelle Beiträge. Das veranlasst mich zu fragen, ob das Programm überhaupt noch aktuell ist. Es wäre schön, Meinungen von erfahreneren Anwendern aus eurem Kreis zu erhalten. Für mich von Bedeutung ist die Dreamweaver Funktion "Vorlagen".</p> <p>Konkret:</p> <p>Gibt es in Dreamweaver eine Funktion, die folgendes erleichtert?:</p> <ul> <li>Ersetzen Sie das Zeichen & durch die Zeichenfolge &amp; ("Ampersand")</li> <li>Ersetzen Sie das Zeichen < durch die Zeichenfolge &lt; ("lower than")-</li> <li>Ersetzen Sie das Zeichen > durch die Zeichenfolge &gt; ("greater than")-</li> <li>das Zeichen " durch die Zeichenfolge &quot;.</li> </ul> <p>um es dann mittels <code> anzuzeigen. Das einzelne "Suchen und Ersetzen" dieser Zeichen macht nicht wirklich Spass.</p> <p>Danke vorab</p> https://forum.selfhtml.org/self/2024/jan/28/wie-kann-ich-die-existenz-eines-variablennamens-innerhalb-der-datenbank-prufen?srt=yes A. Meier 2024-01-28T00:48:42Z 2024-01-28T00:48:42Z Wie kann ich die existenz eines variablennamens innerhalb der Datenbank prüfen <p>Hallo, ich lese über $_POST übergebene Variablen aus. Dann erfolgt ein UPDATE über die Datenbank.</p> <p>Problem, nicht alle übergebenen Variablen existieren in der Datenbank als (Feldnamen)!</p> <p>Daher Fehler und Abbruch der PHP ausführung. (Fehler erst seit Umstellung von PHP 8.0 auf 8.1!!) (Ausgabe: ...Uncaught mysqli_sql_exception: Unknown column 'Feldnamen'...) Fehlerzeile: ...mysqli_query...</p> <p>Frage: Wie kann ich die in der Datenbank existierenden Feldnamen mit den übergebenen Variablen (durch $_POST) vergleichen. (nicht die Inhalte!!)</p> <p>Gruß und Danke</p> https://forum.selfhtml.org/self/2024/jan/18/suchmaschinen-management?srt=yes fietur 2024-01-18T12:10:47Z 2024-01-18T12:10:47Z Suchmaschinen-Management <p>Hallo, ich habe ein praktische Frage, die zwar nicht unmittelbar etwas mit HTML zu tun hat, aber große Auswirkungen haben kann.</p> <p>Ich kenne drei Möglichkeiten der Zugangs-/Scan-Begrenzung:</p> <ul> <li>die robots.txt</li> </ul> <p>Dort verbiete ich den Zugriff auf Dateitypen wie PDFs oder einzelne Ordner; wer sich nicht daran hält, landet auf meiner schwarzen Liste; funktioniert ganz gut, nachdem die ohnehin robots-ignoranten Crawler aussortiert wurden.</p> <ul> <li>die .htaccess</li> </ul> <p>Hier steht das Gleiche in <s>grün</s> wirksam:</p> <pre><code class="block"><FilesMatch "\.(png|jpe?g|webp|gif|mp4|mp3)$"> Header set X-Robots-Tag "noindex" </FilesMatch> <FilesMatch "\.pdf$"> Header set X-Robots-Tag "noindex, nofollow" </FilesMatch> </code></pre> <ul> <li>Direkt auf der Seite im <head></li> </ul> <p>Ich habe derzeit noch ein <code><meta name="robots" content="noindex,nofollow"></code> eingebunden. Das funktioniert zu meiner Überraschung sehr gut - bisher wird die Seite noch von keiner Suchmaschine gelistet. Zwar kamen die ersten Besucher aus Fernost (und -west) bereits wenige Stunden nach Registrierung der Domain, aber die Zahl der (unnötig bis unerwünschten) Zugriffe liegt noch erfreulich niedrig.</p> <p>Dass die Seite nicht auffindbar ist, soll jedoch kein Dauerzustand bleiben. Zwar verfolgt die Seite keinerlei kommerzielle Interessen, aber eine Auffindbarkeit auch ohne genaue Kenntnis des Domainnamens sollte dennoch gegeben sein. Dazu brauche ich nur <code>noindex</code> wieder zu entfernen, das ist schon klar.</p> <p>Aber es gibt Fallstricke. Ich habe beispielsweise für manche Beiträge eine Bewertungsfunktion in Form zweier als Buttons getarnter Links. Sollte ein Robot einen dieser Links anwählen (und sich für das voten des anderen disqualifizieren), verfälscht das die Bewertung und Beteiligung. Hier wäre ein <code>rel="nofollow"</code> im <code><a href=...></code> das Mittel der Wahl, oder?</p> <p>Ein anderes Problem ist, dass ich neben nicht zu indizierenden Dokumenten (PDF's) auf der Startseite unterschiedliche Beiträge aufführe. Einige davon dürfen oder sollen indiziert werden, während andere eher nur für menschliche und bereits auf der Seite befindliche Besucher gedacht sind. Und hier lautet meine Frage: Wie kann ich für solche <code><article></code> ein Finetuning vornehmen, so dass Google und Co einzelne davon indizieren, andere aber links liegen lassen?</p> https://forum.selfhtml.org/self/2024/jan/10/frage-zum-wiki-artikel-flyout-men-c3-bc-bzgl-details?srt=yes Robert B. 2024-01-10T08:12:37Z 2024-01-10T08:12:37Z Frage zum Wiki-Artikel „Flyout-Menü“ bzgl. details <p>Hallo zusammen, hallo <a href="/users/3833" class="mention registered-user" rel="noopener noreferrer">@Matthias Scharwies</a>,</p> <p>im o.g. Wikiartikel heißt es zur <a href="https://wiki.selfhtml.org/wiki/Navigation/Flyout-Men%C3%BC#Alternative:_details" rel="nofollow noopener noreferrer">alternativen Verwendung des <code>details</code>-Elements</a>:</p> <blockquote> <p>Screenreader lesen das details-Element als „“ vor, was natürlich abschreckend ist.</p> </blockquote> <p>Wird damit der komplette Inhalt von <code>details</code> nicht vorgelesen oder wie ist dieser Hinweis zu verstehen?</p> <p>Vielen Dank und viele Grüße<br> Robert</p> https://forum.selfhtml.org/self/2024/jan/26/das-smartphone-als-externe-festplatte-zu-benutzen-funktioniert-nicht-richtig?srt=yes Hans 2024-01-26T08:52:56Z 2024-01-26T08:52:56Z Das Smartphone als externe Festplatte zu benutzen funktioniert nicht richtig <p>Hallo Leute,</p> <p>ich habe ein Blackviews N6000-Smartphone, mit dem ich ganz zufrieden bin. Es hat eine ausreichend großen Speicherplatz. Wenn ich jedoch mittels USB etwas hinüberkopiere, dauert es ewig (ca. 5h für 1GB!). Die Dateien sind dann jedoch am Laptop nicht benutzbar. Bei meinem älteren Smartphone klappt das jedoch ohne Probleme. Weiß jemand, ob es dafür eine Lösung gibt? Kann es sein, dass der Smartphone-Speicher bei einigen Modellen grundsätzlich langsamer funktioniert und nicht als externe Festplatte brauchbar ist?</p> <p>Vielen Dank! Beste Grüße, Hans</p> https://forum.selfhtml.org/self/2024/jan/23/von-japan-lernen-matheunterricht-der-zum-denken-anregt?srt=yes Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2024-01-23T07:15:45Z 2024-01-23T07:15:45Z Von Japan lernen: Matheunterricht, der zum Denken anregt <p>Interessanter Artikel, auch für die hier versammelte Lehrerschaft: <a href="https://deutsches-schulportal.de/unterricht/von-japan-lernen-matheunterricht-der-zum-denken-anregt/?utm_source=pocket-newtab-de-de" rel="nofollow noopener noreferrer">Von Japan lernen: Matheunterricht, der zum Denken anregt</a></p> <p>Teaser: Im Dezember hat die neue PISA-Studie bestätigt, was viele schon haben kommen sehen: die schlechtesten Ergebnisse aller Zeiten für Deutschland, ein dramatischer Absturz seit 2018 – wie in vielen anderen Ländern auch. Nicht so in Japan; dort sind die Leistungen in Mathematik gestiegen. Seit Jahren belegt das Land Spitzenplätze in den Rankings. Das <em>Schulportal</em> hat sich den Matheunterricht in Japan genauer angesehen – mit überraschenden Befunden.</p> <p lang="art-x-kwejian">Kwakoni Yiquan</p> <div class="signature">-- <br> <em lang="la">Ad astra per aspera</em> </div> https://forum.selfhtml.org/self/2024/jan/14/selfhtml-treffen-am-27-januar?srt=yes Matthias Scharwies mscharwies@selfhtml.org 2024-01-14T06:08:59Z 2024-02-04T14:17:21Z SELFHTML-Treffen am 27. Januar <p>Guten Morgen,</p> <p>liebe Mitglieder des Vereins und Interessierte,</p> <p>am 27.01. startet um 10:00 unser <a href="https://forum.selfhtml.org/events/9" rel="noopener noreferrer"><strong>SELFHTML-Treffen 2024-01</strong></a> auf Discord.</p> <p>Wir hatten am letzten SELF-Treffen im Novenber einige Arbeitsgruppen gebildet, deren Ergebnisse wir vorstellen und diskutieren möchten.</p> <hr> <p>Parallel habe ich auf <a href="https://bildung.social/@selfhtml/111748380866545840" rel="nofollow noopener noreferrer">Mastodon</a> und Discord Umfragen gestartet, wie wir unsere Leser ansprechen sollen.</p> <p>Das kann nach einer Zielgruppendefinition der nächste Schritt sein, welche Regeln wir für künftige Redaktionsarbeit aufstellen wollen.</p> <p>Ich freue mich auf alle und eine fruchtbare Diskussion.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <p>BTW: Ich wundere mich immer wieder über das regelmäßig erscheinende Feedback auf unseren Blog-Artikel vom 01.11. - Die Leute sehen das wohl auf der Startseite. Da muss ich (das eingebundene) <a href="https://wiki.selfhtml.org/wiki/SELFHTML/Blog" rel="nofollow noopener noreferrer">SELFHTML/Blog</a> wohl öfter aktualisieren, oder doch einen RSS-Feed programmieren!</p> <div class="signature">-- <br> Die Signatur findet sich auf der Rückseite des Beitrags. </div> https://forum.selfhtml.org/self/2024/jan/24/parameterubergabe-von-konventionellem-php-programm-zu-objektor-programm?srt=yes Silja 2024-01-24T19:26:41Z 2024-01-24T19:26:41Z Parameterübergabe von konventionellem PHP-Programm zu objektor. Programm <p>Hallo,<br> wie wird ein objektorientiertes Programm aus einem konventionellen PHP-Programm aufgerufen und wie kann ich im folgenden Statement</p> <pre><code class="block">$mail->Subject = 'Here is the subject'; </code></pre> <p>den Text 'Here is the subject' als Parameter übergeben?</p> https://forum.selfhtml.org/self/2024/jan/21/mit-audacity-einen-song-einen-halben-ton-tiefer-setzen-wie?srt=yes Linuchs 2024-01-21T00:53:38Z 2024-01-21T00:53:38Z Mit Audacity einen Song einen halben Ton tiefer setzen - wie? <p>Moin, liebe Musiküsse,</p> <p>„<a href="https://yt.artemislena.eu/watch?v=Q9xCXO_PCQI" rel="nofollow noopener noreferrer">Heute hier, morgen dort</a>“ wird von Hannes Wader in C# gesungen.</p> <p>Wir (Ukulele-Anfänger) möchten die Audio-Datei auf C ändern, um es begleiten zu können.</p> <p>Ich habe es mit Audacity trotz mehrerer „Anleitungen“ nicht hinbekommen, die Tonart gezielt „abzusenken“. Habe nur Vorschläge gefunden, wie man Aliens oder Monster sprechen lassen kann. Aber keinen gezielten Wechsel der Tonart.</p> <p>Dies und mehr habe ich versucht: [Effekt] - [Tonhöhe ändern]</p> <p><a href="/images/e73f56a8-b7f5-11ee-a0b3-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/e73f56a8-b7f5-11ee-a0b3-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Habe nicht den geringsten Verdacht, was Halbtöne in Halbschritten sein könnten. Diverse Ganzzahlen mit + und - ausprobiert und nicht hinter das Konzept gekommen.</p> <p>Wer kann helfen?</p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2024/jan/25/angualr-und-zoomen?srt=yes Lowterm 2024-01-25T12:24:09Z 2024-01-25T12:24:09Z Angualr und Zoomen <p>Hallo zusammen,</p> <p>ich habe da ein Problem mit dem Vergrößern eines Bildes im Browser. Ich zoome via JS (in Angular) ein beliebiges Bild, solange bis das Bild großer als der Anzeigebereich des Browsers ist. Bis dahin ist auch alles gut. Das Problem ist, dass man nun nur nach rechts scrollen kann und der Linke Bereich des Bildes, der sich nun außerhalb des Browser-Sichtbereches befindet, nicht mehr zu sehen ist und der Scrollbalken auch bereits ganz links steht und man kann auch nicht mehr weiter nach links scrollen, um das restliche Bild zu sehen.</p> <p>Gibt es einen Trick, wie man handhaben kann oder mit css?</p> <pre><code class="block language-css"> <span class="token selector">:host</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.scroll-container</span> <span class="token punctuation">{</span> <span class="token property">flex-grow</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">-ms-overflow-style</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">flex-direction</span><span class="token punctuation">:</span> row<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.zoom</span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">flex-shrink</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.29<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">-webkit-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">-ms-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Liegt es eventuell an dem bereits verwendeten CSS?</p> <p>Gruß</p> https://forum.selfhtml.org/self/2024/jan/24/25-01-css-cafe-blind-css-exfiltration-stealing-user-data-from-unknown-web-pages-via-css?srt=yes Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2024-01-24T10:27:40Z 2024-01-24T10:27:40Z 25.01. CSS Café: Blind CSS Exfiltration: Stealing user data from unknown web pages via CSS <p>Morgen, 25.01 16:00 im CSS Café mit Gareth Heyes: <a href="https://www.meetup.com/css-cafe/events/298480761/" lang="en" rel="nofollow noopener noreferrer">Blind CSS Exfiltration: Stealing user data from unknown web pages via CSS</a></p> <p><em lang="en">This talk delves into a new hacking attack class of Blind CSS Exfiltration! A method to extract data using pure CSS from unknown web pages even when executing scripts is not an option due to strict Content Security Policy (CSP) or sanitization mechanisms like DOMPurify.</em></p> <p><em lang="en">I’ll begin by discussing the landscape of current CSS exfiltration techniques and their limitations. The talk then introduces the concept of Blind CSS Exfiltration, focusing on its reliance on CSS variables and attribute selectors to extract data. A key aspect of this technique is the novel use of the :has CSS selector, which significantly broadens the scope of data that can be exfiltrated from unknown web page structures.</em></p> <p><em lang="en">Throughout the presentation, I will demonstrate how CSS variables can be employed as triggers for conditional requests using background images, and how attribute selectors can be used to extract specific data based on the presence or absence of certain characters.</em></p> <p><em lang="en">I will also explore using the combination of :has and :not selectors to skip already exfiltrated data, and the utilisation of @import chaining for extracting a large amount of data. The session will culminate with practical demonstrations, including the use of a server to initiate the exfiltration process and display the results in the browser in pure CSS.</em></p> <p><em lang="en">Attendees will leave with a deeper understanding of CSS’s potential for exfiltration and the skills to test for and protect against this new attack.</em></p> <p lang="art-x-kwejian">Kwakoni Yiquan</p> <div class="signature">-- <br> <em lang="la">Ad astra per aspera</em> </div> https://forum.selfhtml.org/self/2024/jan/21/gutes-mailprogramm-gesucht?srt=yes Lothar 2024-01-21T09:49:23Z 2024-01-21T09:49:23Z Gutes Mailprogramm gesucht <p>Hi,<br> mit welchem PHP-Mailprogramm kann ich in Windows 11 möglichst sicher mails versenden, die ich aufgrund von Angaben im Kontaktformular generiere?<br> Danke Lothar</p> https://forum.selfhtml.org/self/2024/jan/17/in-welcher-reihenfolge-werden-domcontentloaded-abgearbeitet?srt=yes Linuchs 2024-01-17T13:37:09Z 2024-01-17T13:37:09Z In welcher Reihenfolge werden DOMContentLoaded abgearbeitet? <p>Moin,</p> <p>für Liedtexte mit Audio- und Videospuren lade ich mehrere .js Dateien</p> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</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>../css/formatiert_a3_a5_a6.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><span class="token comment"><!-- *.htm?a6 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</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>../css/setze_seitenzahlen.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><span class="token comment"><!-- *.htm?a6Nr.04 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</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>../css/lied_mehrspurig.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</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>../css/tempo_handler.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</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>../css/setze_akkorde.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> </code></pre> <p>und jede enthält</p> <pre><code class="block language-js">window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'DOMContentLoaded'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> </code></pre> <p>Wenn die Akkorde gesetzt werden, wird in lied_mehrspurig die Lautstärke NICHT verringert.</p> <p>Da ich keine Idee habe, ob diese Funktionen nacheinander oder zeitgleich abgearbeitet werden, weiß ich nicht, nach welcher Art Fehler ich suchen muss.</p> <p>Javascript meldet keine Fehler, aber macht es einfach nicht</p> <pre><code class="block language-js"><span class="token comment">// alle Audios auf halbe Lautstaerke</span> <span class="token keyword">for</span> <span class="token punctuation">(</span> <span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator"><</span>document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span> <span class="token string">"audio"</span> <span class="token punctuation">)</span><span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span> <span class="token punctuation">)</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span> <span class="token string">"audio"</span> <span class="token punctuation">)</span><span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>volume <span class="token operator">=</span> <span class="token number">0.2</span><span class="token punctuation">;</span> </code></pre> <p>Habe den Dateien-Mix auf den Server geladen, damit ihr inspizieren könnt.</p> <p>Vom Server geholt, wird jetzt (bei mir) die Tonart (C ist Standard) nicht gesetzt, das Ergebnis sieht so aus:</p> <p><a href="/images/2cc6ed5a-b53d-11ee-92e0-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/2cc6ed5a-b53d-11ee-92e0-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>To|nika Do|minante Su|bdominante sollte so aussehen:</p> <p><a href="/images/ecf502c0-b53c-11ee-a0a5-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/ecf502c0-b53c-11ee-a0a5-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2024/jan/20/frefox-119-0-1-i-tag-wird-nicht-ausgefuhrt-sondern-angezeigt?srt=yes Linuchs 2024-01-20T09:44:16Z 2024-01-20T09:44:16Z Frefox 119.0.1 <i> tag wird nicht ausgeführt, sondern angezeigt. <p>10:49 Bevor sich jemand reinkniet, ich habe da einen Verdacht ...</p> <p>10:53 ja, den generierten String übergebe ich mit <code>htmlspecialchars( $row['bezeichnung1'] )</code></p> <p>also <strong>falscher Alarm</strong>. Seltsam, dass das bei [Untersuchen] verschwiegen wird.</p> <p>Moin,</p> <p>wenn ich mit einem Teilstring suche, z.B. schoko, dann möchte ich alle Artikelbezeichnungen, die schoko enthalten.</p> <p>Bei der Anzeige soll der Suchbegriff rot eingefärbt werden, aber Firefox zeigt dieses:</p> <p><a href="/images/c4150e0e-b776-11ee-8e4a-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/c4150e0e-b776-11ee-8e4a-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Natürlich habe ich mir das unter [Untersuchen] angesehen:</p> <p><a href="/images/57fae09e-b777-11ee-9e0a-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/57fae09e-b777-11ee-9e0a-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>und verstehe nicht, warum <code><i></code> nicht ausgeführt wird. Erst als ich den Part aus der Konsole (äußeres HTML) hierher kopiere, sehe ich Seltsames:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>artikel_id=8<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 attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/?zp=p202<span class="token entity named-entity" title="&">&amp;</span>artikel_id=8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token entity named-entity" title="<">&lt;</span>i class='crot'<span class="token entity named-entity" title=">">&gt;</span>Schoko<span class="token entity named-entity" title="<">&lt;</span>/i<span class="token entity named-entity" title=">">&gt;</span>lade Honig-Salz-Mandel<span class="token entity named-entity" title="&nbsp;">&nbsp;</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>td</span><span class="token punctuation">></span></span> </code></pre> <p>Mit PHP generiere ich das so:</p> <pre><code class="block language-php"> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token variable">$cookie_bezeichnung1</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// GESUCHTE ZEICHEN bezeichnung1 MARKIEREN</span> <span class="token variable">$heystack</span> <span class="token operator">=</span> <span class="token function">mb_strtolower</span><span class="token punctuation">(</span> <span class="token variable">$row</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'bezeichnung1'</span><span class="token punctuation">]</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token variable">$needle</span> <span class="token operator">=</span> <span class="token function">mb_strtolower</span><span class="token punctuation">(</span> <span class="token variable">$cookie_bezeichnung1</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token variable">$start_pos</span> <span class="token operator">=</span> <span class="token function">mb_strpos</span><span class="token punctuation">(</span> <span class="token variable">$heystack</span><span class="token punctuation">,</span> <span class="token variable">$needle</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token variable">$row</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'bezeichnung1'</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">mb_substr</span><span class="token punctuation">(</span> <span class="token variable">$row</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'bezeichnung1'</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token variable">$start_pos</span> <span class="token punctuation">)</span> <span class="token operator">.</span><span class="token string double-quoted-string">"<i class=crot>"</span><span class="token operator">.</span><span class="token function">mb_substr</span><span class="token punctuation">(</span> <span class="token variable">$row</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'bezeichnung1'</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token variable">$start_pos</span><span class="token punctuation">,</span><span class="token function">mb_strlen</span><span class="token punctuation">(</span><span class="token variable">$needle</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token operator">.</span><span class="token string double-quoted-string">"</i>"</span> <span class="token operator">.</span><span class="token function">mb_substr</span><span class="token punctuation">(</span> <span class="token variable">$row</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'bezeichnung1'</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token variable">$start_pos</span> <span class="token operator">+</span><span class="token function">mb_strlen</span><span class="token punctuation">(</span><span class="token variable">$needle</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Woanders funktioniert das dutzende Male, was ist in diesem Fall falsch?</p> <p>Das Programm ist leider nicht öffentlich.</p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2024/jan/19/zertifikatsproblem-nach-providerwechsel?srt=yes Gerdi 2024-01-19T20:55:36Z 2024-01-19T20:55:36Z Zertifikatsproblem nach Providerwechsel <p>Guten Abend,<br> wenn ich beim neuen Provider meine Daten mit filezilla hochladen möchte, kommt die Meldung "Hostname passt nicht zum Zertifikat".<br> Angezeigt werden noch Zertifikats-Daten des früheren Providers.<br> Wie kann ich dies beheben?<br> Grüße Gerdi</p> https://forum.selfhtml.org/self/2024/jan/16/popover-statt-per-klick-per-mouseover-offnen?srt=yes MudGuard http://www.andreas-waechter.de/ 2024-01-16T17:11:18Z 2024-01-16T17:11:18Z Popover statt per Klick per Mouseover öffnen? <p>Hi,</p> <p>ich nutze auf einer "nur für mich" Seite (also muß nix Barrierefreies sein, Maus ist vorhanden) viele Popovers a la</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">popovertarget</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>special33<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Zeigen<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>figure</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>special33<span class="token punctuation">"</span></span> <span class="token attr-name">popover</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>auto<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>/img/sonder/23/2014_1.webp<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>Sonder 2014-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>figcaption</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>Sonder, Jahr 2014, Nr. 1<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>p</span><span class="token punctuation">></span></span>Das Besondere des Besonderen<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>figcaption</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span> </code></pre> <p>Das funktioniert auch wunderbar (im Firefox erst, nachdem ich das Feature enabled hab, aber auch das ist kein Problem, ist ja nur für mich).</p> <p>Ach ja, vielen Dank an denjenigen (ich find's grad nicht mehr), der das popover-Zeug hier vor ein paar Wochen mal erwähnt hat!</p> <p>So, funktionieren tut's. Auch, daß das Popover geschlossen wird, wenn ich auf einen anderen "Zeigen"-Button klicke. Derzeit sind's so um die 600 solche Buttons.</p> <p>Ich hätte gerne (zusätzlich?), daß sich das Popover nicht erst bei Klick auf den Button öffnet, sondern bereits, wenn die Maus über dem Button schwebt.</p> <p>Ist das mit <strong>kleinem</strong> Aufwand möglich? Gibt's da evtl. ein Attribut a la popoveractivation="hover" oder so?</p> <p>Kiloweise Javascript würde ich eher ungern einbauen.</p> <p>Danke,</p> <p>Andreas a/k/a MudGuard</p> https://forum.selfhtml.org/self/2024/jan/18/was-ist-der-user-agent-go-http-client-2-0?srt=yes oxo888oxo 2024-01-18T13:51:55Z 2024-01-18T13:51:55Z Was ist der User agent Go-http-client/2.0 ? <p>Hallo</p> <p>In meinen Server-Logfiles finde ich sehr oft den Useragent Go-http-client/2.0. Ist das ein Bot? Oder ist das was anderes? Macht es Sinn, den bei mir auszusperren?</p> <p>Gruß Ingo</p> https://forum.selfhtml.org/self/2024/jan/18/firefox-viele-instanzen-obwohl-nur-startseite?srt=yes Lisa 2024-01-17T23:24:11Z 2024-01-17T23:24:11Z Firefox viele Instanzen obwohl nur Startseite <p>Hi,</p> <p>kann mir jemand erklären warum Firefox so viele Instanzen öffnet, obwohl ich doch nur die Startseite aufrufe? Das war früher nicht. Wenn ich den Browser schliesse, taucht der auch nicht mehr in Taskmanager auf, aber solbald ich öffne direkt mal 10 Instanzen.</p> <p><a href="/images/67555694-b58f-11ee-a1be-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/67555694-b58f-11ee-a1be-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>lg.</p> https://forum.selfhtml.org/self/2024/jan/12/sehr-dunne-link-unterstreichungen?srt=yes oxo888oxo https://spaceart.de/ 2024-01-12T10:54:44Z 2024-01-12T10:54:44Z Sehr dünne Link-Unterstreichungen <p>Hallo</p> <p>Es geht mir um das Thema Link-Unterstreichung. Man soll aus verschiedenen Gründen Links ja unterstrichen darstellen.</p> <p>Auf meiner Website setze ich das auch um. Aber die Unterstreichung hätte ich gerne noch dezenter.</p> <p>Ich habe heute eine Website gefunden, auf der das sehr schön gelungen ist. Und zwar diese hier: <a href="https://kulturbanause.de/" rel="nofollow noopener noreferrer">https://kulturbanause.de/</a></p> <p>Könnt Ihr mir sagen, wie man es hinbekommt, dass die Unterstreichungen so schön dünn sind?</p> <p>Gruß Ingo</p> https://forum.selfhtml.org/self/2024/jan/16/ist-meine-seite-safe-ohne-cookie-banner?srt=yes Christian der Unentbehrliche 2024-01-16T16:43:12Z 2024-01-16T16:43:12Z Ist meine Seite "safe" ohne Cookie Banner? <p>Hallo an alle,</p> <p>ich würde gerne diesen hässlichen Cookie Banner auf meiner Webseite vermeiden.</p> <p>Hoste alle Google Fonts selbst, die Grundstruktur meiner Seite wurde auch von mir gescriptet (einfache HTML/CSS/JavaScript/PHP Kombination), allerdings benutze ich Plugins für eine 3D Visualisierung, bei denen ich mir nicht sicher sind, ob die nicht nach Hause telefonieren.</p> <p>Die Netzwerkanalyse der Browser Entwicklertools gibt als Host für sämtliche Ressourcen aber <code>localhost</code> an, daher scheint an dieser Front alles klar zu sein.</p> <p><code>http://localhost</code> scheint zwar in <code>Local Storage</code>, <code>Session Storage</code>, <code>Cookies</code> und <code>Shared Storage</code> des Anwendungen-Reiters auf, dort finden sich aber keine Einträge.</p> <p>Außerdem habe ich eine YouTube Link, der aber erst "freigeschalten" werden muss (YouTube wird nach Erlaubnis via PHP nachgeladen und eingebettet). Diese "Freischaltung" muss seitens der UserInnen erfolgen, denen folgender Text vorgesetzt wird:</p> <pre><code class="block">Sie sind im Begriff, ein externes YouTube Video zu laden. Hierbei gelten die Cookiebestimmungen und Nutzungsbedingungen von YouTube. Hier klicken, um fortzufahren. </code></pre> <p>Ist meine Seite safe für den Upload ins Weltweite Netz oder übersehe ich noch etwas?</p> <p>Vielen Dank! Christian</p> https://forum.selfhtml.org/self/2023/dec/06/umstellung-mariadb-nun-codierungsproblem?srt=yes 1211chef 2023-12-06T12:03:16Z 2023-12-06T12:03:16Z umstellung mariadb, nun codierungsproblem <p>hi leute, ich war schon ewig nicht mehr aktiv hier.</p> <p>mein serverbetreiber hat von mariadb 10.3 auf 10.6 ungestellt, und nun habe ich ein umlautproblem.</p> <p>in meinen alten perlscripten lese ich sql daten ein und speichere sie auch, collation der textfelder stehen alle auf latin1_swedish_ci. hat bisher immer problemlos funktioniert, alle ausgaben und eingaben mit umlauten korrekt, aber seit der umstellung nicht mehr.</p> <p>mein problem ist jetzt auch, liegt es an alten programmierfehlern meinerseits, oder hat mein serverbetreiber irgendeine einstellung falsch gesetzt?</p> <p>da ich in perl einlese, kann es damit zusammenhängen?</p> <p>ich will jetzt ungern im datenbestand rumpfuschen, eine spalte hab ich leider eh schon vernichtet weil ich versucht habe auf utf8mb4 umzustellen. war ein fehler leider.</p> <p>im moment komme ich nicht weiter, und mein serverbetreiber sagt es liegt an mir ...</p> <p>grüsse, gust</p> https://forum.selfhtml.org/self/2024/jan/13/wer-sucht-hat-gerade-zu-viel-zeit?srt=yes nix 2024-01-13T20:03:00Z 2024-01-13T20:03:00Z Wer sucht hat gerade zu viel Zeit? <p><a href="https://forum.selfhtml.org/self/2024/jan/12/sehr-dunne-link-unterstreichungen/1812739#m1812739" rel="noopener noreferrer">Beim Karnickel-Thema</a> bin ich im Nachgang auf eine (vage) Idee gekommen.<br> Wegen eines Problems, das ich (vom Wesen her) auch andernorts sehe. Dabei geht es darum, daß man lange suchen kann, wenn man zwar „im richtigen Buch“ sucht, dabei aber nicht weiß, welches Kapitel das Gesuchte beschreibt und es nicht nur (wenn überhaupt) erwähnt. Laßt mich als Beispiel das Thema mit der Link-Unterstreichung „des Karnickels“ (s.o.) nehmen: es gibt einige Möglichkeiten, sich der gewünschten Darstellung zu nähern. Wer nicht sowieso schon weiß, wie das mit dem Unterstreichen funktioniert, versucht es vielleicht damit, im Wiki die Suchfunktion mit „text“ zu füttern … oder doch eher etwas mit … hmmm „a“? Eher „Link“? …<br> Jedenfalls muß man schnell mal ausgiebig suchen, dabei öfter mal längere Listen mit Bezeichnern auf sich vielleicht erleuchtende Lämpchen (wer hat schon Düsentriebs Helferlein zur Hand, das ggf. zuflüstert, was so ein „ungefähr englisches Wort“ assoziieren könnte?) hin abklopfen.</p> <p>Jedenfalls habe ich so eine (aber leider wenig konkrete) Ahnung von einer grafischen Darstellung ähnlich der Inspektoren (Layout → Boxmodell), von der aus man durch Anklicken entsprechender Teile der jeweiligen Darstellung zu einer Übersicht „vielleicht thematisch passend“ gelangt. Also z. B. „unten rum“ findet man dann <code>text-decoration</code>, <code>border-bottom</code> (mit Erwähnung von <code>border</code>und auch <code>border-block˚ …), </code>outline` …</p> <p>Irgendwie könnte man damit zwar auch nicht verhindern, daß sich diese „Karnickel“ so vermehren. Aber wenn man wenigstens einen „Stall“ findet, in dem das gesuchte, das richtige, sitzt … (und dann bitte fast das Gleiche nochmal, aber zu Swift, den da zu findenden Objektstrukturen … oder: was geht schneller? Das Rad zum drölfzigsten Mal erfinden oder mit Suchmaschinen um erleuchtende Suchbegriffe ringen? — Ja, klar, der Teil ist hier OT)</p> https://forum.selfhtml.org/self/2024/jan/13/frage-zum-wiki-artikel-text?srt=yes nix 2024-01-13T19:51:57Z 2024-01-13T19:51:57Z Frage zum Wiki-Artikel „text“ <p>Ist das so beabsichtigt? <a href="/images/2860f136-b24d-11ee-9a6d-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/2860f136-b24d-11ee-9a6d-9c6b00263d9f.png?size=medium" alt="Ein Fehler? Oder ein Fehler! Das ist hier die Frage." loading="lazy"></a> Ich hatte jedenfalls beim Hinsehen erst mal gedacht, da hätte jemand <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Validierungs-Stylesheet" rel="nofollow noopener noreferrer">so ein spezielles Stylesheet</a> liegen lassen.</p> https://forum.selfhtml.org/self/2024/jan/12/scanner-liefert-tab-als-suffix-wie-erkenne-ich-das-keydown-greift-nicht?srt=yes Linuchs 2024-01-12T20:09:58Z 2024-01-12T20:09:58Z ERLEDIGT: Scanner liefert TAB als Suffix, wie erkenne ich das? Keydown greift nicht? <p>Moin,</p> <p><strong>HAT SICH ERLEDIGT, der Tab von Scanner wird als keydown erkannt.</strong></p> <p>heute ist mein EAN Scanner gekommen, damit ich meine Einkäufe erfassen kann.</p> <p>Bisher habe ich EAN per Tastatur eingegeben und ab 3 Stellen kommen per Ajax Vorschläge, von denen ich einen per Klick übernehmen kann. Das soll auch so bleiben:</p> <p><a href="/images/9cbd64ac-b184-11ee-a7f7-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/9cbd64ac-b184-11ee-a7f7-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Der Scanner liefert die EAN mit dem Suffix TAB. Dann muss ich keine Vorschläge holen, sondern gezielt diesen einen Datensatz und damit die Felder der form füllen, als ob ich einen Vorschlag gewählt hätte. Falls der Satz fehlt, muss der Artikel neu angelegt werden.</p> <pre><code class="block language-js"><span class="token operator"><</span>input id <span class="token operator">=</span> <span class="token string">"such_ean"</span> type <span class="token operator">=</span> <span class="token string">"text"</span> name <span class="token operator">=</span> <span class="token string">"ean"</span> size <span class="token operator">=</span> <span class="token number">13</span> maxlength <span class="token operator">=</span> <span class="token number">13</span> value <span class="token operator">=</span> <span class="token string">"[such_ean]"</span> title <span class="token operator">=</span> <span class="token string">"such_ean (20)"</span> oninput <span class="token operator">=</span> <span class="token string">"getEan( this )"</span> onblur <span class="token operator">=</span> <span class="token string">"holeEan( this )"</span> <span class="token operator">></span> <span class="token operator">&</span>nbsp<span class="token punctuation">;</span> art_id <span class="token operator"><</span>span id<span class="token operator">=</span><span class="token string">"id"</span><span class="token operator">></span><span class="token punctuation">[</span>id<span class="token punctuation">]</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> </code></pre> <p>onblur greift sehr wohl, aber das Feld und sein Wert steht der function holeEan nicht mehr zur Verfügung.</p> <p>Mit einem addEventListener auf "such_ean" komme ich auch nicht weiter, da wird ja kein key gedrückt.</p> <p>Und es müssen nicht immer 13 Stellen sei, es gibt kürzere EAN.</p> <p>Hat jemand eine Idee?</p> <p>Gruß, Linuchs</p> <p>P.S. Der Scanner kann auch [Enter] liefern, dann wird aber die form abgeschickt.</p> https://forum.selfhtml.org/self/2024/jan/11/beispielvorschau-kaum-ist-sie-da-schon-ist-sie-wieder-weg?srt=yes Rolf B 2024-01-11T21:48:13Z 2024-01-11T21:48:13Z BeispielVorschau - kaum ist sie da, schon ist sie wieder weg! <p>Hallo alle,</p> <p>ich habe die neue Wikivorlage <code>{{BeispielVorschau}}</code>, die als Alternative zu <code>{{Beispiel}}</code> die direkte Einbindung von iframes in den Wikitext ermöglichen sollte, wieder gelöscht. Wem das nichts sagt, braucht nicht weiterzulesen </p> <p>Löschgrund: <code>{{Beispiel}}</code> kann jetzt beides. Realisiert ist das mit einem Beispielmodul <code>{{LiveBeispiel}}</code>, das man entweder alleine oder zusammen mit <code>{{BeispielCode}}</code>, <code>{{BeispielText}}</code> und <code>{{BeispielWiki}}</code> einsetzen kann. Bei dieser Gelegenheit ist auch der Parameter <code>vorschau-hoehe</code>, den ich nur in <code>{{BeispielVorschau}}</code> eingebaut hatte, mit nach <code>{{Beispiel}}</code> gewandert.</p> <p>Die bisher einzige Seite, auf der <code>{{BeispielVorschau}}</code> verwendet wurde, habe ich umgestellt. Aus</p> <pre><code class="block">{{BeispielVorschau|zeige=Beispiel:Foo.html|vorschau-hoehe=10em}} </code></pre> <p>wird nun</p> <pre><code class="block">{{Beispiel|zeige=Beispiel:Foo.html|vorschau-hoehe=10em| {{LiveBeispiel}} }} </code></pre> <p><em>Edit Rolf b: vorschau<s>e</s></em></p> <p>Das ist zwar verböser, aber dafür innerhalb der Beispiele-Semantik des Wikis logischer. Ich habe die Doku von <code>{{Beispiel}}</code> angepasst.</p> <p>Die Doku anzupassen war die meiste Arbeit. Das JavaScript, das im Hintergrund den iframe und die Tabs erzeugt, konnte das eigentlich schon alles.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2023/oct/19/herbstliche-mathematik?srt=yes Rolf B 2023-10-19T16:24:16Z 2023-10-19T16:24:16Z Herbstliche Mathematik <p>Hallo,</p> <p>ein echter Agg für den Herbst:</p> <p><a href="/images/fa7be542-69bc-11ee-abcd-b42e9947ef30.jpg" rel="noopener noreferrer"><img src="/images/fa7be542-69bc-11ee-abcd-b42e9947ef30.jpg?size=medium" alt="" loading="lazy"></a></p> <p>Ihr kennt diese Aufgaben ja und wisst, dass das richtige Verstehen der Aufgabe üblicherweise Teil des Problems ist.</p> <p>Viel Spaß </p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2024/jan/10/frage-zum-wiki-artikel-bildwechsler?srt=yes Matthias Wagner mat.wagner.87@gmail.com 2024-01-10T22:39:34Z 2024-01-10T22:39:34Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hallo Zusammen</p> <p>ich möchte ein Bildwechsler basteln, bei welchem mehrere einzelne Gallerien erstellt werden. Dass heisst, wie kann ich die Bilder von Peru und Garda trennen? Das heisst ich möchte in der Lightbox nur Bilder der jeweiligen id.</p> <p>Kann mir jemand helfen?</p> <p>Danke euch. Grüsse Matthias</p> https://forum.selfhtml.org/self/2024/jan/10/info-kleiner-bug-in-der-beispiel-vorlage-fixed?srt=yes Rolf B 2024-01-10T21:25:19Z 2024-01-10T21:25:19Z Info: Kleiner Bug in der Beispiel-Vorlage - fixed <p>Hallo alle,</p> <p>ich hatte neulich in der Beispiel-Vorlage, mit der wir diese "Quelltext"/"Vorschau" Tabs für die Wiki-Beispiele machen, einen kleinen Bug eingebaut.</p> <p>Hintergrund: Die Tabs sind eigentlich Links und JS macht Tabs draus - und wenn man mit der rechten Maustaste draufdrückt und "in neuem Tab öffnen" sagt, folgt man dem Link</p> <p>Der Bug war: die URLs waren vertauscht. Das ist nun korrigiert. Sorry, Jürgen!</p> <p>Und damit diejenigen, die gerne den Links folgen, auch ohne rechte Maustaste zurecht kommen, habe ich jetzt noch eingebaut, dass ein Doppelklick dem Link folgt.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2024/jan/03/selfwiki-wie-fange-ich-an?srt=yes Matthias Scharwies mscharwies@selfhtml.org 2024-01-03T06:12:10Z 2024-01-03T06:12:10Z SELFWiki: Wie fange ich an? + Seiteninspektor <p>Servus!</p> <p>Nachdem in den letzten Wochen mehrfach nach dem „richtigen“ Code-Editor gefragt wurde und ich dann immer wieder auf die eher versteckt liegende Seite Grundlagen/Webprojekte/entwickeln verlinkte, habe ich das alles auf</p> <p><a href="https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F" rel="nofollow noopener noreferrer"><strong>Wie fange ich an?</strong></a></p> <p>umgebogen.</p> <p>Das erste Kapitel muss ich noch überarbeiten.</p> <p>Jetzt meine Frage: Wie würdet ihr <a href="https://wiki.selfhtml.org/wiki/Grundlagen/Webprojekte/testen" rel="nofollow noopener noreferrer"><strong>Webprojekte/testen</strong></a> (umbe)nennen?</p> <ul> <li>Webprojekte testen </li> <li>Arbeiten mit dem Seiteninspektor </li> <li>Testen und Entwickeln mit dem Seiteninspektor</li> <li>Der Seiteninspektor - dein Freund und Helfer</li> <li>…</li> </ul> <p>Und wohin würdet ihr das schieben?</p> <ul> <li>im HNR</li> <li>Als Unterseite von Wie fange ich an?</li> <li>Woanders? <ul> <li>Im HTML-Einstieg und auch im CSS-Einstieg wird's angesprochen, dort wäre es aber zu umfangreich.</li> </ul> </li> </ul> <p>Auf jeden Fall muss das dann in die jeweiligen Übersichtsseiten von CSS und HTML rein.</p> <p>Am Besten auch ein Video, wie man das macht. (Ich weiß <a href="/users/243" class="mention registered-user" rel="noopener noreferrer">@Felix Riesterer</a> - für sowas braucht's gute Leute! )</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Die Signatur findet sich auf der Rückseite des Beitrags. </div> https://forum.selfhtml.org/self/2024/jan/05/input-type-range-und-input-type-number-verbinden?srt=yes JürgenB https://www.j-berkemeier.de 2024-01-05T16:51:34Z 2024-01-05T16:51:34Z input type=range und input type=number verbinden <p>Hallo,</p> <p>ich bin der Meinung, dass in vielen Fällen zu einem <code><input type=range></code> ein <code>input type=number></code> gehört. Mit dem Schieber kann schnell den Wert einstellen, aber nur grob, fürs Genaue dient die Zahleingabe. Im jetzigen Entwurf mache ich das so:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Rot<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>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>255<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<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>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>255<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<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>label</span><span class="token punctuation">></span></span> </code></pre> <p>Die <code>value</code> werden dann durch ein Javascript gekoppelt.</p> <p>Jetzt darf man natürlich ein Label nicht zwei Inputs zuordnen. Gibt es irgendeine „best practice“ hierfür? Oder muss ich da ein Custom-Element für basteln?</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2023/dec/14/adventskalender?srt=yes Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2023-12-14T13:18:45Z 2023-12-14T13:18:45Z Adventskalender <p>Ich muss mal ein Lob für den diesjährigen <a href="https://forum.selfhtml.org/advent/2023" rel="noopener noreferrer">SELFHTML-Adventskalender</a> loswerden. Ich finde ihn gut gelungen. Nichts Hochwissenschaftliches, aber das muss es ja nicht sein. Ein Thema, unterhaltsam, in sich konsistent. Chapeau!</p> <p>Ich hab eine <a href="https://bittersmann.de/talks/adventskalender/" rel="nofollow noopener noreferrer">kleine Sammlung von Adventskalendern</a> zusammengestellt<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> – von aktuellen und solchen, die es leider nicht mehr gibt. Die vorjährigen Türchen bieten aber immer noch viel Wissenswertes.</p> <p>Eine <a href="https://adrianroselli.com/2023/12/web-development-advent-calendars-for-2023.html" rel="nofollow noopener noreferrer">größere Sammlung</a> hat Adrian Roselli. Der SELFHTML-Adventskalender ist darin auch vertreten.</p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em lang="la">Ad astra per aspera</em> </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Den Code für die Seite kann man auch in diesem <a href="https://codepen.io/gunnarbittersmann/pen/poGYGPv" rel="noopener noreferrer">Codepen</a> sehen. Auf <a href="https://noti.st/gunnarbittersmann/UmYXcc/adventskalender" rel="nofollow noopener noreferrer">Notist</a> ist alles nochmal verlinkt. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2024/jan/09/firefox-119-0-1-console-log-gibt-nichts-aus?srt=yes Linuchs 2024-01-09T09:28:25Z 2024-01-09T09:28:25Z Firefox 119.0.1: console.log() gibt nichts aus <p>Moin,</p> <p>vermutlich mit irgendeinem Update wurde console.log() deaktiviert, alert() zeigt aber an.</p> <p>Wie kann ich das wieder aktivieren?</p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2024/jan/08/computerpionier-niklaus-wirth-ist-gestorben?srt=yes JürgenB https://www.j-berkemeier.de 2024-01-08T18:01:15Z 2024-01-08T18:01:15Z Computerpionier Niklaus Wirth ist gestorben <p>Hallo,</p> <p>ein großer Computerpionier ist von uns gegangen.</p> <p><a href="https://ethz.ch/de/news-und-veranstaltungen/eth-news/news/2024/01/der-computerpionier-niklaus-wirth-ist-gestorben.html" rel="nofollow noopener noreferrer">https://ethz.ch/de/news-und-veranstaltungen/eth-news/news/2024/01/der-computerpionier-niklaus-wirth-ist-gestorben.html</a></p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2024/jan/08/zu-css-deklarationen-mit-einer-zeichenkette-als-wert?srt=yes JimKnopf 2024-01-08T07:17:21Z 2024-01-08T07:17:21Z zu CSS-Deklarationen mit einer Zeichenkette als Wert <p>Moin moin,</p> <p>unten auf der <em>problematischen Seite</em> unter <em>Beachten Sie</em> heißt es:</p> <blockquote> <ol start="2"> <li><ul style=list-style-type: ;"></li> </ol> </blockquote> <p>Ein Universalattribut mit einem vereinzelten Anführungszeichen - das sieht sehr verdächtig aus. Sollte das vielleicht heißen:</p> <ol start="2"> <li><ul style="list-style-type: ';'"></li> </ol> <p>Darüber hinaus fände ich einen Hinweis hilfreich, wie man allgemein beim HTML-style-Attribut mit CSS-Deklarationen umgehen sollte, die eine Zeichenkette als Wert haben und daher irgend eine Form von Anführungszeichen benötigen. Ich denke es ist nicht verkehrt, vor der möglichen Kollision mit den Anführungszeichen des style-Attributs zu warnen. Mir scheint <a href="https://wiki.selfhtml.org/wiki/HTML/Attribute/style" rel="nofollow noopener noreferrer">HTML/Attribute/style</a> ein guter Ort für solch einen Hinweis zu sein.</p> <p>Schließlich gibt es noch eine Inkonsistenz bei <em>list-style-position</em>: <a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/list-style-position" rel="nofollow noopener noreferrer">CSS/Eigenschaften/list-style-position</a> nennt als Standardwert <em>inside</em>. <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Listen/Gestaltung_mit_CSS#list-style-position" rel="nofollow noopener noreferrer">HTML/Tutorials/Listen/Gestaltung mit CSS --> list-style-position</a> dagegen bezeichnet <em>outside</em> als Standardwert. Mein Firefox hält sich offenbar an <em>outside</em>.</p> <p>Gruß... JimKnopf</p> <div class="signature">-- <br> die Bäume im Wald haben ihre Wurzeln unten </div> https://forum.selfhtml.org/self/2024/jan/08/code-editoren?srt=yes JimKnopf 2024-01-08T05:02:12Z 2024-01-08T05:02:12Z Code-Editoren <p>Servus,</p> <p>mein Lieblings-HTML-Editor unter Linux ist Bluefish. Bluefish kann eigentlich alles was Kate kann, bietet aber zusätzlich Unterstützung für Codesnippets (spart viel Arbeit!). Ich schätze auch besonders Bluefishs leistungsfähige Such- bzw. Such- und Ersetzungsfunktion. Die bietet leicht einstellbar sehr nützliche Optionen, z.B. ob nur die aktuell bearbeitete Datei oder alle von Bluefish geöffneten Dateien einbezogen werden sollen.</p> <p>Laut <a href="https://www.heise.de/download/product/bluefish-7119" rel="nofollow noopener noreferrer">heise Download</a> soll es Bluefish auch für Windows und und Mac geben, ich kenne ihn aber nur unter Linux. Bei Kubuntu gehört er zur Standardausstattung. Auf meinem Kubuntu-System läuft er sehr stabil.</p> <p>Ich schlage vor, Bluefish unter <a href="https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F/der_richtige_Code-Editor#Editoren_f.C3.BCr_Linux.2FUnix-Derivate" rel="nofollow noopener noreferrer">Editoren für Linux/Unix-Derivate</a> hinzuzufügen.</p> <p>Gruß... JimKnopf</p> <p>P.S.: ich bin z.Zt. bei meiner Tochter und meinem Schwiegersohn in Oberbayern zu Besuch, deshalb heute mal eine bayerische Grußform.</p> <div class="signature">-- <br> die Bäume im Wald haben ihre Wurzeln unten </div> https://forum.selfhtml.org/self/2024/jan/07/frage-zum-wiki-artikel-aria?srt=yes Robert B. 2024-01-06T23:30:14Z 2024-01-06T23:30:14Z Frage zum Wiki-Artikel „aria-*“ <p>Hallo,</p> <p>ich verstehe die Angaben im verlinkten Artikel nicht. Was soll mir zum Beispiel folgendes sagen (Original Copy&Paste aus dem Wiki-Artikel)?</p> <blockquote> <p><code><spanid="aria-autocomplete">aria-autocomplete</span></code><br> Zeigt an, ob bei Benutzereingaben Vorschläge zur Auto-Vervollständigung angeboten werden.</p> </blockquote> <p>Viele Grüße<br> Robert</p> https://forum.selfhtml.org/self/2024/jan/05/navigation-von-codepen-ist-meine-meinung-nach-fehlehaft?srt=yes Mick62 2024-01-05T21:25:17Z 2024-01-05T21:25:17Z Navigation von Codepen ist meine Meinung nach Fehlehaft <p>Dort habe ich ein für mich schöne Navbar gefunden, doch nach der responsiven Ansicht, die mir auch gefällt, ist das Menue, beim vergrößern bis auf das Logo leer. Ist hier jemand der den Fehler im CSS bzw. Java-Script erkennt und mir verrät?</p> <p><a href="https://codepen.io/KevinohKelvin/pen/MMQGOj" rel="noopener noreferrer">https://codepen.io/KevinohKelvin/pen/MMQGOj</a></p> https://forum.selfhtml.org/self/2023/dec/20/self-wiki-farbe?srt=yes Matthias Scharwies mscharwies@selfhtml.org 2023-12-20T05:09:11Z 2023-12-20T05:09:11Z Self-Wiki: Farbe <p>Guten Morgen!</p> <p>grad <a href="https://bildung.social/@ct_bergstrom@fediscience.org/111593244196832542" rel="nofollow noopener noreferrer">auf Mastodon gefunden</a>:</p> <blockquote> <p>So color spaces are really starting to piss me off. Anyone have a favored tutorial / explainer about what they are, how they work, and how to use them to e.g. post photos online?</p> </blockquote> <p><a href="/images/eb432a4e-9ca3-11ee-a4c0-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/eb432a4e-9ca3-11ee-a4c0-9c6b00263d9f.png?size=medium" alt="Some bullshit about color spaces from deep in the bowels of Lightroom's export menu system." title="Some bullshit about color spaces from deep in the bowels of Lightroom's export menu system." loading="lazy"></a></p> <p>Die Kommentare, die <em><strong>für Fotos</strong></em> weiterhin RGB empfehlen, überwogen.<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <hr> <p>Wir hatten ja auch angefangen, den Bereich <a href="https://wiki.selfhtml.org/wiki/Farbe" rel="nofollow noopener noreferrer"><strong>Farbe</strong></a> zu überarbeiten.</p> <p>Durch das CSS Color Module level 4 (Level 6 ist schon in der Pipeline) ergeben sich da viele Neuerungen.</p> <p><strong>Wie können wir hier Anfänger zu einem Einstiegs-Tutorial mit den Basics leiten, Profis aber auf der Übersichtseite mittels eines Aha-Effekts hin zum Color Module Level 4 verlocken?</strong></p> <p><a href="/users/68" class="mention registered-user" rel="noopener noreferrer">@JürgenB</a> fragte mehrfach, wie Anfänger denn anfangen sollten.</p> <h3><a href="https://wiki.selfhtml.org/wiki/Farbe/Farbangaben" rel="nofollow noopener noreferrer"><strong>Farbe/Farbangaben</strong></a></h3><p>Das wird hier imho ganz gut erklärt, das <a href="https://wiki.selfhtml.org/wiki/Farbe/Farbangaben#Die_VGA-Palette_.2816_Farben.29" rel="nofollow noopener noreferrer">Beispiel</a> ist evtl. etwas zu einfach. Was meint ihr?</p> <p>Die bisher gezeigte Tabelle zu den 216 websicheren Farben für GIF ist rausgeflogen, zu Recht?</p> <p>Die ca. 150 Farbnamen sind für ein Farbkonzept problematisch,</p> <blockquote> <p>„<em>Deshalb ist darkgray (aus X11) heller als gray (aus den VGA-Farben).</em>“</p> </blockquote> <p>→ Also stellen wir im nächsten Kapitel 16.7 Mio Farben vor:</p> <h3><a href="https://wiki.selfhtml.org/wiki/Farbe/Farbmodelle" rel="nofollow noopener noreferrer"><strong>Farbe/Farbmodelle</strong></a></h3><h4><a href="https://wiki.selfhtml.org/wiki/Farbe/Farbmodelle#RGB-Modell_.28Rot.2FGr.C3.BCn.2FBlau-Mischung.29" rel="nofollow noopener noreferrer">RGB-Modell (Rot/Grün/Blau-Mischung)</a></h4><p>RGB-Raum, der erst am Ende als sRBG weiter spezifiziert wird.</p> <ul> <li>seit Februar '22 haben wir die Leerzeichen-separierten Werte im ganzen Wiki</li> <li>damals fiel <code>rgba()</code> heraus, mittlerweile sind <a href="https://wiki.selfhtml.org/wiki/Farbe/Farbmodelle#Transparenz_mit_Alphakanal" rel="nofollow noopener noreferrer">Transparenzen</a> wieder ein ganzer Absatz.</li> <li><strong>Neu:</strong> Es gibt jetzt interaktive Visualisierungen, die als Beispiel angelegt sind. Langfristig soll hier die Vorschau-Ansicht der Beispiel-Vorlage aktiviert werden, damit diese <a href="https://wiki.selfhtml.org/extensions/Selfhtml/frickl.php/Beispiel:Rgb-1.html#view_result" rel="nofollow noopener noreferrer">Farbmischer</a> gleich zu sehen sind.</li> <li>Benötigt man bei den Hex-Werten eine Erklärung des Begriffs? Die deutsche Wikiseite ist eher schwierig, die englische besser. Eine Umrechnungstabelle würde eher ins Glossar passen. <strong>Was meint ihr?</strong></li> </ul> <p><a href="/users/6547" class="mention registered-user" rel="noopener noreferrer">@Rolf B</a> hatte eine zündende Idee,<code>hsl()</code> interaktiv zu visualisieren, das kommt demnächst!</p> <h4><a href="https://wiki.selfhtml.org/wiki/Farbe/Farbmodelle#CIE-LAB_Farbmodelle" rel="nofollow noopener noreferrer">CIE-LAB_Farbmodelle</a></h4><p>Das war uns allen neu, und ist erst mal nur der Vollständikeit halber erwähnt.</p> <ul> <li>welche Farbräume müssten jetzt kommen? Als nächster Abschnitt oder in einem neuen Kapitel?</li> </ul> <p>Ich persönlich würde hier noch lab(), lch() aber auch oklab() und oklch() besprechen.</p> <p><strong>Hier sind wir uns überhaupt nicht klar, ob man die Erklärung zu OKLAB-Farbraum gleich zum CIE-LAB schieben soll und ob man dort Beispiele oder eher Infografiken benötigt.</strong></p> <h3>Farbinterpolation</h3><p>Das Kapitel der Farbinterpolation beschreibt dann für Fortgeschrittene die Mischung bei Verläufen, Filtern und color-mix().</p> <p>Große Frage für mich:</p> <p>Wann ...</p> <ul> <li>ein Frickl-Beispiel, auf das extra geklickt werden muss?</li> <li>ein inline-div, das evtl. in älteren Browser nicht angezeigt wird?</li> <li>eine (SVG)-Grafik, die im Text steht, aber wsl. nur aus RGB-Farben besteht.</li> </ul> <p><strong>Wer hier Fachwissen zu Farben hat und das mit uns teilen möchte: Herzlich willkommen!</strong></p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Die Signatur findet sich auf der Rückseite des Beitrags. </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>advice my photography professor gave me: color spaces are like the box of crayons you have to work with when you make an image. some boxes will have more kinds of crayons than others, but generally you can get away with using the basic box of crayons (sRGB). the bigger boxes of crayons are usually made for specific purposes/to be used with specific devices. most screens and monitors really work best with sRGB anyways, so even if you put up an image you made with the bigger box of crayons, those other screens won't be able to replicate it with their own crayons. basically: use sRGB unless something or someone is specifically asking you to use something else. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2024/jan/05/womit-lasst-sich-center-bei-svg-grafiken-ersetzen?srt=yes fietur 2024-01-05T13:38:20Z 2024-01-05T13:38:20Z Womit lässt sich <center> bei SVG-Grafiken ersetzen? <p>Hallo,</p> <p>alle Jahre wieder ist eine Überarbeitung der eigenen Seite an der Reihe. Und dazu gehört dann u.a. der Check mit dem HTML-Validator. Und seit Jahren wird <code><center></code> angemeckert und vorgeschlagen, das über CSS zu erledigen. Verständlich, aber bisweilen umständlich. Denn <code>.center {margin-left:auto; margin-right:auto; text-align:center;}</code> ist leider nicht äquivalent zu <code><center></code>.</p> <p>Konkret geht es bei mir um die Platzierung von einem oder mehreren Symbole in einer Tabellenzelle.</p> <p>Die SVG-Symbole werden im CSS definiert:</p> <pre><code class="block">.svg_symbol { width:1em; height:1em; background-repeat:no-repeat; background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1em" viewBox="0 0 10 10" fill="%23ff0000"%3E%3Crect x="0" y="0" width="10" height="10"/%3E%3C/svg%3E'); } </code></pre> <p>Im HTML zeigt</p> <p><code><td><center><div class=svg_symbol></div></center></td></code></p> <p>das Symbol wie gewünscht mittig an. Mit der vorgeschlagenen Ersetzung</p> <p><code><td class=center><div class=svg_symbol></div></td></code></p> <p>erscheint das Symbol mitnichten mittig, sondern links ausgerichtet. Mit ausschließlich Text in der Zelle erscheint dieser korrekt mittig. Beim Mischen von Text und Symbol aber wird auch der Text linksbündig. Das verwundert mich gelinde gesagt etwas und unterscheidet die CSS-Lösung von <code><center></code> und macht sie so erstmal unbrauchbar.</p> <p>Oder doch nicht - wie müsste denn <code><center></code> ersetzt werden?</p> <p>Mit einem anderen Ansatz</p> <pre><code class="block"><tr><td div class=center><svg width="1em" viewBox="0 0 10 10" fill="#ff0000"><rect x="0" y="0" width="10" height="10"/></svg></div></td></tr> </code></pre> <p>funktioniert zwar das Zentrieren. Aber: Hunderte von Symbolen in meiner Tabelle blähen das HTML unnötig auf. Und die Symbole sollten ja gerade raus aus dem HTML.</p> <p>...und ups! HTML-konform soll kein <code><center></code> verwendet werden, aber dann wird das im CSS liegende Symbol nicht mittig. Und mit der CSS-Lösung <code>.center</code> funktioniert nur das HTML-SVG, nicht aber das "Trennung von Form und Inhalt"-konforme CSS-SVG.</p> https://forum.selfhtml.org/self/2024/jan/05/umleitung-auf-404-fehlerseite-in-einem-verzeichnis-verhindern?srt=yes Gagga https://www.Lotterfee.com 2024-01-05T17:01:24Z 2024-01-05T17:01:24Z Umleitung auf 404-Fehlerseite in einem Verzeichnis verhindern <p>Hallo!</p> <p>Innerhalb meiner Wordpress-Seite existiert eine Umleitung auf eine 404-Fehlerseite. Das ist auch gut so. Allerdings will ich die Umleitung für den Zugriff auf ein Verzeichnis verhindern, auf das lediglich aus meiner Software heraus zugegriffen wird.</p> <p>Ist das möglich?</p> <p>Gruß Gagga</p> https://forum.selfhtml.org/self/2024/jan/05/benotige-hilfe-bei-eigenem-website-template?srt=yes Ch3fK0cH 2024-01-05T16:16:16Z 2024-01-05T16:16:16Z benötige hilfe bei eigenem website template <p>Guten Abend liebe community,</p> <p>und zwar geht es um folgendes, ich bin gerade dabei mir das HTML und das CSS bei zu bringen.</p> <p>Ich habe nun um einfach mal die Theorie, in der Praxis umzusetzen mich an ein eigenes Template basierend auf HTML und CSS versucht.</p> <p>Nun stehe ich vor einem Problem das ich selber scheinbar nicht gelöst bekomme weil mir einfach mal die erfahrung fehlt.</p> <p>Und zwar habe ich versucht die navigationsbar über ein Slider was allerdings noch aus einem Bild besteht zu setzen, und die Navigationsbar Sticky an den oberen rand der website zu sticken mit "position: Sticky; und top: 0px;"</p> <p>nun habe ich aber einige andere probleme und das alle anderen container die ich anlegen möchte irgendwie auch alle sich ganz oben an der website anheften obwohl sie sich unter dem slider anheften sollen.</p> <p>könnte sich vieleicht jemand mal meine HTML und meine CSS anschauen und mir was wo ich dort fehler verbaut habe? und wie ich die probleme am besten lösen könnte?</p> <p>die Navigationsbar habe ich von einem anderen Forum übernommen und versucht entsprechend meines designs anzupassen.</p> <p>ich bedanke mich schonmal im vorraus das ihr euch die zeit und mühe macht mir zu helfen.</p> <p><a href="/images/9aeb7dd4-abe5-11ee-8878-9c6b00263d9f.jpg" rel="noopener noreferrer"><img src="/images/9aeb7dd4-abe5-11ee-8878-9c6b00263d9f.jpg?size=medium" alt="Auf diesem Screenshot ist der about container im rotenbereich ich möchte ich aber gerne im Grünen feld direkt unter dem Sliderbild haben und das die navigation beim scroll quasi mit scrollt." loading="lazy"></a></p> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<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>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<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>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<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>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>description<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Cs2 Gaming clan since 2015<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>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>keywords<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Cs Clan since 2024<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>title</span><span class="token punctuation">></span></span>saints gaming<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</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>https://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400<span class="token punctuation">'</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>stylesheet<span class="token punctuation">'</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>text/css<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>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></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>/css/style.css<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>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</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>stroke<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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>standard-container<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>img/headerlogo.png<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><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>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>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<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>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<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>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Downloads<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>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>More<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>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Nice staff<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>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>slider<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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>standard-container<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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>slider-content<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><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>text-highlighted<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>welcome to saints gaming<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</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>we are competetive<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>p</span><span class="token punctuation">></span></span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis beatae aliquid eos quae atque illum dignissimos est nihil delectus quo? <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>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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>about<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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>standard-container<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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>about-content<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><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>text-highlighted<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>welcome to saints gaming<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</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>we are competetive<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>p</span><span class="token punctuation">></span></span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis beatae aliquid eos quae atque illum dignissimos est nihil delectus quo? <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>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>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <pre><code class="block language-css">*<span class="token comment">/* (*) alle elemente selectieren*/</span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Roboto'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.standard-container</span> <span class="token punctuation">{</span> <span class="token property">max-width</span><span class="token punctuation">:</span> 1080px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">header</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> sticky<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav img</span> <span class="token punctuation">{</span> <span class="token property">text-align</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav img:after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* NAVIGATION */</span> <span class="token selector">nav</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> #000000a6<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 30px 0<span class="token punctuation">;</span> <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0px 5px 0px orange<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav ul</span> <span class="token punctuation">{</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span> <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav ul li</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav ul li a</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #aaa<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> 800<span class="token punctuation">;</span> <span class="token property">text-transform</span><span class="token punctuation">:</span> uppercase<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 10px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav ul li a, nav ul li a:after, nav ul li a:before</span> <span class="token punctuation">{</span> <span class="token property">transition</span><span class="token punctuation">:</span> all .5s<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav ul li a:hover</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #555<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* stroke */</span> <span class="token selector">nav.stroke ul li a</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav.stroke ul li a:after</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 0%<span class="token punctuation">;</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">'.'</span><span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> transparent<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> orange<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav.stroke ul li a:hover:after</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* Slider Content*/</span> <span class="token selector">.slider</span> <span class="token punctuation">{</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span><span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span> 0.6<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.6<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>#<span class="token punctuation">)</span></span><span class="token punctuation">;</span><span class="token comment">/*../img/big.jpeg*/</span> <span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span> <span class="token property">background-size</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span> <span class="token property">min-height</span><span class="token punctuation">:</span> 700px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.slider-content</span> <span class="token punctuation">{</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 250px 0px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.slider-content h2</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 48px<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> 900<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 1.2em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.slider-content p</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 24px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* About Content*/</span> <span class="token selector">.about</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> burlywood<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> https://forum.selfhtml.org/self/2024/jan/05/eigene-fehlermeldung-bei-mailserver-connect-fail?srt=yes Der Frank 2024-01-05T16:14:37Z 2024-01-05T16:14:37Z Eigene Fehlermeldung bei Mailserver Connect Fail <p>Guten Abend,</p> <p>und zwar teste ich gerade die Funktionen meines Mail Formulars:</p> <pre><code class="block language-php"> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">mail</span><span class="token punctuation">(</span><span class="token variable">$to</span><span class="token punctuation">,</span> <span class="token variable">$subject</span><span class="token punctuation">,</span> <span class="token variable">$message</span><span class="token punctuation">,</span> <span class="token variable">$headers</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"Email erfolgreich versandt."</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token function">header</span><span class="token punctuation">(</span><span class="token string double-quoted-string">"HTTP/1.1 500 Internal Server Error"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"SO EIN UNGLÜCK! ...(Beschwichtigende Worte)"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Teste ich das am Localhost, kann natürlich keine Verbindung zu irgendeinem "externen" Mailserver hergestellt werden, daher sollte <code>SO EIN UNGLÜCK! ...(Beschwichtigende Worte)</code> ausgegeben werden.</p> <p>HOWEVER,</p> <p>ich bekomme auch die Warnung <code><br /> <b>Warning</b>: mail(): Failed to connect to mailserver at // ETC.</code> jedes Mal in mein Frontend mitgeliefert.</p> <p>Wie lässt sich das unterbinden?</p> <p>Vielen Dank durch die Bank, Frank</p> https://forum.selfhtml.org/self/2024/jan/05/frage-zum-wiki-artikel-drag-and-drop?srt=yes onder 2024-01-05T17:56:02Z 2024-01-05T17:56:02Z Frage zum Wiki-Artikel „Drag_and_Drop“ <p>hi bei dieser drag&drob vorlage kann ich den button neues verschoiebbares block erstellen in der vorlage nirgens finden ist es irgenwo versteckt?</p> https://forum.selfhtml.org/self/2024/jan/04/frage-bzw-bitte-zum-wiki-artikel-loading?srt=yes Robert B. 2024-01-04T21:07:36Z 2024-01-04T21:07:36Z Frage bzw. Bitte zum Wiki-Artikel „loading“ <p>Hallo zusammen,</p> <p>durch den <em>HTMHell Adventskalender-Eintrag für den 14. Dezember</em> bin ich auf <a href="https://www.htmhell.dev/adventcalendar/2023/14/#2-optimise-images-optimise-them-again-and-then-once-more-for-good-luck" rel="nofollow noopener noreferrer"><code>loading=lazy</code></a> gestoßen, was wir auch im Wiki haben. Ich habe das dortige Beispiel ergänzt, beim Testen mit meinen Webseiten allerdings nur im Netzwerk-Tab an Hand des Origins einen Hinweis gefunden, weil die Bilder trotzdem alle sofort geladen worden sind. Kann das eventuell mit einer „schwergewichtigeren“ Seite oder an Hand eigenen Wissens verifizieren?</p> <p>Vielen Dank und viele Grüße<br> Robert</p> https://forum.selfhtml.org/self/2024/jan/03/php-module-api-und-php-api-unterschiedlich?srt=yes KevinB 2024-01-03T13:15:07Z 2024-01-03T13:15:07Z PHP Module API und PHP API unterschiedlich <p>Hallo (und ein frohes neues Jahr),</p> <p>ich habe unter Linux (Ubuntu 22.0.4.3 LTS, PHP 8.3) ein PHP-Modul kompiliert über</p> <pre><code class="block">phpize ./configure make make test </code></pre> <p>Bei <code>make test</code> wird aber dennoch angemeckert, dass die module API unterschiedlich ist:</p> <pre><code class="block">Module compiled with module API=20190902 PHP compiled with module API=20230831 </code></pre> <p>Ich habe es auch schon versucht mit <code>./configure --with-php-config=/usr/bin/php-config</code> Leider auch ohne Änderung.</p> <p>Wie kann ich das Module so kompilieren, damit die API Version übereinstimmt? Oder kann ich (dreist) einfach die Module API Version ändern?</p> <p>LG Kevin</p> https://forum.selfhtml.org/self/2023/dec/21/blend-mode-saturation-ich-kapiere-es-nicht?srt=yes Rolf B 2023-12-21T21:43:17Z 2023-12-21T21:43:17Z blend-mode = "saturation" - Ich kapiere es nicht. <p>Hallo alle,</p> <p>ich möchte einen HSL Farbkreis so modifizieren, dass die Farben darin zur Mitte hin ihre Sättigung verlieren. Eigentlich also das, was ich <a href="https://forum.selfhtml.org/self/2023/dec/20/self-wiki-farbe/1812295#m1812295" rel="noopener noreferrer">hier</a> gezeigt habe - aber ich möchte das Selbermalen des Farbkreises vermeiden und dachte, ich könnte den conic-gradient des Farbkreises mit einem radial-gradient überlagern und dabei einen Überblendmodus einsetzen, der die Sättigung herausnimmt.</p> <p>Das Ergebnis sollte dann so aussehen ("handgemalt" im Canvas):</p> <p><img src="/images/ed0c362a-a042-11ee-b852-9c6b00263d9f.png" alt="" loading="lazy"></p> <p>Das <strong>sollte</strong> nach meinem Verständnis mit <code>background-blend-mode: saturation</code> gehen, wenn ich die beiden folgenden Bilder überblende. Links ein Farbkreis mit grauem Zentrum (20px Radius, erstellt durch Überlagerung eines konischen Gradienten mit einem Radialgradienten, der ab 20px transparent ist), rechts ein Radialverlauf mit einem Innenraum, der 0% Sättigung hat (20px Radius, wie links) und 100% außen. Bei Überblendmodus "saturation" <strong>sollte</strong> die Farbe der Sättigungsmaske wurscht sein.</p> <p><img src="/images/cbabb712-a047-11ee-a112-9c6b00263d9f.png" alt="" loading="lazy"></p> <p>Auf CSSisch gesprochen, sieht es so aus:</p> <pre><code class="block language-css"><span class="token selector">canvas, div</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">aspect-ratio</span><span class="token punctuation">:</span> 1/1<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">outline</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">div</span> <span class="token punctuation">{</span> <span class="token property">--conic</span><span class="token punctuation">:</span> <span class="token function">radial-gradient</span><span class="token punctuation">(</span> circle at center<span class="token punctuation">,</span> #808080 20px<span class="token punctuation">,</span> transparent 20px<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">conic-gradient</span><span class="token punctuation">(</span>red<span class="token punctuation">,</span> yellow<span class="token punctuation">,</span> lime<span class="token punctuation">,</span> cyan<span class="token punctuation">,</span> blue<span class="token punctuation">,</span> magenta<span class="token punctuation">,</span> red<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">--radial</span><span class="token punctuation">:</span> <span class="token function">radial-gradient</span><span class="token punctuation">(</span> circle closest-side at center<span class="token punctuation">,</span> #808080 20px<span class="token punctuation">,</span> #ff0000<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">div:nth-child(1)</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--conic<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">background-blend-mode</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">div:nth-child(2)</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--radial<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Dass sich das Farbrad mit <code>in hsl longer hue, red, red</code> einfacher erstellen lässt, weiß ich, aber der Fuchs versteht das nicht und für den springe ich ja hier durch den Stöckchenwald.</p> <p>Ja. Und dann kommt das dritte div, das beides zusammenfügen soll:</p> <pre><code class="block language-css"><span class="token selector">div:nth-child(3)</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--radial<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">var</span><span class="token punctuation">(</span>--conic<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">background-blend-mode</span><span class="token punctuation">:</span> saturation<span class="token punctuation">,</span> normal<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Das Ergebnis sieht im Vergleich mit der Wunschvorstellung so aus: (<a href="https://jsfiddle.net/Rolf_b/nL2q17mp/" rel="noopener noreferrer">JSFiddle dazu</a>)</p> <p><img src="/images/3a19318e-a048-11ee-8c7f-9c6b00263d9f.png" alt="" loading="lazy"> <img src="/images/ed0c362a-a042-11ee-b852-9c6b00263d9f.png" alt="" loading="lazy"></p> <p>Mal zu hell, mal zu dunkel, sowohl in Chrome wie auch in Firefox - was läuft da falsch mit diesem Überblendungsmodus? Das Fiddle zeigt die Quellen, den CSS-Mix und die durch Ringe erzeugte Wunschvorstellung im Canvas - im Fuchs natürlich kaputt.</p> <p>Oder verstehe ich diesen Überblendmodus nur nicht? Das ist nämlich kein alleiniges CSS Problem - wenn ich im Canvas die globalCompositeOperation auf "saturation" setze und die CSS-Gradienten im Canvas male, passiert exakt das gleiche. Ich habe ein Fiddle gemacht, das genau das tut: <a href="https://jsfiddle.net/Rolf_b/cf8y0ghx/" rel="noopener noreferrer">https://jsfiddle.net/Rolf_b/cf8y0ghx/</a>. Mit einem Mouseover kann man die Farbwerte erkunden (rgb2hsl aus dem Wiki-Farbwähler). Man sieht, wie die L-Werte wild herumspringen, obwohl sie in beiden Quell-Bitmaps bei 50% bleiben.</p> <p>Ist dieser Überblendmodus einfach kaputt? MDN schreibt: saturation nimmt Hue und Lightness der unteren Bitmap sowie die Saturation der oberen Bitmap und baut das zur Ergebnisfarbe. Jedoch…</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2023/dec/30/css-style-wird-nicht-vererbt?srt=yes Christian 2023-12-30T16:13:43Z 2023-12-30T16:13:43Z CSS Style wird nicht vererbt <p>Hallo, ich habe aktuell ein seltsames Problem, welches ich mal auf den folgenden einfachen Code runtergebrochen habe:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">color</span><span class="token punctuation">:</span>#ffffff<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> test1 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>test2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>Der Text "test1" ist weiß. Aber müsste nicht der Text "test2" ebenfalls weiß sein? Ich meine, dass das immer so gewesen ist. Aber dem ist nicht so. Das wirft auf einmal meine ganze Homepage durcheinander, wenn ich da für jede innere Tabelle oder andere "Innereien" jeweils auch einen Style vorgeben muss. (Im Original sind es Klassen, aber wie gesagt, hier mal vereinfacht dargestellt)</p> <p>Ich bin echt ein wenig am verzweifeln...</p> <p>Im Original ist die Klasse, die die weiße Schrift regelt, auch dafür zuständig, die Hintergrundfarbe und vor allem die transparenz einzustellen. D.h. wenn ich die gleiche Klasse nochmals für test2 nehmen würde, hätte ich zwei halbtransparente Hintergründe übereinander. Das will ich nicht.</p> <p>Das hat so auch all die Jahre funktioniert, ich bin mir ganz sicher. Nur jetzt auf einmal nicht mehr.</p> <p>Was ist denn da los?</p>