Textelement über Bild positionieren
Orpheo
Textelement über Bild positionieren
Orpheo
Rolf B
Matthias ScharwiesHi, 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.
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.
Wie kann ich das erreichen? Meine eigenen Versuche waren nicht erfolgreich.
Vielen Dank.
-
Hallo Orpheo,
Das große Foto wird ja von einem halbtransparenten Textfeld überlagert.
Du meinst das Homepage.webp Bild?
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.
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…
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.
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.
Wie man das mit WP Mitteln tut, tja, dabei kann ich Dir nicht helfen.
Rolf
--
sumpsi - posui - obstruxi-
Lieber Rolf,
Ein klein wenig juckt mich ja gerade der Spam-Löschfinger. Aber ich könnte mich ja auch irren…
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.
Liebe Grüße
Felix Riesterer
-
Hallo Felix Riesterer,
meinst Du, da hat das Phrasenschwein namens ChatGPT gepostet?
Rolf
--
sumpsi - posui - obstruxi -
Servus!
Lieber Rolf,
Ein klein wenig juckt mich ja gerade der Spam-Löschfinger. Aber ich könnte mich ja auch irren…
es sind so besonders vage Formulierungen (was soll denn „additional CSS“ bitte sein?)
im Netz gefunden:
Access the CSS Editor
To access the CSS editor, go to Appearance → Customize → Additional CSS [1]
Wichtig: Solche Änderungen eben nicht im Theme, sondern im Child Theme vornehmen.
Ich schreib' bis morgen mal was für die FAQ
Herzliche Grüße
Matthias Scharwies
--
Eigentlich hatte ich heute viel vor - jetzt habe ich morgen viel vor!
https://wordpress.com/support/editing-css/ ↩︎
-
-
-
Guten Morgen Orpheo!
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.
Da wir in den letzten Tagen mehrere Fragen zu Wordpress hatten, hier die Antwort auf alle:
Probier erst mal lokal rum, bevor du es auf der „echten“ Webseite änderst.
Wenn die Änderungen auf der „echten“ Installation nicht wirken, erst mal den Brwoser-Cache löschen.
Herzliche Grüße
Matthias Scharwies
--
Eigentlich hatte ich heute viel vor - jetzt habe ich morgen viel vor!-
Hallo Matthias,
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.
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.
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.
Bei inline-Styles dürfte das Problem nicht bestehen, das ist dynamisch generiertes HTML und wird hoffentlich nicht von Varnish gecached.
Rolf
--
sumpsi - posui - obstruxi
-