i-Frame / Rahmen

[struggle]

Hallo,
ich habe ein Bild in einen i-frame eingebunden, das sich quer scrollen läßt. Mir scheint, daß das Bild einen Rahmen bekommen hat, aber nicht der i-frame. Links und Rechts erscheint der Rahmen nur, wenn entsprechend gescrollt wird.
HTML ist:

Code: Alles auswählen

<section class="mbr-section content4" group="Article" data-bg-video="{{bg.type == 'video' && bg.value.url}}" mbr-class="{'mbr-parallax-background': bg.parallax}">

    <mbr-parameters>
    <!-- Block parameters controls (Blue "Gear" panel) -->
        <input type="range" inline title="Oben" name="paddingTop" min="0" max="8" step="1" value="2">
        <input type="range" inline title="Unten" name="paddingBottom" min="0" max="8" step="1" value="0">

        <input type="checkbox" title="Titel Anzeigen" name="showTitle">
        <input type="checkbox" title="Untertitel Anzeigen" name="showSubtitle">
        <input type="checkbox" title="Buttons Anzeigen" name="showButtons">
        <input type="color" title="Hintergrundfarbe" name="bgColor" value="#db6400">
    <!-- End block parameters -->
    </mbr-parameters>

    <div class="container">
        <div class="media-container-row">
            <div class="title col-12 col-md-8">
                <h2 mbr-if="showTitle" class="align-center pb-3 mbr-fonts-style" mbr-theme-style="display-2">
                    Artikeltitel mit solidem Hintergrund
                </h2>
                <h3 mbr-if="showSubtitle" data-app-selector=".mbr-section-subtitle" class="mbr-section-subtitle align-center mbr-light mbr-fonts-style" mbr-theme-style="display-5">&lt; &nbsp; &nbsp; s c r o l l e n &nbsp; &nbsp; &gt;</h3>
                <div class="mbr-section-btn align-center py-4" mbr-if="showButtons" mbr-buttons mbr-theme-style="display-4">
                    <a class="btn btn-primary" href="https://mobirise.co">MEHR INFO</a>
                    <a class="btn btn-black-outline" href="https://mobirise.co">LIVE DEMO</a>
                </div>
               <div style="display: flex; justify-content: center;">
  <div style="overflow-x: auto; max-width: 100%;">
     <iframe 
    name="myFrame"
    width="1004"
    height="360"
    scrolling="yes"
    src="https://www.meinlangengrassau.de/assets/images/hoellkarte1.png"
    style="
        border: 3px solid #ffffff;
        border-radius: 10px;
        display: block;
    ">
</iframe>   
  </div>                  
</div>
</div>
     </div></div></section>

CSS ist:

Code: Alles auswählen

padding-top: (@paddingTop * 15px);
padding-bottom: (@paddingBottom * 15px);
background-color: @bgColor;

.mbr-section-subtitle {
  color: #ffffff;
}

H2 {
  color: #ffffff;
}

iframe {
  border: 3px solid #ffffff;
  border-radius: 10px;
}

Die Adresse ist: https://www.meinlangengrassau.de/hoellberghof

Kann mir bitte jemand helfen, so daß innerhalb eines sichtbaren Rahmens gescrollt werden kann ?

[Volker]

Sollte das so aussehen ? https://www.niederastroth.de/test/

dann setz die Höhe auf 377

[struggle]

Hallo Volker, nein das ist zuviel, dann erscheint ein Rand untr dem Bild. Ausserdem ändert es nichts an meinem Wunsch, einen festen Rahmen (Frame-Border) zu sehen, in dem mein Bild horizontal bewegt werden kann.

[Volker]

Na dann weiß ich nicht was du meinst

https://www.niederastroth.de/test/ hier kann man doch das Bild scrollen horizontal

[struggle]

Hallo Volker, das ist nur bedingt richtig.

Wenn ich Deinen Link anklicke, erscheint dieses Bild:

Erst wenn ich dann in das Bild klicke, erscheint es, wie gewünscht:

[Volker]

[struggle]

Hey, zu Deiner Vermutung eines exotischen Browsers, ich nutze auch Firefox.
Und ich klicke ja Deinen Link an.
Aber das krieg ich noch hin, ist ja eigentlich nur ein i-frame

[Volker]

Hä hä im Firerfox hab ich auch nur ein halbes Bild zuerst.
Firerfox ist Müll sorry, aber alle anderen Browser funktionieren deutlich besser als dieser paranoide Firerfox, der wirklich erstmal alles blockt

Opera, Edge und Chrome laufen absolut stabil und schnell. Warum braucht man Firerfox

[struggle]

Ich hab mal geguckt, Marktanteil:
Chrome 53-68 %
Safari 17-33%
Firefox 7%
Edge 5-6 %

[Bushisan]

Hallo zusammen,

hab das auch gerade getestet. Im Firefox ist die Anzeige kaputt. Edge und Chrome funktionieren !#

[struggle]

Ja, Dankeschön für die Info.
Nun muss es aber dennoch die Möglichkeit geben, daß es auch im Firefox korrekt angezeigt wird, sowohl am PC als auch am Handy.
Ich werde weiter testen.

[Tommy Herrmann]

Moin,

Hä hä im Firerfox hab ich auch nur ein halbes Bild zuerst.
Firerfox ist Müll sorry, aber alle anderen Browser funktionieren deutlich besser als dieser paranoide Firerfox, der wirklich erstmal alles blockt
Opera, Edge und Chrome laufen absolut stabil und schnell. Warum braucht man Firerfox

... also was soll das denn mit dem Firefox-Browser zu tun haben, der ist nur genauer was Fehler betrifft und lässt die nicht sang- und klanglos durchgehen.

Ohne max-width: none erzwingen manche Frameworks oder Browser, dass das Bild auf die Containerbreite schrumpft. Dann gibt es nichts mehr zu scrollen. Also macht das der Firefox eigentlich richtig und andere Browser falsch. Normalerweise will ja niemand Bilder scrollen, sondern diese als Ganzes sehen.

Denke auch daran, dass geframte Seiten generell nie gut sind, da diese dann auch einzeln von den Suchmaschinen gefunden und gelistet werden, sodass bei solchen geframten Seiten dann jede Information und Navigation fehlt. Das ist ganz, ganz schlecht - auch für die SEO.

Der Firefox ist schon seit Jahrzehnten auch mein Standard-Browser. Man gewöhnt sich halt an bestimmte Einstellungen, außerdem traue ich diesem Browser viel mehr als zum Beispiel dem Google und Microsoft Zeugs, die das gesamte Surfverhalten eines Nutzers schamlos zu Geld machen.

Du benötigst hier doch gar kein <iframe>, da reicht doch das scrollbare <div>, das ist doch sonst doppelt gemoppelt:

[gelöscht/Vorlageseite/Tutorial.html#Scrollbares-Bild]

Block wird auf meiner Seite später wieder gelöscht.

Unten der gesamte Code. Bitte ersetze den gesamten Code, damit Du keine Fehler machst. Die Breite vom Bild-Container kannst Du nun über die Werkzeuge in 10% Schritten, an einem Schieberegler, ändern:


HTML

Code: Alles auswählen

<section class="mbr-section content4" group="Article" data-bg-video="{{bg.type == 'video' && bg.value.url}}" mbr-class="{'mbr-parallax-background': bg.parallax}">

    <mbr-parameters>
        <input type="range" inline title="Oben" name="paddingTop" min="0" max="8" step="1" value="5">
        <input type="range" inline title="Unten" name="paddingBottom" min="0" max="8" step="1" value="5">

        <input type="range" inline title="Bildcontainer Breite in %" name="containerWidth" min="10" max="100" step="10" value="50">

        <input type="checkbox" title="Titel Anzeigen" name="showTitle">
        <input type="checkbox" title="Untertitel Anzeigen" name="showSubtitle">
        <input type="checkbox" title="Buttons Anzeigen" name="showButtons">
        <input type="color" title="Hintergrundfarbe" name="bgColor" value="#db6400">
    </mbr-parameters>

    <div class="container">
        <div class="media-container-row">
            <div class="title col-12 col-md-8">

                <h2 mbr-if="showTitle" class="align-center pb-3 mbr-fonts-style" mbr-theme-style="display-2">
                    Artikeltitel mit solidem Hintergrund
                </h2>

                <h3 mbr-if="showSubtitle" data-app-selector=".mbr-section-subtitle" class="mbr-section-subtitle align-center mbr-light mbr-fonts-style" mbr-theme-style="display-5">
                    &lt; &nbsp; &nbsp; s c r o l l e n &nbsp; &nbsp; &gt;
                </h3>

                <div class="mbr-section-btn align-center py-4" mbr-if="showButtons" mbr-buttons mbr-theme-style="display-4">
                    <a class="btn btn-primary" href="https://mobirise.co">MEHR INFO</a>
                    <a class="btn btn-black-outline" href="https://mobirise.co">LIVE DEMO</a>
                </div>

                <div class="scroll-wrapper">
                    <div class="image-scroll">
                        <img src="https://www.meinlangengrassau.de/assets/images/hoellkarte1.png" alt="Höllkarte" class="scroll-image">
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>

CSS:

Code: Alles auswählen

padding-top: (@paddingTop * 15px);
padding-bottom: (@paddingBottom * 15px);
background-color: @bgColor;
.mbr-section-subtitle {
  color: #ffffff;
}
h2 {
  color: #ffffff;
}
.scroll-wrapper {
  width: 100%;
}
.image-scroll {
  width: (@containerWidth * 1%);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow-x: auto;
  overflow-y: hidden;
  border: 3px solid #ffffff;
  border-radius: 10px;
  -webkit-overflow-scrolling: touch;
}
.scroll-image {
  display: block;
  width: 1004px;
  max-width: none;
  height: auto;
}
@media (max-width: 767px) {
  .image-scroll {
    width: 100% !important;
  }
}

[Tommy Herrmann]

Setze diese CSS mal noch unten an die andere CSS mit dran (hatte ich vorhin nicht ans Handy gedacht). Das bewirkt eine erzwungene Darstellung von der gesamten Displaybreite am Handy:

Code: Alles auswählen

@media (max-width: 767px) {
  .image-scroll {
    width: 100% !important;
  }
}

[struggle]

Hallo Tommy,
besten Dank für die ausführlichen Infos, die ich alle umsetzen werde
Erfolgsmeldung kommt dann !

[Volker]

(hatte ich vorhin nicht ans Handy gedacht). Das bewirkt eine erzwungene Darstellung von der gesamten Displaybreite am Handy:

Das ich DAS noch erleben darf

[struggle]

Es funktioniert einwandfrei, dankeschön

[Volker]

Freut mich das es klappt, aber den Sinn versteh ich immer noch nicht ganz Wozu soll das gut sein?
Warum willst du das Bild scrollen ? weil es eine Karte ist und du Google Maps nachbauen möchtest oder wozu ?

[Tommy Herrmann]

... vielleicht ist der Sinn, dass man auf kleinstem Raum ein relativ großes Bild zeigen kann, indem man es scrollt. Insbesondere am Handy.

https://www.meinlangengrassau.de/hoellb ... ontent1-fu

[struggle]

... vielleicht ist der Sinn, dass man auf kleinstem Raum ein relativ großes Bild zeigen kann, indem man es scrollt. Insbesondere am Handy.

https://www.meinlangengrassau.de/hoellb ... ontent1-fu

Genau so ist es ! Ich bin dazu übergegangen, der Darstellung auf dem Handy Vorrang zu geben. Es ist nun mal so, daß die meisten Nutzer auf dem Handy unterwegs sind.