Volt aki kérdezett már idővonalat, így rákerestem egy könyebbre. Az egész egy css kódra alapul, tehát nagyon könnyű, igaz nincs annyi dolog rajta mint a többin, de szerintem ez is megteszi. :)

A demót nem raktam be, mert széthúzta volna az oldalt, így a demót itt nézhetitek meg: DEMÓ

Az idővonal csíkokat úgy lehet álligatni, ha a width-et állítod, tehát pl.:

<li style="width: 42.48%; left: 57.2%;">

A width a szélesség beállítása, a left a baloldali beállítás, tehát hogy a bal oldaltól hány százalékra jöjjön arrrébb. El lehet vele szórakozni, tudom, de nem nehéz. :) Ha ránéztek a html kódra elég bonyolultnak tűnik a dolog, de ha megnyittok egy Notepadot, beállítjátok css kód nézetre, és közben nézitek az oldalon a demót, minden átlátható lesz.  Akkor nézzük a kódokat:

HTML kód:

<div class="timeline">

<ul class="events">

<li style="width: 42.48%; left: 57.2%;">

Design &amp; Tipográfia <em>(2007 - 2009)</em></li>

<li style="width: 56.68%; left: 43%;">

Képek <em>(2006 - 2009)</em></li>

<li style="width: 71.3%; left: 28.4%;">

Objektum orientált programozás <em>(2005 - 2009)</em></li>

<li style="width: 85.5%; left: 14.2%;">

Weblap fejlesztes <em>(2004 - 2009)</em></li>

<li style="width: 42.75%; left: 0;">

3D modell készítése <em>(2003 - 2006)</em></li>

<li style="width: 99.5%; left: 0;">

Rajz &amp; Ez <em>(2003 - 2009)</em></li>

</ul>

<!-- end .events -->

<ul class="intervals">

<li class="first">

2003</li>

<li>

2004</li>

<li>

2005</li>

<li>

2006</li>

<li>

2007</li>

<li>

2008</li>

<li class="last">

2009</li>

</ul>

</div>

CSS kód:

<style type="text/css">

ul.events {

    list-style-type: none;

    margin: 0;

    padding: 0 0 20px 0;

}

 

ul.events li {

    -webkit-border-radius: 11px;

    -moz-border-radius: 11px;

    border-radius: 11px;

    background: #eee;

    border: 1px solid #ddd;

    color: #707070;

    font-size: 1.2em;

    font-weight: bold;

    margin-bottom: 6px;

    padding: 3px 0;

    position: relative;

    text-align: center;

}

 

ul.events li em {

    color: #aaa;

    font-weight: normal;

    font-size: 0.9em;

}

 

ul.intervals {

    list-style-type: none;

    padding: 0;

    display: block;

}

 

/* The width depends on the number of intervals. For example 100 / 7 = 14.29% -- then subtract a little bit for room for the borders */

ul.intervals li {

    background: #fff url(/images/1x1_eee.gif) repeat-x left 10%;

    border-right: 1px solid #ccc;

    color: #999;

    float: left;

    font-size: 1.2em;

    margin: 0;

    padding: 15px 0;

    text-align: center;

    width: 14.17%;

}

 

ul.intervals li.first {

    border-left: 1px solid #ccc;

}</style>