[Помогите] Соц. иконки в шапке сайта. Hover

SkyLine · 26 дек 2012

1. Помогите реализовать hover на соц. иконках в шапке сайта.
на данный момент у меня дело обстоит так

2. Помогите сделать по аналогии сайта http://www.conceptclub.ru/
3. Мой код в шапке

Спойлер

<div id="follow">
<style>
table.follow_table td {
padding: 0 3px;
}
</style>
<div style="top:5px;">
<table cellpadding="0" cellspacing="0" border="0" class="follow_table">
<tr valign="top">
<td>
<a href="sample.html">
<img src="/image/data/vk.jpg" width="18" height="18" alt="Вконтакте" title="Вконтакте"></a>
</div>
</td>
<td>
<a href="sample.html">
<img src="/image/data/facebook.jpg" width="18" height="18" alt="Facebook" title="Facebook"></a>
</td>
<td>
<a href="sample.html">
<img src="/image/data/twitter.jpg" width="18" height="18" alt="Twitter" title="Twitter"></a>
</td>
<td><a href="sample.html">
<img src="/image/data/g+.jpg" width="18" height="18" alt="Google+" title="Google+"></a>
</td>
</tr>
</table>
</div>
</div>

4. Мой Css

Спойлер

#header #follow /* соц.сети */
{
position:absolute;
top:72px;
left:254px;
}

5. На сайте http://www.conceptclub.ru/ реализовано через спрайты
6. Добился максимум того, что видна плавная смена картинки, но ни как не получается сделать так же как на вышеуказанном сайте. Копировал весь код (html и css) с сайта и картинку и пытался вставить себе на сайт но не получилось. (перепробовал многие уроки из инета - не помогло)
Просьба помочь.

v@dim · 26 дек 2012

Ты не так все начал. Реализация как там по моему спрайты называется. то есть одна картинка вот такая, и background-position для каждого дива и ховера. Понимаешь? и происходит какбы не подмена картинки а меняется позицыя фона. И зачем ты таблицами начал делать? Прошлый век). Там же списками все. В общем примерно объяснил. Если хочешь сам освоить гугли css спрайты, если не получится пиши.

--- добавлено: 26 дек 2012 в 19:34 ---
А тебе плавная смена нужна?

SkyLine · 26 дек 2012

vadik21 сказал(а): ↑

Ты не так все начал. Реализация как там по моему спрайты называется. то есть одна картинка вот такая, и background-position для каждого дива и ховера. Понимаешь? и происходит какбы не подмена картинки а меняется позицыя фона. И зачем ты таблицами начал делать? Прошлый век). Там же списками все. В общем примерно объяснил. Если хочешь сам освоить гугли css спрайты, если не получится пиши.

Нажмите, чтобы раскрыть...

ды я знаю что спрайты через позиции работает. я пробовал на 2х картинка допустим верхний твиттер. допустим картинка 0 0 а ховер 0 -40. а когда наводишь мышку то идет плавный переход с верхней на нижнею. хочу что бы не был виден этот переезд. хочется как на том сайте навел мышку одна картинку, убрал ОП другая)
а как можно сделать картинки по горизонтали с одинаковым расстоянием между ними (без таблиц, многие реализуют через таблицы). стырил код у артемия лебедева)))

v@dim · 26 дек 2012

Про переход странно. Ща сделаю выложу. А картинки, лично я такие дела люблю в иллюстраторе делать... Вариантов много, но самый понятный и простой это выстроить в ряд твои картинки и нарисовать например квадратик нужной тебе шириной (отступа) и по ним ориентировать картинки

SkyLine · 26 дек 2012

vadik21 сказал(а): ↑

Про переход странно. Ща сделаю выложу. А картинки, лично я такие дела люблю в иллюстраторе делать... Вариантов много, но самый понятный и простой это выстроить в ряд твои картинки и нарисовать например квадратик нужной тебе шириной (отступа) и по ним ориентировать картинки
Нажмите, чтобы раскрыть...

вот и мне странно. по урокам в инете должно все быть нормально но у меня ни как не получается. как то весь день психовал а потом забил. щас опять вернулся к этому вопросу.
я уже писал в какой то теме но свою не создавал, ответа не получил теперь создал. в люстре умею работать.
перепробовал много вариантов но не получилось сделать. если выложишь рабочий код (html и css) который у тебя сработал то буду очень признателен

v@dim · 27 дек 2012

Вот рабочий код и картинка:
[IMG]

Может немного гдето накривил, просто неохото с картинкой возится...

Спойлер

Код:

<style>
	#social{
width:188px;
height:90px;
margin:0px 0px 40px 0px;
padding: 0px;
}
 
#social .social_header {
margin-bottom: 10px;
}
 
#social a.facebook {
display:block;
float:left;
height:18px;
width:19px;
margin:0px;
text-indent:-9999px;
background-image:url('socicons/icons.png');
background-position:-64px 0;
}
 
#social a:hover.facebook {
background-image:url('socicons/icons.png');
background-position:-42px 0px;
}
 
#social a.twitter {
display:block;
float:left;
height:18px;
width:19px;
margin-left:2px;
text-indent:-9999px;
background-image:url('socicons/icons.png');
background-position:-152px 0;
}
 
#social a:hover.twitter {
background-image:url('socicons/icons.png');
background-position:-130px 0px;
}
 
#social a.youtube{
display:block;
float:left;
height:18px;
width:19px;
margin-left:2px;
text-indent:-9999px;
background-image:url('socicons/icons.png');
background-position:-21px 0;
}
 
#social a:hover.youtube {
background-image:url('socicons/icons.png');
background-position: 0px 0px;
}
 
#social a.vk{
display:block;
float:left;
height:18px;
width:19px;
margin-left:2px;
text-indent:-9999px;
background-image:url('socicons/icons.png');
background-position:-108px 0px;
}
 
#social a:hover.vk {
background-image:url('socicons/icons.png');
background-position:-86px 0px;
}
</style>
 
<div id="social">
<div><a class="facebook" href="http://facebook.com/">Facebook</a></div>
<div><a class="twitter" href="http://twitter.com/">Twitter</a></div>
<div><a class="vk" href="http://vk.com/">Vk.com</a></div>
<div><a class="youtube" href="http://youtube.com/">YouTube</a></div>
</div>

SkyLine · 27 дек 2012

Посмотрите пожалуйста скрин. Я не могу понять почему так происходит, что горизонтально что вертикально. Уже голову всю сломал. Может это связано с тем, что шаблон у меня нестандартный. По умолчанию в шаблоне в футере были вшиты соц. иконки и они имели такой "эффект" переезда изображения.
Огромное спасибо за помощь.

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

то что было вшито в шаблон в футере >

v@dim · 27 дек 2012

Посмотреть бы?

SkyLine · 28 дек 2012

ответ разработчика шаблона
This code is not mine and did not come with my theme, but to disable
the hover effect remove the "hover" rules you have in your
stylesheet.css file.
For example:

#social a:hover.facebook {
background-image: url('/image/data/icons.png');
background-position: -42px 0px;
}

You can see those clearly with Firebug!
Good luck!

------
я же говорил он странный какой то.

v@dim · 28 дек 2012

Похоже просто не он делал)))

SkyLine · 28 дек 2012

vadik21 сказал(а): ↑

Похоже просто не он делал)))
Нажмите, чтобы раскрыть...

все получилось. он просто ни как не мог меня понять. что мне было нужно. спасибо гуглу переводчику.
когда он понял что нужно убрать анимацию то предложил вот такой вариант.
transition: 0;
-webkit-transition: 0;
-moz-transition: 0;
я добавил к каждой иконке и все заработало так как надо.
Вам отдельное спасибо за помощь!

v@dim · 28 дек 2012

Да, я никогда не пользовался этим св-ом, действительно именно оно добавляет плавные переходы прозрачности и движения... теперь буду знать. Спасибо!