Timeline / Bild in Textbox

[struggle]

Hallo,

ich habe woanders in einem Timelineblock Bilder in der Textbox entdeckt:

Das möchte ich auch gerne nutzen. Ich bitte um Hilfe, was und wie ich das (wahrscheinlich) im folgenden Code unterbringen kann:

Code: Alles auswählen

           <div class="row timeline-element" mbr-if="timelinesAmount>59" mbr-class="{'separline':timelinesAmount>60}">
                <div class="timeline-date-panel col-xs-12 col-md-6  align-right">
                    <div class="time-line-date-content">
                       <p class="mbr-timeline-date mbr-fonts-style" mbr-theme-style="display-5" mbr-if="showDates" data-app-selector=".mbr-timeline-date">
                          11 november 2028
                        </p>
                    </div>
                </div>
                <span class="iconBackground"></span>
                <div class="col-xs-12 col-md-6 align-left">
                    <div class="timeline-text-content">
                        <h4 class="mbr-timeline-title pb-3 mbr-fonts-style" mbr-theme-style="display-5" data-app-selector=".mbr-timeline-title">Eintrag 60</h4>
                        <p class="mbr-timeline-text mbr-fonts-style" mbr-theme-style="display-7" data-app-selector=".mbr-timeline-text">Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.</p>
                    </div>
                </div>
            </div>

[Tommy Herrmann]

... ich habe heute keine Zeit mehr intensiv zu helfen - gerne morgen wieder ...

Gucke Dir mal mein Tutorial hier an:

https://www.mobirise-tutorials.com/Lawy ... rticle6-48

Da habe ich in einen fließenden Text ein Bild eingefügt. Das sollte auch in der Timeline am Ende genauso funktionieren.

Es gibt ja das <img> Tag ("Bild" Selektor) mit dem man Bilder darstellt.

Bilder, die man in Mobirise nicht über deren Editor einfügt, kennt Mobirise sozusagen nicht und diese sollten dann eine absolute URL zum Bild am Server haben. Ich erstelle mir für solche Bilder meist ein eigenes Verzeichnis "images" oder "bilder" am Server und kopiere dann mit dem FTP-Programm (wie "FileZilla") mein Bild in dieses Verzeichnis am Server.

Dementsprechend gebe ich dann den gesamten Pfad zum Bild an (das nennt man "absolute" URL):

Code: Alles auswählen

<img src="https://www.mobirise-tutorials.com/LawyerM4-Tutorials/images/Spatz-Hinten.jpg" alt="Bildbeschreibung" title="Spatzen">

Dann benötigt es immer etwas CSS - schon für die Größe des Bildes, die Du in den Bereich "CSS Editor" vom Block kopierst.

Hier als Beispiel gebe ich dem Selektor "img" eine Größe von 50% des vorhandenen Platzes, also vom <div> die halbe Breite, in das das Bild kommen soll. Das kannst Du auch in Pixeln aber besser in Prozent angeben.

float: right;

... lasse das "float" vielleicht erst einmal weg. Das bewirkt, dass das Bild rechts in den Text hinein fließt und dann noch der Inneabstand vom Bild:

padding: 20px;

... erstellt einen Abstand um das Bild herum von 20 Pixeln (z.B. zum Text).

Code: Alles auswählen

img { 
 float: right; 
 width: 50%;
 padding: 20px; 
}

[Tommy Herrmann]

Wenn man jetzt Deinen Beispiel-Code von oben nimmt und das Bild direkt unter dem Text haben wollte, dann kopiere den Bild-Code - also das <img> Tag einfach darunter, also dann so:

Code: Alles auswählen

<div class="row timeline-element" mbr-if="timelinesAmount>59" mbr-class="{'separline':timelinesAmount>60}">
    <div class="timeline-date-panel col-xs-12 col-md-6  align-right">
        <div class="time-line-date-content">
           <p class="mbr-timeline-date mbr-fonts-style" mbr-theme-style="display-5" mbr-if="showDates" data-app-selector=".mbr-timeline-date">
              11 november 2028
            </p>
        </div>
    </div>
    <span class="iconBackground"></span>
    <div class="col-xs-12 col-md-6 align-left">
        <div class="timeline-text-content">
            <h4 class="mbr-timeline-title pb-3 mbr-fonts-style" mbr-theme-style="display-5" data-app-selector=".mbr-timeline-title">Eintrag 60</h4>
            <p class="mbr-timeline-text mbr-fonts-style" mbr-theme-style="display-7" data-app-selector=".mbr-timeline-text">Dies ist ein Typoblindtext. 
            An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.</p>
            <img src="https://www.mobirise-tutorials.com/LawyerM4-Tutorials/images/Spatz-Hinten.jpg" alt="Bildbeschreibung" title="Spatzen">
        </div>
    </div>
</div>

... und versuche es zunächst mal mit dieser CSS in dem Block:

Code: Alles auswählen

img { 
 width: 50%;
}

[struggle]

Danke, das werde ich machen

[struggle]

Klappt bestens, will aber dennoch ein wenig "friemeln".
Ein gleicher Abstand des Bildes ringsherum ist nicht schön.
Im Beispiel des ersten Beitrages ist das Bild mit dem Text bündig. Ich werde den Abstand links bzw. rechts entsprechend einzeln vornehmen müssen.

[Tommy Herrmann]

Moin,

... wenn Du möchtest, dass man dazu was sagen kann, bzw. sich jemand eine Vorstellung machen kann wovon Du eigentlich sprichst, wäre ein Link zu der Seite (URL) hilfreich.

... und ja - das macht man so - natürlich muss man jedes Bild innerhalb eines Textblocks einzeln so anpassen, dass es richtig sitzt. Siehe dazu die CSS-Eigenschaft "padding":

https://www.w3schools.com/cssref/pr_padding.php

Du kannst das Padding (Innenabstand) einzeln angeben. Die Voreinstellung (Default), also bei keiner Angabe, ist dabei immer 0. In diesem Beispiel könntest Du also ebenso "padding-left: 0px;" ganz weglassen.

Code: Alles auswählen

padding-top: 20px;
padding-right: 30px
padding-bottom: 10px;
padding-left: 0px;

... oder man kann auch alle zusammen alternativ so schreiben (im Uhrzeigersinn):

Das Padding ist in beiden Fällen dann: 20px nach oben, 30px nach rechts, 10px nach unten, und 0px nach links

Code: Alles auswählen

padding: 20px 30px 10px 0px;

Bei dieser Schreibweise darfst Du 0px für "padding-left" allerdings nicht weglassen, denn sonst würde das rechts und links auf 30px gesetzt werden.


Man könnte das also auch verkürzen, indem man Werte weglässt. Dadurch wird der verbleibende Wert für beide Werte verwendet. Beispiel für oben und unten 20px, rechts und links 0px

Code: Alles auswählen

padding: 20px 0px;

... schreibt man dagegen nur einen Wert ohne zusätzliche Angaben, dann gilt der Abstand für oben, rechts, unten und links - also rundherum

Code: Alles auswählen

padding: 20px;

Padding beschreibt den Innenabstand eines Elementes zu seinem Rahmen. Für den Außenabstand geht das ebenso - nur mit "margin".

[struggle]

Hallo Tommy,

ich habe

Code: Alles auswählen

padding-top: 20px;
padding-right: 30px
padding-bottom: 10px;
padding-left: 0px;

in die CSS geschrieben. Es klappt soweit gut, aber nur für die rechten Textfelder in Timeline, da der Text dort linksbündig ist. Bei den linken Textfeldern ist der Text aber rechtsbündig.

Der CSS-Eintrag gilt ja für die ganze Seite. Gibt es eine Möglichkeit in der CSS sowohl das linke als auch das rechte Textfeld zu berücksichtigen ?

Ich habe mal ein Test-Verzeichnis erstellt. Da ist alles noch auf Anfang, vieles stimmt noch nicht.
https://www.immo4live.de/test

Mein Timeline ist unter dem Menüpunkt Veranstaltungen. Dort kann man die eingefügten Bilder sehen.

Dann noch was anderes, wenn man mit der Maus ohne zu klicken über den Menüpunkt Veranstaltungen fährt, dann öffnet sich schon die Seite. Und sie flackert ununterbrochen. Was ist das ?

[Tommy Herrmann]

na dann verwendest Du eben für die CSS nicht direkt das <img> Tag, sondern am besten eine Class. Classnamen sollten mit einem Buchstaben (klein) beginnen, dürfen keine Leerzeichen und keine Sonderzeichen wie Umlaute beinhalten. Eine Class wird mit einem .Punkt am Anfang als solche definiert:

.links

Z.B. dann für die rechten Felder, die linksbündig sind:

Code: Alles auswählen

.links {
    padding-top: 20px;
    padding-left: 0px;
}

... und dann schreibst Du die jeweilige Class so an das <img> Tag mit ran.

Bild linksbündig:

Code: Alles auswählen

<img class="links" src="https://www.immo4live.de/assets/images/03-liege-k.jpg" alt="Liege" title="Liege">

.rechts

... oder dann für die linken Felder der Timeline, die rechtsbündig sind:

Code: Alles auswählen

.rechts {
    padding-top: 20px;
    padding-right: 0px;
}

Bild rechtsbündig:

Code: Alles auswählen

<img class="rechts" src="https://www.immo4live.de/assets/images/03-liege-k.jpg" alt="Liege" title="Liege">

Ich frage mich allerdings, warum da der senkrechte Timeline-Strich am oberen Bild fehlt. Das sollte nicht sein

Das Wackeln bei Mausüber hatte ich nur beim ersten Überfahren.

Das könnte an dieser "Animation on Scroll", die Du an den globalen CSS-Einstellungen am "Pinsel" (unten rechts) ein/ausschalten kannst, liegen. Die macht sehr oft schlimme Probleme, ich verwende diese daher schon lange gar nicht mehr.

Schalte die mal aus und gucke dann.

Du kannst auch mal versuchen über die Timeline einen Header-Block zu setzen, das könnte das Zappeln dann auch unterbinden.

[struggle]

Hat geklappt, Dankeschön.

Das mit dem "flackern" hat nichts mit "Animation on scroll" zu tun. Die Funktion hatte ich abgeschaltet, der Fehler war immer noch da.
Es geht wohl um das Menü. Wenn ich mit der Maus nur gegen den Menüpunkt "Veranstaltungen" komme, wird schon umgeschaltet, ohne anzuklicken. Und dann flackert alles.

[Tommy Herrmann]

... aber Du hast das doch eindeutig eingeschaltet.

Das sieht man doch am Scrollen, wenn der Text und Bilder von unten her "einfliegen". Außerdem steht es auch im Quelltext

Ich habe das so noch nie erlebt.

... sonst versuche doch mal diesen Navi-Link neu zu machen, also löschen und neu erstellen. Eventuell auch die gesamte Menüleiste.

[struggle]

Ich hab' geschrieben, ich hatte es abgeschaltet, und da es nicht daran lag, wurde es wieder eingeschaltet.
Die komplette Menüleiste neu machen, wäre schrecklich, das Menü ist nicht global
Mal sehen, was der Navi-Link so macht.

[Tommy Herrmann]

ich hatte es abgeschaltet, und da es nicht daran lag, wurde es wieder eingeschaltet.

Moin,

als Du das abgehakt und erneut geprüft hattest, bist Du Dir auch ganz sicher, dass Du auch zuvor den Browser-Cache gelöscht hattest?

Sonst passiert nämlich gar nichts.

[struggle]

Na ja,
ich veröffentliche immer in ein lokales Verzeichnis und schiebe es erst auf den Server, wenn es ok erscheint - oder wie in diesem Fall, wenn jemand anderes "drauf schauen" soll.
Ich sehe ja schon Lokal, wenn was nicht stimmt. Oder unterliege ich hier einem Irrtum ?!

[Tommy Herrmann]

Moin,

das kann ich so nicht sagen. Es kommt darauf an welche Scripts wo und wann geladen werden. Lokal verwendet ein Browser aber auch einen Cache.

Wahrscheinlich ist es aber lokal gleich wie am Server. Testen würde ich es aber dennoch mal. Dann kann ich es hier auch mal prüfen.

Schalte es mal ab und publiziere in das Test-Verzeichnis (ist doch im "test" und daher soweiso egal). Dann gucke ich nachher hier auch mal, denn es kann schon fast nichts anderes sein.

[Tommy Herrmann]

... und packe mal auch noch einen Header-Block (egal was) zwischen die Navi und die Timeline, damit die Timeline nicht direkt unter der Navi beginnt - das auch nur zum Testen.

[struggle]

Hab jetzt abgehakt und auf den Server geschoben. Bei mir ist der Fehler noch immer da, ich brauche den Menüpunkt mit der Maus nur berühren, schon schaltet er um.

Da das Menü nicht global ist, habe ich auf jeder einzelnen Seite die Verlinkung überprüft, überall stimmt es. Ich hatte sogar schon mal diesen Menüpunkt auf jeder Seite gelöscht und dann neu erstellt. Auch das brachte keine Veränderung.

PS: Jetzt habe ich mal einen Header-Block zwischen Menü und Timeline geschoben, der Fehler ist noch immer da. Mit dem Timeline-Block kann es auch nicht zusammenhängen, schon zu Beginn der Seite war der Fehler ohne diesen Block vorhanden.

[Tommy Herrmann]

... der Fehler liegt hier:

<li class="nav-item dropdown"><a class="nav-link link text-warning display-7" href="veranstaltungen.html" style="color: #DB6400!important;">VERANSTALTUNGEN</a></li>

Es gibt kein "dropdown" (Untermenüs) an der Stelle vom Menü-Link "Veranstaltungen".

Enferne die class="dropdown" - also dann so:

<li class="nav-item"><a class="nav-link link text-warning display-7" href="veranstaltungen.html" style="color: #DB6400!important;">VERANSTALTUNGEN</a></li>

[struggle]

Ganz toll, vielen Dank, werde ich entfernen. Dann melde ich mich ! Du bist halt der Beste

[Tommy Herrmann]

... erst mal probieren - ist gerade nur meine Vermutung

[Tommy Herrmann]

... ach ja - das wollte ich Dir gestern schon mitteilen (ganz vergessen):

Du hast auf "tagesschau.de" mittels Iframe einen Link gesetzt.

Das verbieten fast alle Webseiten, denn sie wollen nicht das der Inhalt ihrer Seiten in einem Iframe auf einer fremden Seite angezeigt wird.

Das musst Du wieder entfernen.