Hi all,
I have recently been learning HTML / CSS / Javascript and learning techniques from various sources on the internet and youtube and came across a really good timeline example by Alvaro Trigo. I made an attempt to add some extra entries to the timeline and ran into a number of formatting issues that to date I have been unable to troubleshoot. The premise of the timeline is that the newest entry is at the top so 2023 at the top and 2015 at the bottom.
With reference to the image attached, I will call the entries in the timeline 1, 2, 3, and 4 etc these are folded/collapsed, but contain all the information associated with the entry in the timeline such as:
card_box
card_meta-box
card_point-box
card_point
card_item
card_img-box with the src for the image
card_info
card_title
card_desc - where the main text of the entry would go
card_arrow
When playing around with the HTML file, I tried adding a new entry by copying and pasting the first one (1 in the image) and edited the various items listed above. I then ran the HTML, CSS, and Javascript and to my surprise the formatting went crazy. I then looked at the HTML a little more closely and realised the code used in the HTML is subtly different between the entries that are odd and those that are even. As long as I maintain this alternating pattern in the HTML, I am able to get the formatting working, but if for example I only want to add 1 entry to the timeline, it means I end up needing to change the code for all the other entries. If the timeline gets so long that it has like 100 entries, I can see it being a real pain to change them all.
Is there a more efficient way to code this? I understand in the CSS there are references to odd and even pseudo classes, but have not been able to get them working.
Happy to share more screenshots / create some extra diagrams to convey my message.
Kind regards,
I have recently been learning HTML / CSS / Javascript and learning techniques from various sources on the internet and youtube and came across a really good timeline example by Alvaro Trigo. I made an attempt to add some extra entries to the timeline and ran into a number of formatting issues that to date I have been unable to troubleshoot. The premise of the timeline is that the newest entry is at the top so 2023 at the top and 2015 at the bottom.
With reference to the image attached, I will call the entries in the timeline 1, 2, 3, and 4 etc these are folded/collapsed, but contain all the information associated with the entry in the timeline such as:
card_box
card_meta-box
card_point-box
card_point
card_item
card_img-box with the src for the image
card_info
card_title
card_desc - where the main text of the entry would go
card_arrow
When playing around with the HTML file, I tried adding a new entry by copying and pasting the first one (1 in the image) and edited the various items listed above. I then ran the HTML, CSS, and Javascript and to my surprise the formatting went crazy. I then looked at the HTML a little more closely and realised the code used in the HTML is subtly different between the entries that are odd and those that are even. As long as I maintain this alternating pattern in the HTML, I am able to get the formatting working, but if for example I only want to add 1 entry to the timeline, it means I end up needing to change the code for all the other entries. If the timeline gets so long that it has like 100 entries, I can see it being a real pain to change them all.
Is there a more efficient way to code this? I understand in the CSS there are references to odd and even pseudo classes, but have not been able to get them working.
Happy to share more screenshots / create some extra diagrams to convey my message.
Kind regards,
