Posted By admin
Timeline (with images and tooltip)
Demo

is it possible to have a single column timeline using this snippet? I don’t really need the left column..,I had made a few changes to reduce the empty spaces, the code that needed to be changed is the follwoing:,.timeline:before {top: 0;bottom: 0;position: absolute;content: ” “;width: 3px;background-color: #eeeeee;left: 50%;margin-left: -1.5px;}.timeline > li {margin-bottom: 20px;position: relative;width: 50%;float: left;clear: left;}.timeline > li > .timeline-panel {width: 95%;float: left;border: 1px solid #d4d4d4;/*border-radius: 2px;*//*padding: 20px;*/position: relative;-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);}.timeline > li.timeline-inverted{float: right; clear: right;margin-top: 30px;margin-bottom: 30px;}.timeline > li:nth-child(2){margin-top: 60px;}.timeline > li.timeline-inverted > .timeline-badge{left: -12px;},And i add <li class=”clearfix” style=”float: none;”></li>to the html so the middle line go until the end of <li>————————————————————————-All the rest of the code remains the same.,Great snippet but… too many empty space between events,If you want, i had post a few changes to remove the empty spaces.,how can we avoid multiple scroll bars around the timeline container in chrome?,The author is rafamaciel

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *