Доброго времени суток уважаемые читатели блога wooden-stool.ru.
И так, очередная заметка из серии ‘апгрейд блога’. Сейчас стало модно размещать на шапку сайта различные кнопки социальных сообществ, какой либо текст и т.п, про это поговорить — как разместить текст и кнопки в шапке сайта с помощью CSS.
Как добавить кнопку twitter, google +1, вконтакте, логотип, текст и т.п в шапку сайта
Собственно нечего сложного тут нету. План действий такой — создаём некоторую область (в качестве примера это будет обычный div блок), после чего необходимо задать ему стиль с помощью каскадных таблиц стилей а-ля CSS. Давайте рассмотрим небольшой пример.
Пример размещения кнопки twitter и текста в шапке сайта
<head>
<style>
#headerdata {
position: absolute;
top: 5;
left: 50;
color: green;
font-size:90px; }
</style>
</head><body style="margin:0;">
<!-- шапка сайта -->
<div style="width: 100%; height: 250px;
background: url(http://wooden-stool.ru/wp-content/uploads/2012/04/seo-blog.jpg) no-repeat;">
</div><!-- кнопочка twitter -->
<div id='headerdata'>
<img src='http://wooden-stool.ru/wp-content/uploads/2011/12/twitter_icon.png'>
Текст в шапке
</div>
</body>
Теперь давайте разберём что мы с вами написали. Мы создали див и разместили туда картинку с помощью тега IMG, это может быть и код кнопки twitter — если работать в боевых условиях, после присвоили ему ID headerdata. Самому диву с помощью CSS присвоили позицию «absolute», что позволяет указывать его позицию с помощью свойств left, top, right и bottom, благодаря этому мы и сможем разместить кнопку twitter в шапку, да и любую другую кнопку и надпись. Есть правда пару нюансов, как например если шапка сайта находится в диве так же с позишн абсолют и свойством z-index равным 5. z-index позволяет размещать элементы поверх других, то есть нашему диву тогда придётся установить значение z-index равным 6, дабы он отображался поверх дива с шапкой, то есть чем больше значение тем выше располагается наш блок. Это как пример но в этом случае я бы действовал немного по другому. Собственно вот так и размещается seo текст, кнопка твитер и прочие кнопки социальных сообществ в шапке. Вы можете посмотреть пример- у меня на шапке есть 4 надписи «SEO блог», «Заработок», «Программирование» и «Блог сеошника» именно описанным выше методом я и разметил этот текст. Для чего это нужно думаю не надо объяснять 
Собственно на этом всё, как видите нечего сложного в размещении кнопки twitter в шапку нет. Удачи.
Ответов - 7 to “Как добавить кнопку twitter, текст и т.п в шапку сайта”
Как говорится, лучше один раз увидеть. Хороший наглядный пример для установки надписей и подписей. Но, думаю, код css более правильно разместить в отдельном css-файле. Как-то оно приятней будет. А по-сути — всё гуд.
Спасибо, помогло. Но устанавливал другие.
А ничего не поняла. Если это для новичков — слишком много терминов, а если для профи- так думаю им это уже неинтересно. Так для кого писали? Еще и капча. Не каждый будет ее капчить.
-
gloys Говорит:
25.04.2012 at 3:34 пп
-
Victka Говорит:
30.04.2012 at 4:33 пп
Извените но какие именно термины вам не понятны? Я и так всё время пишу как можно чётче и без лишней воды, незнаю что в этих 20 строк может быть непонятного. Напишите и я постораюсь написать попроще.
А мне стало реально интересно, какую именно капчу вы имеете ввиду. Если ту, что тут на блоге — одну циферку кликнуть, то тут нету ничего страшного даже для пользователей, которые не имеют большого стажа пользования сетью.
А по-моему все понятно даже новичкам. Спасибо
Отличная статья, я благодаря вашей статье в шапку интересные логотипчики добавил.