кнопки соц сетей CSS3

Тема в разделе "CSS, HTML, Web 2.0, верстка по web-стандартам", создана пользователем Legostaev, 10.11.2013.

  1. Offline

    Legostaev Недавно здесь

    Регистрация:
    27.08.2013
    Сообщения:
    10
    Симпатии:
    0
    Пол:
    Мужской
    Здравствуйте добрые форумчане!)

    хочу посоветоваться с Вами правильно ли я все делаю и решить одну нубскую проблему.

    Итак, загорелся я разместить на своем сайте последний тренд сезона - кнопки соц сетей:)

    скачал нужные изображения подредактировал поместил в
    сайт/templates/название шаблона/images

    создал файл стилей css3buttons.css для кнопок и положил его в
    сайт/templates/название шаблона/css

    подключил созданый файл стилей к шаблону - в index.php прописал
    Код (html):
    1. <link href="<?php echo $template_baseurl; ?>/css/css3buttons.css" rel="stylesheet" media="all" type="text/css"/>


    в файле стилей пишу
    Код (CODE):
    1. .button_vk:hover { background-position: 0 -103px; }
    2. .button_vk:active { background-position: 0 -205px; }
    3. .button_vk { width: 96px; height: 96px; background: url('../images/vk_css.png') no-repeat 0 0; display: block; }
    4. .button_fb:hover { background-position: 0 -103px; }
    5. .button_fb:active { background-position: 0 -205px; }
    6. .button_fb { width: 96px; height: 96px; background: url('../images/fb_css.png') no-repeat 0 0; display: block; }
    7. .button_tw:hover { background-position: 0 -103px; }
    8. .button_tw:active { background-position: 0 -205px; }
    9. .button_tw { width: 96px; height: 96px; background: url('../images/tw_css.png') no-repeat 0 0; display: block; }
    10. .button_od:hover { background-position: 0 -103px; }
    11. .button_od:active { background-position: 0 -205px; }
    12. .button_od { width: 96px; height: 96px; background: url('../images/od_css.png') no-repeat 0 0; display: block; }


    затем стандартном HTML модуле пишу
    Код (html):
    1. <a class="button_vk" href="http://vk.com"> </a>
    2. <a class="button_fb" href="http://facebook.com"> </a>
    3. <a class="button_tw" href="http://twitter.com"> </a>
    4. <a class="button_od" href="http://odnoklassniki.ru"> </a>


    и получаю вот такую штуку
    4pHYMh4s.jpg

    как на Ваш взгляд, правильно ли я все делаю?

    и собственно вопрос - как поставить их в ряд и на середину страницы поместить? чтобы они всегда были посередине независимо от разрешения экрана

    заранее спасибо!!!:)
     
    Последнее редактирование: 10.11.2013
  2.  

Поделиться этой страницей

Загрузка...