HTML and CSS Timeline Expirement

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!


I recently heard of Codecademy but did not get a chance to try it out until yesterday while watching the computer labs at work. What is it? Codecademy teaches you some basic Javascript functions. On the front of their website, you have the option to either click the green Get Started button or just enter your name in the prompt box. From there, within seconds you are coding. At the end of each lesson, they give you a brief nag screen to register for an account, but you can ignore it by clicking “Next Lesson.”

I quickly became confused while trying to follow along but that could be because every 30 seconds I had to see to a patron. When I got home, I coaxed Thomas into trying it out and next thing I know, it’s been an hour and he’s finishing up the final available lesson. At one point, he even said, “Coding is fun!” His sore spot was that he wanted his own editor to play with to see what else he could do. I’m resisting the temptation to push my Javascript textbooks on him and tell him to go ahead and learn a coding language in his downtime. Come to the dark side.

Other reviews:

CSS Training in Facebook Chat

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
Make sense?

Do you know the difference between class and id in CSS?

  • id is where identify the div like
  • and I reference it using a #
  • is ONLY used for one item on the entire site. Which means that you can’t (or shouldn’t) call that id on any other page
  • In the CSS, it is referenced as #sample
  • can be repeated as many times as you want

How to highlight current location in WordPress main navigation bar

In the css, if you add the following code:

/* Change the background color below to control how the navigation/menu section you're in changes color. */

the background will change colors. :-D


That hack only works if you’re in the TOP LEVEL menu pages. As soon as you go one level deep, it quits working. Argh.

Progress on the LIS website

I added some new things to the website:

1) added the slideshow gallery that you wanted (there are some options you can play with to make it switch slower, etc. I don’t think we can get text directly onto the image unless we write it in Photoshop)
2) functional navigational breadcrumbs
3) found a widget that will create the subpage menus automatically so there is no coding involved for anyone
4) have the page you’re on change colors in the sidebar subpage menu on the right (but it also changes the color of the child too which I haven’t figured out yet how to stop it from inheriting that particular property)
5) working with some online help to get the 2 x 2 “featured” section working
6) added social bookmarking tools
7) changed the colors of the site though it still needs some work on a better design. I’m more worried about getting it automated and functional at this point.
8) added the LISSA and Blog links on the navigation bar
9) removed “Organization” from “People & Organizations” off the menu

I would have had much more done, but as you can imagine, nearly every one of the above features can with its own problem that had to be ironed out before I could go on.

Problem or questionable areas:

1) There is a –> tag showing up in Firefox which removes my footer bar. It ONLY shows up in Firefox from what I’ve found and I’ve been unable to find and eliminate it.
2) Should the social bookmarking tools be bigger?
3) Since the Headline gallery and the Featured section have pictures, should I keep the sidebar photo gallery?

Install Drupal on 1and1

As part of my graduate assistantship, I am building a website for a project connecting international librarians. However, in order to get started on following my bosses’ specifications, I needed a content management system (CMS) that could handle the work and be easy to update for a non-programmer like myself. After a tip from a close friend, I started investigating Drupal and found out that it is used by the White House and the group that is paying me for my work. With this reassurance, I decided set forth on my journey.

The first thing I needed to do was to learn about Drupal. I choose Teach Yourself Drupal in 24 Hours which is not the best edited book. However, it’s a starting point. The next part was to install Drupal on my 1and1 hosted server. Below are the steps that took me two hours to figure out:

To set up Drupal:

1. Set up a MySQL 5.0 database.
2. Create a folder on your server for Drupal.
3. Download Drupal and unzip it.
4. Open notepad and type in:
register_globals = off
memory_limit = 40M
5. Save the file as php.ini in the Drupal folder on your computer.
6. Open .htaccess
7. Search for “RewriteBase /public_html”
8. Change public_html to the name of the folder you’ve installed drupal in
9. Save
a. Steps 6-9 will also allow you to have Clean URLs. Remember to enable them once the site is online!
10. In the sites/default folder, make a copy of “default.settings.php” and change the name to “settings.php”
11. Upload the Drupal folder’s contents into the folder you put on your server.
12. Follow on-screen instructions. Add the host information from 1and1 as ordered AND under “advanced configurations” in the setup process.
13. In the sites/all folder, create two new folders: “modules” and “themes”
14. Install Pathauto and Token modules and enable them.
15. Go to Administers/Site Configuration/Clean URLs and enable them.
16. Go to Administer/Site Building/URL Aliases and delete any alias that might already be there.
17. Then click on “Automated alias settings” then “Node Path settings”
18. In the first box, I like to put in “[yyyy]/[m]/[d]/[title-raw]”

The dummy testing site can be found here if you are interested in watching my progress.
Good luck!