Вопрос о css для topic.tpl

Подскажите пожалуйста:
Что нужно в style css написать, чтобы Соц закладки выровнялись по левому краю и после«включиться» поставить разделительную полосу.
Что делал я:

в style.css прописал после
/* Topic
-------------------------------------------------------------------*/
.topic { padding-right: 30px; font-size: 13px; overflow: hidden; position: relative; margin-bottom: 10px; }
.topic h1.title { font-family: "Times New Roman", Times, serif; font-size: 20px }
.topic h1.title a{ margin-bottom: 5px; color:#333; font-size: 20px}
.topic h1.title .topicblog {color:#927203; font-size: 20px}
.topic h1.title .date {color:#99cc99;font-size:10px; vertical-align: top; line-height: 15px}

.topic.talk .favorite { position: absolute; top: 7px; left: 10px; }
.topic.talk .favorite a { background: url(../images/icons.gif) no-repeat 0 -40px; display: block; height: 16px; width: 20px; outline: none; }
.topic.talk .favorite a:hover { background: url(../images/icons.gif) no-repeat -20px -40px; }
.topic.talk .favorite.active a { background: url(../images/icons.gif) no-repeat -20px -40px; }

/* Tags of Topic */
.topic .tags { background: url(../images/icon-tag.gif) no-repeat 0px 6px; padding-left: 13px; margin-bottom: 8px; clear: both; }
.topic .tags li { display: inline; color: #777; }
.topic .tags li a { text-decoration: none; color: #777; }
.topic .tags li a:hover { background: #777; color: #fff; }

.topicmenu {height:24px;background:#e0e0e0;margin-bottom:3px }

/* Vote Block */
.topic .voting { clear: both}
.topic .voting li { float: left }
.topic .voting li.author {padding-top:2px;}
.topic .voting li.author a{ margin-right: 6px; margin-top:6px;padding-right:6px;color: #333; text-decoration: none; font-size: 12px}
.topic .voting .plus { margin-left:10px;padding-top:5px}
.topic .voting li.total {margin-left:5px;color: #aaa; text-align: center;padding-top:2px }
.topic .voting li.total a:hover, .topic .voting li.total a { color: #aaa; text-decoration: none }
.topic .voting .minus {margin-left:5px;padding-top:5px;padding-right:10px;margin-right:10px;border-right:1px solid #ccc}

.topic .voting li.comments-total {color:#666;padding-top:2px;padding-left:10px;border-left:1px solid #ccc; height: 22px }
.topic .voting li.comments-total a { font-size: 12px; color:#666; text-decoration: underline }
.topic .voting li.comments-total a:hover { text-decoration: none }

вот это
.topic .voting li.shares {color:#666;padding-top:2px;padding-left:10px;border-left:1px solid #ccc; height: 22px }


А в topic.tpl:
<li class="shares">
<a href="http://vkontakte.ru/share.php?url={if $oTopic->getType()=='link'}{router page='link'}go/{$oTopic->getId()}/{else}{$oTopic->getUrl()}{/if}" rel="nofollow" target="_blank"><img src="{cfg name='path.root.web'}/images/bookmarks/vkontakte.gif" title="Добавить заметку в Вконтакте"></a> <a name="cut"></a> 
<a href="http://twitter.com/home?status={$oTopic->getTitle()|escape:'html'}-{if $oTopic->getType()=='link'}{router page='link'}go/{$oTopic->getId()}/{else}{$oTopic->getUrl()}{/if}" rel="nofollow" target="_blank"><img src="{cfg name='path.root.web'}/images/bookmarks/twitter.gif" title="Добавить заметку в Twitter"></a>
<a href="http://connect.mail.ru/share?share_url={if $oTopic->getType()=='link'}{router page='link'}go/{$oTopic->getId()}/{else}{$oTopic->getUrl()}{/if}" rel="nofollow" target="_blank"><img src="{cfg name='path.root.web'}/images/bookmarks/moimir.gif" title="Добавить заметку в Мой Мир"></a> 
<a href="http://www.facebook.com/sharer.php?t={$oTopic->getTitle()|escape:'html'}&u={if $oTopic->getType()=='link'}{router page='link'}go/{$oTopic->getId()}/{else}{$oTopic->getUrl()}{/if}" rel="nofollow" target="_blank"><img src="{cfg name='path.root.web'}/images/bookmarks/facebook.gif" title="Добавить заметку в Facebook"></a>
</li>

5 комментариев

avatar
По коду вродь все норм. Единственное, добавьте расстояния между иконками соц сетей.

Вы сброс параметров делали?
avatar
сейчас сделал сброс и все стало ок, спасибо!
avatar
в style.css прописал
.topic .voting li.shares {margin-left:43%;padding-top:5px;padding-right:1px;margin-right:1px;} 

и теперь когда я залогинен все ок
вот так

а когда разлогинен так:
avatar
все ясно,43 процента много.сделал 40 -теперь нормально.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.