tag:forum.selfhtml.org,2005:/self Bild in Verhältnis zu Bild positionieren – SELFHTML-Forum 2020-07-08T18:36:01Z https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773083#m1773083 Shiela 2020-07-07T06:45:35Z 2020-07-07T07:15:55Z Bild in Verhältnis zu Bild positionieren <p>Hallo.</p> <p>Ich versuche mich gerade hobbymäßig an einer kleinen Website und schietere daran, dass ich meine Bilder nicht richtig positionieren kann. Mein Ziel ist, dass das zweite Bild ("Stecker1") immer auf dem selben Fleck auf dem zweiten Bild bleibt ("Karte"). Die Angabe der Breite habe ich schon hinbekommen, aber bei der Höhe verscheibt sich mein Bild ständig, da ich oben noch Text habe, der je nach Einstellung unterschiedlich hoch ist und so die Gesamthöhe verändert. Meiner Meinung nach müsste ich also das zweite Bild irgendwie in ein Verhältnis zum ersten Bild setzten, weiß aber nicht, wie das geht... Kann mir jemand helfen?</p> <p>Der Code ist:</p> <p>CSS:</p> <pre><code class="block language-css"> <span class="token selector">#Karte</span> <span class="token punctuation">{</span> <span class="token property">height</span><span class="token punctuation">:</span>auto<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>70%<span class="token punctuation">;</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span>15%<span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> <span class="token property">border-style</span><span class="token punctuation">:</span> inset<span class="token punctuation">;</span> <span class="token property">border-width</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token property">border-color</span><span class="token punctuation">:</span> #81DAF5<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">z-index</span><span class="token punctuation">:</span> 0 <span class="token punctuation">}</span> <span class="token selector">#Stecker1</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 5%<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> -30%<span class="token punctuation">;</span> <span class="token property">padding-top</span><span class="token punctuation">:</span> 30%<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">align</span><span class="token punctuation">:</span> bottom<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 2 <span class="token punctuation">}</span> </code></pre> <p>Html:</p> <pre><code class="block language-html"> <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>Stecker.png<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>Stecker1<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 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>Karte.jpg<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>Karte<span class="token punctuation">'</span></span> <span class="token attr-name">align</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 punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>img</span><span class="token punctuation">></span></span> </code></pre> <p>Lg Shiela</p> https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773085#m1773085 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2020-07-07T07:01:45Z 2020-07-07T07:01:45Z Bild in Verhältnis zu Bild positionieren <p>Hallo Shiela,</p> <blockquote> <p>Kann mir jemand helfen?</p> </blockquote> <p>Beschäftige dich mit der <a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Positionierung/position" rel="nofollow noopener noreferrer">position-Eigenschaft</a>.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773087#m1773087 Rolf B 2020-07-07T07:26:37Z 2020-07-07T07:26:37Z Bild in Verhältnis zu Bild positionieren <p>Hallo Shiela,</p> <p>ich habe dein CSS mal etwas umgebrochen. Da kann man es gleich besser lesen.</p> <p>Es gibt eine Beziehung zwischen position:absolute und position:relative: Ein absolut positioniertes Element positioniert sich relativ zu dem (in der Elternhierarchie) nächstliegenden Element mit position:relative. Wenn Du nicht selbst eins setzt, ist es der body.</p> <p>Du hast dagegen ein Bild absolut und ein Bild relativ positioniert. Um die Bilder relativ zueinander zu positionieren, ist das nicht zielführend.</p> <p>Es ist vermutlich sinnvoll, ein <figure> Element als gemeinsames Elternelement der beiden Bilder hinzuzufügen. Das <figure> Element machst Du position:relative, die Karte lässt Du das figure-Element füllen und den Stecker positionierst Du dann absolut im figure-Element.</p> <p>Margin und Padding an den Images lässt Du weg. Steuere Abstände mit Margin und Padding am figure-Element. Die Karte positionierst Du am besten gar nicht, und den Stecker positionierst Du mit top und left.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773090#m1773090 Felix Riesterer https://felix-riesterer.de 2020-07-07T07:41:52Z 2020-07-07T07:41:52Z Bild in Verhältnis zu Bild positionieren <p>Liebe Shiela,</p> <p>der Stecker soll wohl so etwas wie eine Stecknadel sein, die das Bild dekorativ aufhübscht. Aus diesem Grund solltest Du für diese Stecknadel kein <code><img></code>-Element verwenden, sondern <a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/generierter_Inhalt/content" rel="nofollow noopener noreferrer">mit CSS-Mitteln</a> diese Stecknadel anbringen.</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773095#m1773095 JürgenB https://www.j-berkemeier.de 2020-07-07T10:03:22Z 2020-07-07T10:03:22Z Bild in Verhältnis zu Bild positionieren <p>Hallo.</p> <blockquote> <p>… Bild ("Stecker1") … Bild ("Karte")…</p> </blockquote> <p>kann es sein, das du eine Nadel in eine Landkarte pieken willst? Da haben wir was:</p> <ul> <li><a href="https://blog.selfhtml.org/2019/01/13/einstieg-in-leaflet/" rel="noopener noreferrer">Beschreibung</a></li> <li><a href="http://test.berkemeier.eu/selfwiki/leaflet/Beispiel_JS-Leaflet3.html" rel="nofollow noopener noreferrer">Beispiel</a></li> </ul> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773088#m1773088 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2020-07-07T07:29:26Z 2020-07-07T07:29:26Z Bild in Verhältnis zu Bild positionieren <p>Hallo Rolf B,</p> <p>Ergänzung: Eine Eigeschaft <code>align</code> gibt es nicht.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773129#m1773129 Linuchs 2020-07-07T20:53:59Z 2020-07-07T20:53:59Z Bild in Verhältnis zu Bild positionieren <p>Hallo Rolf,</p> <blockquote> <p>Ein absolut positioniertes Element positioniert sich relativ zu dem (in der Elternhierarchie) nächstliegenden Element mit position:relative.</p> </blockquote> <p>Stimmt das? Das Eltern-Element kann doch auch absolute positioniert sein.</p> <blockquote> <p>Wenn Du nicht selbst eins setzt, ist es der body.</p> </blockquote> <p>In der Konsole des Firefox habe ich seit einigen Monaten die Warnung:</p> <p><code>Relative Positionierung von Tabellenzeilen und Zeilengruppen wird jetzt unterstützt. Diese Website muss möglicherweise aktualisiert werden, weil sie sich darauf verlassen könnte, dass diese Funktion keine Wirkung hat.</code></p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773130#m1773130 Linuchs 2020-07-07T21:00:48Z 2020-07-07T21:00:48Z Bild in Verhältnis zu Bild positionieren <p>Hallo Jürgen,</p> <p>habe ich auch dran gedacht, aber ist doch in diesem Umfeld</p> <blockquote> <p>Ich versuche mich gerade hobbymäßig an einer kleinen Website</p> </blockquote> <p>mit Kanonen auf Spatzen geschossen.</p> <p>Linuchs</p> https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773142#m1773142 Linuchs 2020-07-08T08:34:51Z 2020-07-08T08:34:51Z Bild in Verhältnis zu Bild positionieren <p>Hallo Jürgen,</p> <p>mit leaflet, also mit interaktiven Karten habe ich mich 2017 intensiv beschäftigt.</p> <p>Aus Anlass einer Messe ging es darum, Positionen auf dem Messeplan zu markieren. Der Messeplan ist eine eigene Grafik:</p> <p><a href="http://osmer.de/leaflet/" rel="nofollow noopener noreferrer">http://osmer.de/leaflet/</a></p> <p>Ich meine, die Einführung in Landkarten (Beispiel 1) kürzer dargestellt zu haben, als ich es anderswo vorgefunden habe.</p> <p>Der Hallenplan (Beispiel 2) ist etwas umfangreicher. Es wird beschrieben, wie ich die Koordinaten ermittelt habe (die bei Landkarten vorgegeben sind).</p> <p>Linuchs</p> https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773135#m1773135 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2020-07-08T05:28:03Z 2020-07-08T05:28:03Z Bild in Verhältnis zu Bild positionieren <p>Hallo Linuchs,</p> <blockquote> <blockquote> <p>Ein absolut positioniertes Element positioniert sich relativ zu dem (in der Elternhierarchie) nächstliegenden Element mit position:relative.</p> </blockquote> <p>Stimmt das? Das Eltern-Element kann doch auch absolute positioniert sein.</p> </blockquote> <p>Ein absolut positioniertes Element positioniert sich relativ zu dem (in der Elternhierarchie) nächstliegenden Element mit position ungleich static.</p> <p>Wenn man ein Element <code>child</code> an einem <code>parent</code> ausrichten möchte, wird man für <code>parent</code> position: relative setzen, weil das zunächst für <code>parent</code> keine Auswirkungen hat.</p> <blockquote> <blockquote> <p>Wenn Du nicht selbst eins setzt, ist es der body.</p> </blockquote> </blockquote> <p>Meiner Meinung nach das Wurzelelement, also html.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773131#m1773131 JürgenB https://www.j-berkemeier.de 2020-07-07T21:10:32Z 2020-07-07T21:10:32Z Bild in Verhältnis zu Bild positionieren <p>Hallo Linuchs,</p> <p>die meisten Anwender meines GPX-Viewers basteln hobbymäßg an ihrem Online-Reisetagebuch.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773141#m1773141 Linuchs 2020-07-08T08:14:15Z 2020-07-08T08:14:15Z Bild in Verhältnis zu Bild positionieren <p>Hallo Matthias,</p> <blockquote> <p>Wenn man ein Element child an einem parent ausrichten möchte, wird man für parent position: relative setzen, weil das zunächst für parent keine Auswirkungen hat.</p> </blockquote> <p>Ich wollte nur darauf hinweisen, dass nicht nur relative, sondern auch absolute Positionierung auf die Position eines Kind-Elementes wirkt.</p> <p>Mehrmals habe ich eine Familie von Elementen (Elter und Kinder) absolut platziert. Etwa einen Rahmen und innerhalb des Rahmens wieder absolut platzierte Elemente.</p> <p>Die Kinder sind damit befriedigt und suchen im Stammbaum der Ahnen nicht weiter nach relative.</p> <p>Linuchs</p> https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773143#m1773143 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2020-07-08T08:35:34Z 2020-07-08T08:35:34Z Bild in Verhältnis zu Bild positionieren <p>Hallo Linuchs,</p> <blockquote> <p>Mehrmals habe ich eine Familie von Elementen (Elter und Kinder) absolut platziert. Etwa einen Rahmen und innerhalb des Rahmens wieder absolut platzierte Elemente.</p> <p>Die Kinder sind damit befriedigt und suchen im Stammbaum der Ahnen nicht weiter nach relative.</p> </blockquote> <p>Ja, das stimmt. Die Ausrichtung erfolgt am ersten Vorfahrenelement, dessen <code>position</code>-Eigenschaft einen Wert verschieden von <code>static</code> (also <code>relative</code>, <code>absolute</code>, <code>fixed</code> oder <code>sticky</code>) hat.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773144#m1773144 JürgenB https://www.j-berkemeier.de 2020-07-08T08:42:13Z 2020-07-08T08:42:13Z Bild in Verhältnis zu Bild positionieren <p>Hallo Linuchs,</p> <p>hiermit</p> <pre><code class="block language-html"><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>http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.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>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>http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.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>verstößt du meines Wissend nach schon gegen die DSGVO. Du lädst Recourcen von einer externen Domain ohne den Besucher zu fragen.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773188#m1773188 Rolf B 2020-07-08T17:49:43Z 2020-07-08T17:49:43Z Bild in Verhältnis zu Bild positionieren <p>Hallo Matthias und Linuchs,</p> <p>ok, danke. Das hatte ich nicht im Blick.</p> <p>Die Warnung mit der table ist aber was anderes, wenn ich das richtig sehe. Da geht's drum, dass man "früher" einem Tabellenelement position:relative geben konnte und das ignoriert wurde, und jetzt nicht mehr</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773145#m1773145 Auge 2020-07-08T08:49:39Z 2020-07-08T08:49:39Z Bild in Verhältnis zu Bild positionieren <p>Hallo</p> <blockquote> <p>hiermit</p> <pre><code class="block language-html"><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>http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.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>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>http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.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>verstößt du meines Wissend nach schon gegen die DSGVO.</p> </blockquote> <p>Wessen Rechte werden hier konkret berührt oder gar beeinträchtigt?</p> <blockquote> <p>Du lädst Recourcen von einer externen Domain ohne den Besucher zu fragen.</p> </blockquote> <p>Es kann ja sein (und ist nicht unwahrscheinlich), dass das nachgeladene JS den Besucher trackt oder Ähnliches, also Daten vom Besucher erhebt und verarbeitet. Es kann auch sein, dass das Skript von extern nachgeladen wird, aber nur lokal (im Sinne von „auf der Zieldomain“) arbeitet. Das Gleiche gilt bezüglich der CSS-Datei im Hinblick auf Zugriffslogs beim Anbieter.</p> <p>Wäre das aber nicht erst zu ermitteln (Datenschutzbestimmungen des Skriptanbieters), bevor mit der großen Keule DSGVO zugeschlagen wird?</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.<br> <em>Hohle Köpfe</em> von Terry Pratchett </div> https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773146#m1773146 Linuchs 2020-07-08T08:56:50Z 2020-07-08T08:56:50Z Bild in Verhältnis zu Bild positionieren <p>Hallo Jürgen,</p> <p>wir diskutieren hier eine technische Lösung, keine juristischen Fragen von 2017.</p> <blockquote> <p>verstößt du meines Wissend nach schon gegen die DSGVO. Du lädst Recourcen von einer externen Domain ohne den Besucher zu fragen.</p> </blockquote> <p>Nicht korrekt. Verordnungen gelten nicht rückwirkend.</p> <p>Wikipedia: „Zusammen mit der so genannten JI-Richtlinie für den Datenschutz in den Bereichen Polizei und Justiz[1] bildet die DSGVO <strong>seit dem 25. Mai 2018</strong> den gemeinsamen Datenschutzrahmen in der Europäischen Union.[2]</p> <p>Meine genannte Seite ist eigentlich nur für mich selbst, habe sie bei Google nicht gefunden und musste auf meinem Rechner suchen. Im Web deshalb, damit ich unabhängig vom Gerät Zugriff habe.</p> <p>Inzwischen frage ich natürlich vor dem Laden fremder Ressourcen:</p> <p><a href="https://remso.eu/29860" rel="nofollow noopener noreferrer">https://remso.eu/29860</a></p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773151#m1773151 JürgenB https://www.j-berkemeier.de 2020-07-08T09:33:54Z 2020-07-08T09:33:54Z Bild in Verhältnis zu Bild positionieren <p>Hallo Auge,</p> <p>die IP des Besuchers wird an ein CDN übermittelt. Da viele Seiten Ressourcen von diesem CDN einbinden, können seine Betreiber problemlos den User tracken.</p> <p>Bei Leaflet nache ich mir da zwar keine Sorgen, aber wer weiß, wer da (irgendwann mal) hinter steckt.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773147#m1773147 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2020-07-08T09:01:25Z 2020-07-08T09:01:25Z Bild in Verhältnis zu Bild positionieren <p>Hallo Linuchs,</p> <blockquote> <blockquote> <p>verstößt du meines Wissend nach schon gegen die DSGVO. Du lädst Recourcen von einer externen Domain ohne den Besucher zu fragen.</p> </blockquote> <p>Nicht korrekt. Verordnungen gelten nicht rückwirkend.</p> </blockquote> <p>Stimmt. Aber wenn (d)eine Seite heute im Netz zu finden ist, muss sie die Verordnung erfüllen. Du kannst dich nicht damit rausreden, dass du die Seite bereits vor Inkraftsetzung der DSGVO erstellt hast.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773153#m1773153 JürgenB https://www.j-berkemeier.de 2020-07-08T09:35:48Z 2020-07-08T09:35:48Z Bild in Verhältnis zu Bild positionieren <p>Hallo Linuchs,</p> <blockquote> <p>Inzwischen frage ich natürlich vor dem Laden fremder Ressourcen:</p> <p><a href="https://remso.eu/29860" rel="nofollow noopener noreferrer">https://remso.eu/29860</a></p> </blockquote> <p>finde ich gut. Aber dann weißt du ja auch, warum das Leafletscript im Blog etwas umfangreicher ist.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773148#m1773148 Auge 2020-07-08T09:29:22Z 2020-07-08T09:29:22Z Bild in Verhältnis zu Bild positionieren <p>Hallo</p> <blockquote> <blockquote> <blockquote> <p>verstößt du meines Wissend nach schon gegen die DSGVO. Du lädst Recourcen von einer externen Domain ohne den Besucher zu fragen.</p> </blockquote> <p>Nicht korrekt. Verordnungen gelten nicht rückwirkend.</p> </blockquote> <p>Stimmt. Aber wenn (d)eine Seite heute im Netz zu finden ist, muss sie die Verordnung erfüllen. Du kannst dich nicht damit rausreden, dass du die Seite bereits vor Inkraftsetzung der DSGVO erstellt hast.</p> </blockquote> <p>Korrrrrekt (mit rrrrrollendem „r“). Dennoch sollte erst einmal geklärt werden, ob und in welchem Rahmen der Anbieter Daten der Besucher einer Seite, auf der das Angebot eingesetzt wird, erhebt und verarbeitet und ob das (bei Bedarf) auf der benutzenden Website dokumentiert ist, bevor ein DSGVO-Verstoß moniert wird.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.<br> <em>Hohle Köpfe</em> von Terry Pratchett </div> https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773150#m1773150 Linuchs 2020-07-08T09:33:24Z 2020-07-08T09:33:24Z Ein Bild für Erbsenzähler <p>Hallo Matthias,</p> <p>mir wurde hier bei SelfHTML so oft geholfen, dass ich natürlich gerne meine Erfahrungen zurückgebe.</p> <p>Aber wenn das so oft in Grundsatzdiskussionen ausartet, überlege ich mir das besser noch mal. Humor wird hier stark kritisiert, aber Erbsenzähler sind willkommen. Auch denen möchte ich gerecht werden, denn beim nächsten Mal helfen sie mir wieder:</p> <p><a href="/images/deba7a46-c0fd-11ea-a156-b42e9947ef30.jpg" rel="noopener noreferrer"><img src="/images/deba7a46-c0fd-11ea-a156-b42e9947ef30.jpg?size=medium" alt="Erbsen im Glas" loading="lazy"></a></p> <p>Wieviel Erbsen sind das?</p> <p>Zumal in der ganzen Diskussion die eigentliche Lösung vollkommen untergeht.</p> <p>Das finde ich auch auf anderen Domains. Inzwischen schaue ich immer nach dem Datum. Alles was älter ist als zwei Jahre, ziehe ich in Zweifel. Aber oft bin ich auch froh, überhaupt einen Tipp zu bekommen. Und wenn er dann im Firefox funktioniert, was soll's.</p> <p>Mit Rücksicht auf (mir unbekannte) Browser übernehme ich schon mal solche Empfehlungen:</p> <pre><code class="block language-css"><span class="token selector">.drehlogo</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transition</span><span class="token punctuation">:</span> -webkit-transform 3s ease<span class="token punctuation">;</span> <span class="token property">-moz-transition</span><span class="token punctuation">:</span> -moz-transform 3s ease<span class="token punctuation">;</span> <span class="token property">-ms-transition</span><span class="token punctuation">:</span> -ms-transform 3s ease<span class="token punctuation">;</span> <span class="token property">-o-transition</span><span class="token punctuation">:</span> -o-transform 3s ease<span class="token punctuation">;</span> <span class="token property">transition</span><span class="token punctuation">:</span> transform 3s ease<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Gruß Linuchs</p> https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773155#m1773155 Auge 2020-07-08T09:43:13Z 2020-07-08T09:43:13Z Ein Bild für Erbsenzähler <p>Hallo</p> <blockquote> <p>Mit Rücksicht auf (mir unbekannte) Browser übernehme ich schon mal solche Empfehlungen:</p> <pre><code class="block language-css"><span class="token selector">.drehlogo</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transition</span><span class="token punctuation">:</span> -webkit-transform 3s ease<span class="token punctuation">;</span> <span class="token property">-moz-transition</span><span class="token punctuation">:</span> -moz-transform 3s ease<span class="token punctuation">;</span> <span class="token property">-ms-transition</span><span class="token punctuation">:</span> -ms-transform 3s ease<span class="token punctuation">;</span> <span class="token property">-o-transition</span><span class="token punctuation">:</span> -o-transform 3s ease<span class="token punctuation">;</span> <span class="token property">transition</span><span class="token punctuation">:</span> transform 3s ease<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>Du solltest da <a href="https://caniuse.com/#feat=css-transitions" rel="noopener noreferrer">echt mal ausmisten</a>. Den <code>-ms</code>-Präfix gab es für diese Eigenschaft nie und die anderen gelten für (aus heutiger Sicht) Museumsstücke. Mit reichlich und ganz viel guten Willen könnte man noch <code>-webkit</code> für Android-Versionen bis 4.3 gelten lassen. Alle anderen Präfixe kannst du ruhigen Gewissens entsorgen.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.<br> <em>Hohle Köpfe</em> von Terry Pratchett </div> https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773158#m1773158 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2020-07-08T11:02:48Z 2020-07-08T11:02:48Z Ein Bild für Erbsenzähler <p>Hallo Linuchs,</p> <blockquote> <p>aber Erbsenzähler sind willkommen.</p> </blockquote> <p>Ich kann in diesem Thread keine Erbsenzählerei entdecken. Auch die Website des OP muss sich an die geltenden Gesetze halten, deshalb ist der Hinweis auf die DSGVO wichtig. Was die OP damit dann tut, ist ihr Problem.</p> <blockquote> <p>Zumal in der ganzen Diskussion die eigentliche Lösung vollkommen untergeht.</p> </blockquote> <p>Auch das sehe ich nicht so. Abgesehen davon, dass sich der OP noch nicht wieder gemeldet hat, gibt es mehrere Lösungsvorschläge.</p> <blockquote> <p>Mit Rücksicht auf (mir unbekannte) Browser übernehme ich schon mal solche Empfehlungen:</p> <pre><code class="block bad language-css"><span class="token selector">.drehlogo</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transition</span><span class="token punctuation">:</span> -webkit-transform 3s ease<span class="token punctuation">;</span> <span class="token property">-moz-transition</span><span class="token punctuation">:</span> -moz-transform 3s ease<span class="token punctuation">;</span> <span class="token property">-ms-transition</span><span class="token punctuation">:</span> -ms-transform 3s ease<span class="token punctuation">;</span> <span class="token property">-o-transition</span><span class="token punctuation">:</span> -o-transform 3s ease<span class="token punctuation">;</span> <span class="token property">transition</span><span class="token punctuation">:</span> transform 3s ease<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>Diese Empfehlung war vor einigen Jahren (bis auf <code>-ms</code>) ja auch richtig. Heute sind sie schlicht nicht notwendig und bedeuten unnötigerweise übertragene Daten.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773152#m1773152 Auge 2020-07-08T09:35:44Z 2020-07-08T09:35:44Z Bild in Verhältnis zu Bild positionieren <p>Hallo</p> <blockquote> <p>die IP des Besuchers wird an ein CDN übermittelt. Da viele Seiten Ressourcen von diesem CDN einbinden, können seine Betreiber problemlos den User tracken.</p> </blockquote> <p>Ja, isso.</p> <blockquote> <p>Bei Leaflet nache ich mir da zwar keine Sorgen, aber wer weiß, wer da (irgendwann mal) hinter steckt.</p> </blockquote> <p>Darum empfahl ich ja, das beim Anbieter zu prüfen. Es soll ja welche geben, die entgegen der allgemeinen Gepflogenheiten aus Prinzip keine Logs schreiben.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.<br> <em>Hohle Köpfe</em> von Terry Pratchett </div> https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773154#m1773154 JürgenB https://www.j-berkemeier.de 2020-07-08T09:41:08Z 2020-07-08T09:41:08Z Bild in Verhältnis zu Bild positionieren <p>Hallo Auge,</p> <p>aber bevor ich regelmäßig meine externen Ressourcenanbieter überprüfe, baue ich lieber die Abfrage ein. In meinem GPX-Viewer wird die Entscheidung dann im localStorage gespeichert, damit die Frage nicht immer kommt.</p> <p>Mein Arbeitgeber hat bei Google Maps auch so eine Abfrage eingebaut, wegen der DSGVO. Bei Leaflet war die Sache einfacher: das Script hosten wir bei uns, und für die Tiles haben wir einen Proxy.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773191#m1773191 Linuchs 2020-07-08T18:12:45Z 2020-07-08T18:12:45Z Bild in Verhältnis zu Bild positionieren <p>Hallo Rolf,</p> <blockquote> <p>Da geht's drum, dass man "früher" einem Tabellenelement position:relative geben konnte und das ignoriert wurde, und jetzt nicht mehr</p> </blockquote> <p>So ist es. Ich habe zwei, drei HTML-Formulare in Tabellenform. Zum Beispiel fünf Teilnehmer eines Festivals. Beim Tippen poppt ein Vorschlags-Bereich auf mit Chören, die per Klick übernommen werden.</p> <p>(Formular abschicken und dann die nächsten fünf)</p> <p>Sehr mühsam habe ich die Position des Vorschlags-Bereichs unterhalb des input-Feldes im <td> ermittelt, indem ich per JS vom Input-Feld hochgelaufen bin bis zum body, weil weder td noch tr relativ zu positionieren waren.</p> <p>Seltsamkeiten mussten ausgebügelt werden. Etwa dass das erste td zum tr denselben Abstand meldete wie tr zum linken table-Rand. Die tr-Angabe musste also ignoriert werden.</p> <p>Ist ja nicht verständlich für die, die sich nie damit beschäftigt haben.</p> <p>Und dann wusste ich immer noch nicht, wie andere Browser das handhaben. Vermutlich ist bei Lesern das Vorschlags-Feld irgendwo aufgetaucht, im schlimmsten Fall außerhalb des Sichtbereichs.</p> <p>Dass man td relativ machen kann, ist für mich eine große Erleichterung, aber für andere (ohne Firefox) vermutlich nicht.</p> <p>Linuchs</p> https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773194#m1773194 Rolf B 2020-07-08T18:22:34Z 2020-07-08T18:22:34Z Bild in Verhältnis zu Bild positionieren <p>Hallo Linuchs,</p> <blockquote> <p>Dass man td relativ machen kann, ist für mich eine große Erleichterung, aber für andere (ohne Firefox) vermutlich nicht.</p> </blockquote> <p>Ich habe das Problem schon mal auf diese Weise gelöst. Ich meine mich allerdings zu erinnern, dass ich die Table dann bezüglich der Spaltenbreiten etwas härter an die Kandare nehmen musste.</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">td .popupContainer</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 property">height</span><span class="token punctuation">:</span> 100%<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">td .popupContainer .popup</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 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>td</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>popupContainer<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>popup<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> Weiterer Inhalt <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>td</span><span class="token punctuation">></span></span> </code></pre> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773196#m1773196 Linuchs 2020-07-08T18:36:01Z 2020-07-08T18:36:01Z Bild in Verhältnis zu Bild positionieren <p>Hallo Rolf,</p> <blockquote> <p>Ich habe das Problem schon mal auf diese Weise gelöst.</p> </blockquote> <p>Habe ich auch durch und zwar - wie du - per div im td. Dann kommen die SelfHTML-Schlauberger (zu Recht) und monieren, dass HTML nicht mit Layout zu belasten wäre.</p> <p>Irgendwann habe ich auf Schlauberger gepfiffen, war aber mit der eigentlich unsinnigen HTML-Schachtelung sehr unzufrieden.</p> <p>Das Problem für „uns Genies“: Wir könnten ja, aber die Werkzeuge sind mangelhaft.</p> <p>Linuchs</p>