Photo Gallery Forums

I tried to include a vertical timeline in an imagevuex page. Unfortunately, the coding and view is not as shown in the examples.

What should I note that it can be displayed correctly.

Here are some links to different vertical timelines.

https://great2gether.com/2018/09/top-7- ... -html-css/
https://freefrontend.com/css-timelines/
https://www.w3schools.com/howto/howto_css_timeline.asp

Best regards
Danjel

Adding advanced custom HTML/CSS/Javascript snippets into ANY website (including X3) is not going to be easy, even if you are a web designer. Those links you are referring to are definitely meant for web designers with experience in HTML and CSS. The challenge when adding something into a website with it's own styles, is that styles are never going to match ... unless the snippet is extremely well created, so that it doesn't inherit styles from the original website.

I can only help here if you have a link to something you already tried to create, and I can tell you why it's not working correctly. There is no recipe on how to do this correctly. You need to use the code as examples, and adjust it to your website.

I try to include the timeline below.
When I create a html file it fits. If I try to integrate this into imagevuex it is unfortunately very delayed.


https://www.w3schools.com/howto/howto_css_timeline.asp

Hier the example:

http://sandbox.rojka.de/marina_i_danjel ... _raspored/

First of all, I can't see that you have added the html according to the source example https://www.w3schools.com/howto/howto_css_timeline.asp. This example clearly has elements with containertime timeleft and containertime timeright, with timecontent element inside.


In your example, you just have elements container left and container right, not according to the example, and I can't see any timecontent element inside either:


For this to work according to the example, it has to be done with the right elements and classes at least. Then,  unless your custom class names are crashing with X3 class names, it should work. In your classes, you are using very general terms like "container", "left" and "right". Really, you should have class names that won't crash ... For example like in the original source "containertime" and "timeleft" are unique names, created specifically for the timeline design.

You also have a custom class for "content" even, which is used by X3. That is why you are getting that white rectangle at the top. You need to use unique class names, and besides, I don't see where you get those styles and classnames from, because they are not in the example you are referring to.

Hello karl,

now looks great.

http://sandbox.rojka.de/marina_i_danjel ... _raspored/

But the responsive design is not perfect. The dots of the right side was not centered in the timeline on the screen on mobile phone.
I hope i can fix this.

Have you an idea to fix the dots?

Another timeline with another Design.

http://sandbox.rojka.de/marina_i_danjel ... aspored_2/

Regards
Danjel

It seems you were working on this while I was checking, as things seemed to change. At the time of my check, you had a CSS style not copied correctly from the example source:
@media screen and (max-width: 600px)
.timeleft::after, .right::after {
    left: 16px;
}

It should be:
@media screen and (max-width: 600px)
.timeleft::after, .timeright::after {
    left: 16px;
}

The above is a "media query" which sets styles on small screens.

Thank you very much.
I totally overlooked the attitude. Sometimes you do not see such a small thing.

Best Regards
Danjel