HTML, CSS, JavaScript timeline?

I’m looking for basic demo/example for simple timeline.

What I really need is that it’s horizontal, and that it teaches how to place division (year by year) and “boxes” with information next to associated date.

I’ve seen two types.
Ones are vertical that are just tables with image. Not useful. It’s not a bar, it’s a table.
Second are horizontal that are extreme full-fledged plugins with 5000 pre-made settings.

I need to keep it simple. Just a “bar”. With division of date, and capability to attach “what happened then” boxes.

Do you have an image showing what you want to achieve? It’s not easy to picture what you describe.

I’m not designer. It’s pretty simple.

So I’m looking for tutorial for simple timeline. Horizontal timeline. That would let me “pimp” out each sub-item using CSS. Stylize black bars (indicating years), separate sections of history (blue, gray, green, red). And would help me “automatically move” information boxes to related area.

Either a ready example to learn from, or step by step tutorial. Anybody knows such?

Do you know much CSS? This isn’t too hard to do with CSS, but is a bit messy and brittle. A better alternative would be to draw this up in a graphics editor(Illustrator, Affinity Designer etc.) and export it to SVG, which then can be embedded on the page like an image.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.