tag:forum.selfhtml.org,2005:/self Textelement über Bild positionieren – SELFHTML-Forum 2023-02-25T11:09:04Z https://forum.selfhtml.org/self/2023/feb/23/textelement-uber-bild-positionieren/1806452#m1806452 Orpheo 2023-02-23T18:23:51Z 2023-02-25T05:00:29Z Textelement über Bild positionieren <p>Hi, ich habe die Webseite in Wordpress erstellt. Das große Foto wird ja von einem halbtransparenten Textfeld überlagert. So ähnlich soll es auch aussehen. Ich habe dazu das Element mit margin -685px versehen. Das ist aber keine ideale Lösung, weil der Effekt auf unterschiedlichen Bildschirmen auch unterschiedlich ist.</p> <p>Suchen tue ich jetzt nach einer Möglichkeit, über additional CSS das Element in die rechte obere Ecke zu packen (mit etwas Rand nach oben und rechts), unter den Header natürlich.</p> <p>Wie kann ich das erreichen? Meine eigenen Versuche waren nicht erfolgreich.</p> <p>Vielen Dank.</p> https://forum.selfhtml.org/self/2023/feb/23/textelement-uber-bild-positionieren/1806458#m1806458 Rolf B 2023-02-23T21:19:46Z 2023-02-23T21:19:46Z Textelement über Bild positionieren <p>Hallo Orpheo,</p> <blockquote> <p>Das große Foto wird ja von einem halbtransparenten Textfeld überlagert.</p> </blockquote> <p>Du meinst das Homepage.webp Bild?</p> <p>Das stellt sich im WP Designer möglicherweise so dar. Aber wenn ich die Webseite anschaue, sehe ich kein halbtransparentes, überlagerndes Textelement. Weder als input noch als einfaches HTML Element. Im Seiteninspektor auch nicht. Das Bild steckt in einem Abgrund an Wrapper-Elementen, aber da überlagert sich nichts.</p> <p>Ich sehe auch nirgends einen Margin von -685px. Ein klein wenig juckt mich ja gerade der Spam-Löschfinger. Aber ich könnte mich ja auch irren…</p> <p>Wie auch immer. Du könntest einem dieser Wrapper die Eigenschaft position:relative geben, oder einen nutzen, der die Eigenschaft schon hat. Das div, das direkt in der section mit Klasse wpb-content-wrapper liegt, bietet sich dafür an, weil es ohnehin schon position:relative hat.</p> <p>Wenn sich darin ein Element mit position:absolute befindet, kannst Du es mit top und left positionieren und die Positition bezieht sich auf den mit position:relative versehenen Container.</p> <p>Wie man das mit WP Mitteln tut, tja, dabei kann ich Dir nicht helfen.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2023/feb/23/textelement-uber-bild-positionieren/1806482#m1806482 Matthias Scharwies mscharwies@selfhtml.org 2023-02-25T05:04:01Z 2023-02-25T05:04:01Z Textelement über Bild positionieren <p>Guten Morgen Orpheo!</p> <blockquote> <p>Hi, ich habe die Webseite in Wordpress erstellt. Das große Foto wird ja von einem halbtransparenten Textfeld überlagert. So ähnlich soll es auch aussehen. Ich habe dazu das Element mit margin -685px versehen. Das ist aber keine ideale Lösung, weil der Effekt auf unterschiedlichen Bildschirmen auch unterschiedlich ist.</p> </blockquote> <p><a href="/images/893d3190-b4c9-11ed-840f-b42e9947ef30.svg" rel="noopener noreferrer"><img src="/images/893d3190-b4c9-11ed-840f-b42e9947ef30.svg" alt="Wordpress bei SELFHTML" title="Wordpress bei SELFHTML" loading="lazy"></a></p> <p>Da wir in den letzten Tagen mehrere Fragen zu Wordpress hatten, hier die Antwort auf alle:</p> <ul> <li><a href="https://blog.selfhtml.org/2023/feb/25/wordpress-individuell-mit-css-gestalten" rel="noopener noreferrer"><strong>Wordpress - individuell mit CSS gestalten</strong></a></li> </ul> <p>Probier erst mal lokal rum, bevor du es auf der „echten“ Webseite änderst.</p> <p>Wenn die Änderungen auf der „echten“ Installation nicht wirken, erst mal den Brwoser-Cache löschen.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Eigentlich hatte ich heute <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">viel vor</a> - jetzt habe ich morgen viel vor! </div> https://forum.selfhtml.org/self/2023/feb/23/textelement-uber-bild-positionieren/1806474#m1806474 Felix Riesterer https://felix-riesterer.de 2023-02-24T11:37:17Z 2023-02-24T11:37:17Z Textelement über Bild positionieren <p>Lieber Rolf,</p> <blockquote> <p>Ein klein wenig juckt mich ja gerade der Spam-Löschfinger. Aber ich könnte mich ja auch irren…</p> </blockquote> <p>es sind so besonders vage Formulierungen (was soll denn „additional CSS“ bitte sein?) hinsichtlich des gewünschten Ergebnisses, dass mein SPAM-Filter von 86.7% SPAM-Wahrscheinlichkeit ausgeht. Also ja, eher löschen.</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/self/2023/feb/23/textelement-uber-bild-positionieren/1806475#m1806475 Rolf B 2023-02-24T11:52:58Z 2023-02-24T11:52:58Z Textelement über Bild positionieren <p>Hallo Felix Riesterer,</p> <p>meinst Du, da hat das Phrasenschwein namens ChatGPT gepostet?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2023/feb/23/textelement-uber-bild-positionieren/1806478#m1806478 Matthias Scharwies mscharwies@selfhtml.org 2023-02-24T13:24:22Z 2023-02-24T13:24:22Z Textelement über Bild positionieren <p>Servus!</p> <blockquote> <p>Lieber Rolf,</p> <blockquote> <p>Ein klein wenig juckt mich ja gerade der Spam-Löschfinger. Aber ich könnte mich ja auch irren…</p> </blockquote> <p>es sind so besonders vage Formulierungen (was soll denn „additional CSS“ bitte sein?)</p> </blockquote> <p>im Netz gefunden:</p> <p><em>Access the CSS Editor</em></p> <p><em>To access the CSS editor, go to Appearance → Customize → <strong>Additional CSS</strong></em> <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <p>Wichtig: Solche Änderungen eben nicht im Theme, sondern im Child Theme vornehmen.</p> <p>Ich schreib' bis morgen mal was für die FAQ</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Eigentlich hatte ich heute <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">viel vor</a> - jetzt habe ich morgen viel vor! </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>https://wordpress.com/support/editing-css/ <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2023/feb/23/textelement-uber-bild-positionieren/1806497#m1806497 Rolf B 2023-02-25T11:09:04Z 2023-02-25T11:09:04Z Textelement über Bild positionieren <p>Hallo Matthias,</p> <p>wir hatten auch eine Anfrage von Elena, bei der der Hoster nach one.com aussah. Dort bin ich auch, die verwenden einen Varnish-Cache für ihre gehosteten Webseiten. Der ist aggressiv und speichert statische Ressourcen ziemlich lange. Da kann man den Browser refreshen wie man will, das hilft gar nichts.</p> <p>Zum probieren ist es hilfreich, dem Cache in der .htaccess Zügel anzulegen. Ich muss aber noch nachschauen, wie das bei one.com und Varnish genau ging. Ob man in einem gehosteten WordPress überhaupt auf die .htaccess Zugriff hat, weiß ich natürlich auch nicht.</p> <p>Wenn man explizit .css Dateien per URL einbinden kann, kann man auch durch Angabe eines Dummy-Parameters den Cache aushebeln, also /css/mystyles.css?bust=4711, und den Wert von bust ändert man nach jeder CSS Änderung.</p> <p>Bei inline-Styles dürfte das Problem nicht bestehen, das ist dynamisch generiertes HTML und wird <strong>hoffentlich</strong> nicht von Varnish gecached.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div>