I have been on the hunt for timeline software that would for tracking my fictional characters. My partner-in-crime devised a beautiful timeline in Photoshop, but it was a real chore to keep updated. On Sunday night, I hit upon looking up a HTML and CSS version and came across this version on the dev.Opera website. I modified the code to come up with a version that closely mimics the work of my friend.
I worked feverishly for a few hours on my timeline but eventually became overwhelmed with the difficulty of maintaining this version as well. The problems:
Some issues I would like to bounce off others:
To create the five year time spans (indicted by the thicker border), there are five divs. I have to continuously copy and paste this five div structure to keep going sideways (I will have over a thousand cells when I am done!). When I add a character into the timeline, I have to go into each “year” div and then create the character’s div. If another character was also born in that year, I have to add them inside the same year div.
Then in the CSS, I have to create a simple margin-top rule to tell the new div/bar how far down to move. The problem becomes apparent when I think of every time a new character is added, every character below them will need to have their margin-top rule adjusted. This is clearly an issue!
The second problem is that those “types” on the side (e.g. Fire) will also need to be pushed further down the page with every new addition. So for instance, if there is a new character added in Fire, Water will need to be pushed down the page.
An ideal thing I would like to ultimately do would be to have a drop down selection box which would then only show characters of that type (or clicking on the text of a “type” would cause those characters to appear). Then someday I’d like to be able to simply type in character names and have only those listed appear. But those are bigger dreams waiting for me to learn advanced coding!
My friend asked me the other day if I know how to code and build websites. I looked at her a bit funny as I replied that was my graduate assistant position! I have to get some Photoshop mock-ups done in the next two days for the Diversity website I am building this summer.
This is lifted from a Facebook chat I had with a friend as I talked him through the basics of CSS.
So, when you’re coding, you can only code down the page right? But your CSS can make images/areas appear wherever on the actual web page
So you need to keep the constraints of the HTML in place as you code and remember to think of the final page so you’d have something like:
< div id= "sidebar_right" >
< /div >
< div style= "margin-top: -30px; margin-left: 20px; ">
< img src="picture.jpg" />
< div style = "margin-top: -50px; margin-left: 20px; ">
< img src ="picture2.jpg" />
I had to add in lots of spaces to get the code to appear on this page. This text is to be used as an example.
You have to give the pictures negative top margins so that you can pull them up the page instead of being below the sidebar.
The margin-left will move the images to the left of the item to the left of it
Adjust the numbers as needed
Do you know the difference between class and id in CSS?
- id is where identify the div like