[Tourst]

Добрый день.
сутки уже ставлю комбинированные комментарии себе на сайт, от ВК,FB,WP.
Так вот.
Сделал,мне понравилось,но потом подумал что бы в место текстов отображалась иконка соц сети, через которую мы комментируем, нашел иконки красивые 64*64 и поставил их,
столкнулся с проблемой в css.Точнее не с проблемой, а не знанием CSS на нужном уровне.

Вот собственно код в ксс

Код HTML:

 ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 64px;
    border: 1px solid #999;
    width: 450px;}

ul.tabs li {
    float: left;
           width:192px;
    height: 64px;
    line-height: 64px;
    border: 1px solid #999;
    border-left: none;
    margin-bottom: -1px;
    overflow: hidden;
    position: relative;
    background: #e0e0e0;}

ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding-left: 50px;
    border: 1px solid #fff;
    outline: none;}

ul.tabs li a:hover {
    background: #ccc;}

html ul.tabs li.active, html ul.tabs li.active a:hover  {
    background: #fff;
    border-bottom: 1px solid #fff;}

.tab_container {
    border-top: none;
    overflow: hidden;
    clear: both;
    float: left; width: 500px; height: 500px;
    background: #fff;}

.tab_content {
padding: 20px; }

Хочу сделать что бы табы были размером с иконку, именно 64*64.
и были в ряд, ну в общем убрать лишнее.
Сколько не мучился не получилось.
Буду благодарен за помощь.

[Tourst]

[xexe]

Достаточно интересная идея, как сделаете будьте любезны напишите решение с кодом.

[Tourst]

xexe, _http://cospi.ru/kompaktnye-formy-kommentariev-na-sajt/
вот статья.думаю как добавить картинки или прописать еще один таб разберетесь

---------- Сообщение добавлено 17:42 ---------- Предыдущее 16:46 ----------

готово
это вставляем в комментсточкапхппредварит ельно все там удалив

Код HTML:

<center> <ul class="tabs"> <center><li><a href="#vk"><img src="http://icons.iconarchive.com/icons/creativenerds/black-white-social/64/vimeo-icon.png" ></a></li> <li><a href="#fb"><img src="http://icons.iconarchive.com/icons/creativenerds/black-white-social/64/facebook-icon.png" ></a></li> <li><a href="#wp"><img src="http://icons.iconarchive.com/icons/creativenerds/black-white-social/64/wordpress-icon.png" ></a></li><center/> </ul> <div class="tab_container"> <div id="vk" class="tab_content"> <div id="vk_comments"></div> <script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "496", attach: false});
</script> <script type="text/javascript" src="//vk.com/js/api/openapi.js?63"></script> <script type="text/javascript">
  VK.init({apiId: 3142952, onlyWidgets: true});
</script> </div> <div id="fb" class="tab_content"> <div class="fb-comments" data-href="<?php the_permalink(); ?>" data-num-posts="5" data-width="450"></div> </div> <div id="wp" class="tab_content">

uuuuu




  </div> </div> <center/>

это в ксс

Код HTML:

ul.tabs {
    margin: 0;
    padding: 0;
    float: center;
    list-style: none;
    height: 65px;
    border: px solid #999;
    width: 192px;}

ul.tabs li {
    float: left;
           width:64px;
    height: 64px;
    line-height: 64px;
    border: px solid #999;
    border-left: 64px;
    margin-bottom: 0px;
    overflow: hidden;
    position: relative;
    background: black;}

ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding-left: 0px;
    border: 0px solid #fff;
    outline: none;}

ul.tabs li a:hover {
    background: white;}

html ul.tabs li.active, html ul.tabs li.active a:hover  {
    background: #fff;
    border-bottom: px solid #fff;}

.tab_container {
    border-top: none;
    overflow: hidden;
    clear: both;
    float: left; width: 500px; height: 500px;
    background: #fff;}

.tab_content {
padding: 20px; }

[Tourst]

вот что получилось