Jump to content
  • 0

Кнопки в шапке Wordpress


Моя Кровь
 Share

Question

Всех приветствую!!!

Вот уже парюсь не первый день...

screen9.jpg

Как мне сделать меленькие красивые кнопочки в ряд,так,как показан на рисунке,что бы этот ряд был прикреплен в правой или в левой стороне,без разницы???и без промежутка от картинки логотипа.

И пожалуйста,напишите сам код.

Заранее спасибо.

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

Хоть ссылку бы дали на то, что у вас получается. Нужно смотреть весь код, ведь очевидно, что если у человека в примере это работает, а у вас - нет, значит влияет ещё какой-то код с вашей стороны...

Link to comment
Share on other sites

  • 0

Хоть ссылку бы дали на то, что у вас получается. Нужно смотреть весь код, ведь очевидно, что если у человека в примере это работает, а у вас - нет, значит влияет ещё какой-то код с вашей стороны...

Ну вот,я все таки сделал по выше указанной рекомендации http://darkhill.ru взгляните.

Но вот только как теперь сделать что бы они прижимались к картинке логотипа??

Link to comment
Share on other sites

  • 0

Вставляем под <hgroup>



<ul class="social_icons">
<li>
<a href="https://plus.google.com/u/0/b/113849177854176102811">
<img src="http://darkhill.ru/wp-content/themes/twentyeleven/google_plus.png" alt="" />
</a>
</li>
<li>
<div id="___plusone_0" style="height: 15px; width: 24px; display: inline-block; text-indent: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; background-attachment: scroll; background-repeat: repeat; background-image: none; background-position: 0% 0%; background-size: auto; background-origin: padding-box; background-clip: border-box; background-color: transparent; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline">
<iframe allowtransparency="true" frameborder="0" hspace="0" id="I1_1330265771869" marginheight="0" marginwidth="0" name="I1_1330265771869" scrolling="no" src="https://plusone.google.com/_/+1/fastbutton?url=http%3A%2F%2Fdarkhill.ru%2F&size=small&count=true&annotation=none&hl=ru&jsh=m%3B%2F_%2Fapps-static%2F_%2Fjs%2Fgapi%2F__features__%2Frt%3Dj%2Fver%3DqpAaYv4Gceo.en.%2Fsv%3D1%2Fam%3D!4ArSr93f4LuIjcmMGw%2Fd%3D1%2F#id=I1_1330265771869&parent=http%3A%2F%2Fdarkhill.ru&rpctoken=887739263&_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart" style="width: 24px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; position: static; left: 0px; top: 0px; visibility: visible; height: 15px" tabindex="-1" vspace="0" width="100%" title="+1"></iframe>
</div>
<script type="text/javascript">
window.___gcfg = {lang: 'ru'};

(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</li>
<li>
<a href="http://vk.com/darkhill_ru">
<img src="http://darkhill.ru//wp-content/themes/twentyeleven/vkontakte.png" alt="" />
</a>
</li>
</ul

css



.social_icons {
position: absolute;
right: 0;
list-style: none;
}
.social_icons li {
float: left;
margin-left: 5px;
}

иконки прыгают из-за свойства branging img {margin-bottom: -7px;} уберите его.

Link to comment
Share on other sites

  • 0

Вставляем под <hgroup>



<ul class="social_icons">
<li>
<a href="https://plus.google.com/u/0/b/113849177854176102811">
<img src="http://darkhill.ru/wp-content/themes/twentyeleven/google_plus.png" alt="" />
</a>
</li>
<li>
<div id="___plusone_0" style="height: 15px; width: 24px; display: inline-block; text-indent: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; background-attachment: scroll; background-repeat: repeat; background-image: none; background-position: 0% 0%; background-size: auto; background-origin: padding-box; background-clip: border-box; background-color: transparent; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline">
<iframe allowtransparency="true" frameborder="0" hspace="0" id="I1_1330265771869" marginheight="0" marginwidth="0" name="I1_1330265771869" scrolling="no" src="https://plusone.google.com/_/+1/fastbutton?url=http%3A%2F%2Fdarkhill.ru%2F&size=small&count=true&annotation=none&hl=ru&jsh=m%3B%2F_%2Fapps-static%2F_%2Fjs%2Fgapi%2F__features__%2Frt%3Dj%2Fver%3DqpAaYv4Gceo.en.%2Fsv%3D1%2Fam%3D!4ArSr93f4LuIjcmMGw%2Fd%3D1%2F#id=I1_1330265771869&parent=http%3A%2F%2Fdarkhill.ru&rpctoken=887739263&_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart" style="width: 24px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; position: static; left: 0px; top: 0px; visibility: visible; height: 15px" tabindex="-1" vspace="0" width="100%" title="+1"></iframe>
</div>
<script type="text/javascript">
window.___gcfg = {lang: 'ru'};

(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</li>
<li>
<a href="http://vk.com/darkhill_ru">
<img src="http://darkhill.ru//wp-content/themes/twentyeleven/vkontakte.png" alt="" />
</a>
</li>
</ul

css



.social_icons {
position: absolute;
right: 0;
list-style: none;
}
.social_icons li {
float: left;
margin-left: 5px;
}

иконки прыгают из-за свойства branging img {margin-bottom: -7px;} уберите его.

Зайди на сайт,посмотри что получилось.Это ужас.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy