So far I have a timeline of my life. It is a lifetime in php, and from a mysql table. And it somehow works. But I’d like to make several enhancements.
It is a page only for me, to be shown on my PC monitor, so no problem for responsivness on small screens.
I’d like to put different kind of events in different “columns” (not with a table, of course, but using grid or flex). As different kind of events I mean: studies, job, health, holydays, and so on.
And this because every event should have an height matching with is duration. And so, unless every kind of event has its own "column, there would be “overlapping” events.
I don’t know if it is relevant give you my present css code. Or it would be enough to say that any item of my mysql table ha a column (“typology”) from which I should get a class to determine where that kind of event should be positioned (in what of 5 columns should appear).
I guess that I have give you too less information. Let me know what other ones I should provide.
This afternoon I will add some further info. Please wait. Thank you!
jan 09 money1
mar 02 family1
Of course the above is a skeleton. I wish every item with the correct distance from the beginning (my birth), years (with a specific class, from mysql table) at the center of the page, and other items positioned in their respective “column” (depending of their class).
Can you put that into a working codepen so I can see what it’s doing as there is some code missing.
I pulled out a lot of code from my demo just to see if I have understood what you are trying to do.
Is that demo above roughly what you are trying to achieve?
Assuming the backend is going to add those variables then it would make sense to work it out in the php and then in the html just put the value you need. If you like at my example the inline styles is used.
In order to place items absolutely you will need to create a fixed height for each year or have some other basis to work on.
The first thing is to get the layout displaying as you want it and then once you have done that then you can move to PHP to generate the html that’s needed. In my example the php could generate the html with the value required and then the css does the rest. If you can get your demo working with hard coded (logical) values in the html then the backend will have something solid to work with.
You do need a logical structure so that you have something to work with. For example if you want to place something at a timeline of say Jun 01 then the area it sits in needs to be 12 months tall and then the entry needs to be converted to a percentage of the current timeline (assuming 12 months) so it would need to be placed at 50%.
You haven’t posted enough for me to work out what you are doing. I can’t see that that will work in any usable way. If you can flesh it out or put it into a codepen then I can check if you are doing something else. However the html is very similar to my post 10 anyway.
The example I posted in post 10 using CSS grid is doing exactly what you wanted (I believe) and is a very simple html structure. It will expand and contract as required.
The only thing the backend needs to do is to put a px value in here.
<div style="--height:0px" class="entry">
I made the default height 365px so you just need to put a value in there that matches your date. e.g. 1st Feb would be style="--height:32px". To be honest I don’t think it can be simpler than that
Alternatively you just put a date in there from the back end and then you use JS to convert that into a value to be used in the css.
I suggest you consider generating an <svg>, or possibly a <canvas> element from your mysql data. I am assuming you want something like a Gantt chart but with the timeline drawn vertically.
You could draw a grid with horizontal lines every month (say) and draw five columns for your five types of “events”. Then for example if you have a winter holiday from 14th December to 5th February you would be able to draw a rectangle in one column stretching from one year into the next. A text label could be added.
Unfortunately I can’t confirm whether you will have problems later on or not as you have never posted any fully working code (like a codepen perhaps). I tried all the code you posted above but it just renders as nonsense as there are obviously bits missing
As long as it’s working for you then I guess it doesn’t matter anyway but it would have been nice to see the finished product