Timeline selbstgemacht dunkel - Neues Projekt 3

A) Die Aufteilung des Rasters, siehe Screenshot A unten

B) Es gibt einen CSS-Code, um das rechte schmale Text-Objekt zu fixieren, siehe

In WebSite X5 unter "3 Sitemap" die Seite mit der selbstgebauten Timeline markieren und oben auf "Eigenschaften" klicken, dann den Reiter  "Erweitert" anklicken und den CSS-Code einfügen bei ...

Benutzerdefinierter Code:

Vor dem  </HEAD> Tag

<style>

#imTextObject_89_01 {

position: sticky;

top: 65px;

}

@media only screen and (max-width: 1149px) {

 #imTextObject_89_01 {

position: sticky;

top: 0px;

}

}

</style>

Hinweise zu B)

1) Die Zahlen bei #imTextObject_89_01 müssen an die Zahlen des schmalen rechten Text-Objektes auf der eigenen Seite angepasst werden.

Diese Zahlen können über den Browser ermittelt werden, z.B. beim Browser Firefox mit der rechten Maustaste oben rechts auf die Jahreszahlen klicken und im Auswahlmenü "Untersuchen" anklicken, dann wird unten das Web-Entwicklerwerkzeug angezeigt und hier finden sich rechts die benötigten Zahl, siehe Screenshot B unten

2) Bei Desktopansicht ist die Stickybar berücksichtigt mit einem Abstand (top: 65px) von oben und bei kleineren Auflösungen ohne StickyBar wird der Abstand auf Null (top: 0px) gesetzt.

Gewünschte Text-Objekt im Raster markieren und oben auf "Stil" klicken, im Fenster "Objektstil" kann ein Hintergrundbild hinter dem Text eingefügt werden, dabei wird je nach Bildgröße und Einstellungen meistens nur ein Ausschnitt angezeigt, siehe Screenshot C ganz unten

Damit die Jahreszahl beim Klicken auf die Ankerlinks im rechten schmalen Text-Objekt nicht durch die StickyBar verdeckt wird, können in den breiten Text-Objekten über der Jahreszahl noch 2 Leerzeilen eingefügt werden.