Seite 1 von 1

Bild wird vom Footer überdeckt

Verfasst: Do 16. Nov 2023, 18:35
von struggle
Hallo,

ich habe ein Bild eingebunden, das sich beim anklicken vergrößert. Die Vergrößerung wird dann teils vom Footer überdeckt.
Nun könnte ich den unteren Rand des Blocks vergrößern, in dem das Bild liegt, dann wäre das Problem weg. Jedoch würde ich den Abstand zum unteren Rand gerne behalten.
Meine Frage ist, ob es noch eine andere Lösung gibt ?

http://www.online2web.de/hoellberghof.html

Re: Bild wird vom Footer überdeckt

Verfasst: Do 16. Nov 2023, 19:08
von Rancher
Erhöhe mal den z-index des Bildes.

Re: Bild wird vom Footer überdeckt

Verfasst: Do 16. Nov 2023, 19:48
von Tommy Herrmann
Moin,

da Du das über CSS mit "transform" machst funktioniert das immer nur immer nur über den gleichen Block.

Code: Alles auswählen

<style>
a:hover {text-decoration:underline;}
a {text-decoration:none;}
</style>
<style> 
input[type="checkbox"].zoom { 
display: None; 
} 
input[type="checkbox"].zoom ~ img { 
border: solid 2px #ffffff; 
border-radius: 20px; 
cursor: zoom-in; 
transition: transform 0.7s; 
max-width: 100%; 
height: auto; 
} 
input[type="checkbox"].zoom:checked ~ img { 
transform: scale(2.0, 2.0);
cursor: zoom-out;
} 
</style>

Versuche entweder:

1) den Block nach unten etwas größer zu stellen

... oder:

2) schreibe mal in das <section> Tag (ganz oben in der ersten Zeile) vom Block diese Style-Anweisung hinzu:

style="z-index: 1;"

Also dann ungefähr so:

<section style="z-index: 1;" data-bs-version="5.1" class="content5" group="Content">

Re: Bild wird vom Footer überdeckt

Verfasst: Do 16. Nov 2023, 19:55
von struggle
Danke Rancher, danke Tommy !

Das werde ich testen !

Re: Bild wird vom Footer überdeckt

Verfasst: Fr 17. Nov 2023, 07:17
von struggle
Funktioniert einwandfrei :freude:

Re: Bild wird vom Footer überdeckt

Verfasst: Fr 17. Nov 2023, 10:16
von Tommy Herrmann
Danke für die Meldung, besser wäre noch zu schreiben, was funktioniert.

Es war also der z-index am <section> Tag. Das ist eigentlich ein Bug von Mobirise, denn alle Blöcke sollten immer den gleichen z-index: 0 haben.

Deine Änderung:

Code: Alles auswählen

<section style="z-index: 1;" class="mbr-section article content1 cid-tVLPztOBiR" id="content1-fu">