Использование JS для циклического перемещения списка в соответствии с текстом

В связи с моим вопросом, представленным здесь: Сохранение списка с текстом при сохранении списка по вертикали

Возникли проблемы с циклическим перемещением по списку с помощью js, сохраняя список в строке с некоторым текстом. Плавающий текст слева решает проблему, пока мне не придется форматировать и центрировать текст/список.

что я до сих пор: http://jsfiddle.net/pthbK/ пытается добиться чего-то подобного: https://www.youeye.com/

Список добавляется по какой-то причине, в результате чего текст появляется чуть ниже списка. Цель - получить список, который отображается непосредственно рядом с списком (слева в моем случае).

<center>
<div id = "text">Sometext&nbsp;</div>
    <ul id = "ticker">
        <li>3</li>   
        <li>2</li>
        <li>1</li>
   </ul>





#ticker {
    height: 40px;
    overflow: hidden;
    list-style-type: none;
    list-style-position: oustide;
    padding: 0;
    display:inline-block;
}
#ticker li {
    height: 40px;
}
#text {
    display: inline;
}



function tick(){
$('#ticker li:first').animate({'opacity':0}, 200, function () { $(this).appendTo($('#ticker')).css('opacity', 1); });
}
setInterval(function(){ tick () }, 4000);