The event li's alternate between the left and right side nicely until I place a new li.year in the chain.

If the last li.event is on the right side before a li.year, the next li.event afterwards appears again on the right side, and would like to have it continue on the left side. Is there a way of changing the order?

ul.timeline li.year li.event(appears on right) li.event(appears on left) li.event(appears on right) li.year li.event(appears on right) > change to left li.event(appears on left) > change to right li.event(appears on right) > change to left

When using a list (ol or ul, doesn't madder) to display the chain of events, it works fine until you add a li.year. After adding a year, the order in which the events are added to the timeline is wrong.

Wrong meaning, that an earlier item in the list is not displayed as an earlier entry in the Timeline. You can observe that in your own example, given here:

<ul class='timeline'>
    <li class="year">2013</li>
    <li class='event offset-first'>
      Something amazing happened today, but it's a secret
    </li>
    <li class='event' href="#">
      Timeline.css is <b>dynamic</b>, <b>responsive</b> and optimized to <b>demonstrate events</b> in your life in a <b>simple and clear</b> way
    </li>
    <li class="event">
        <a href="http://christian-fei.com" title="christian fei">
          made with &lt;3 by <img class='no-box centered' src="https://s3-eu-west-1.amazonaws.com/cf.img/var/face.svg" alt="christian fei">
        </a>
    </li>
</ul>

Here, you would expect the "Something amazing"-event to be earlier than the "Timeline.css"-one. Well, look for yourself.

I did some research and found, that the problem is caused by the nth-child()-selector. It works a little different than you seem to think:

It will find the nth-children in the list, whom's type is li and then check if it has the correct class. See this StackOverflow answer.

That means, that it will find the even/odd li, then check the type and if the type is not event, will not match anything (which is not what you want). What you want is to get the even/odd li in a "sub-list", that only includes lis with the class event.

My workaround is to use dt for the years and dd for the events (in a dl, of course). This way, the css selector will match nth dd (dts are not ever matched) and the order is correct. But this seems pretty hacky to me.

Again, this problem does only occur when year-elements are put in the list.

Hi @christian-fei, I saw that the readme said this project is under MIT license(https://github.com/christian-fei/Timeline.css#mit-licensed), but in the commit to add package.json(https://github.com/christian-fei/Timeline.css/commit/ec62643ee809f6b7a750d6dc277564ddacc1ed02#diff-b9cfc7f2cdf78a7f4b91a753d10865a2R14), it's ISC

+{
+  "name": "timeline.css",
+  "version": "1.0.0",
+  "description": "Timeline The best way to create your own Timeline, with just CSS! Share life and work events with Timeline.css! Sass and SCSS port too!",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/christian-fei/Timeline.css.git"
+  },
+  "author": "Christian Fei",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/christian-fei/Timeline.css/issues"
+  },
+  "homepage": "https://github.com/christian-fei/Timeline.css#readme"
+}

So is this project under multiple licenses or this is a mistake? Thanks!

GitHub changed the way Markdown headings are parsed, so this change fixes it.

See bryant1410/readmesfix for more information.

Tackles bryant1410/readmesfix#1

Hi, I've been trying to figure out a way to layout my resume like this and I think your project's really cool! Just wondering, is there a built-in functionality to show timespans?

For example, a section of the timeline could be 2013, but I may want to highlight an event at the end of the year, and another around the June/August.

Hope that made sense...

Thanks!

There are multiple selectors in the Timeline.css file, which match against "global" objects, like the time or *, *:after, *:before.

I'd suggest to change them to only apply to elements in the timeline (e.g. .timeline [selector]). That way, you could use the CSS-file as a drop-in, without it messing with your sites "global" layout/CSS.