Forma das redes sociais

por Rivas™ em Ter 24 Jan 2012 - 19:20

Qual é minha questão:
Olá fiz mais ou menos um exemplo da imagem que postei, queria por os icons das Redes Sociais atrás da barra do Menu de Navegação mas escondidos(metade), depois quando passava-se com o mouse em cima os icons das Redes Sociais subiam, isso ja vi em sites, mas agora em Forumeiros nunca..

Queria saber se e possivel.

Medidas que eu tomei para corrigir o problema:
Nenhuma.

Imagens do meu problema:

Endereço do meu fórum:
www.forum-firto.forumeiros.com

Versão do meu fórum:
PHPBB3

por **Robe!** em Ter 24 Jan 2012 - 23:02

Olá,

Vá em:
Painel de controle Seta curta

Visualização Seta curta

Cores

"Aba" Folha CSS.

Adicione no conteúdo:

Código:: #bookmarks{float:left!important;left: -56px!important; position: relative;}

Caso necessário modifique o valor: "56" que se encontra no código.
Se não funcionar, coloque aqui o conteúdo de sua folha CSS.

Até mais. Piscada

por Rivas™ em Qua 25 Jan 2012 - 15:26

Nao resultou nem apareceu anda os icons das redes sociais nao fizeram o que queria.

por **Robe!** em Qua 25 Jan 2012 - 21:17

Boa noite,

Poderia me mandar o conteúdo de sua folha CSS (na íntegra) ?

Obrigado,
Até mais. Piscada

por Rivas™ em Qui 26 Jan 2012 - 17:17

Ja enviei

por Rivas™ em Qui 26 Jan 2012 - 18:43

Aqui tá 1 exemplo:

http://www.ngt-gaming.org/

Veja os icons das redes sociais ...

por **Invisible** em Qui 26 Jan 2012 - 18:56

Olá, você quer os icones atraz do menu certo? poderia me enviar o codigo que usa para colocar esses icones?

por Rivas™ em Qui 26 Jan 2012 - 19:39

Sim queria por atras mas quando passar com o Mouse em cima deles eles levantassem

por cyllaz em Sab 4 Fev 2012 - 7:31

caraca, deu até dó de seus UPs hauahuhhahuah
vocÊ é persistente ^^

olha o codigo em estrutura que você quer acredito ser este...
falta adicionar sua imagens, e o efeito acredito que deva ser com Script, mas não tenho certeza...

vou ver o que eu consigo fazer com esse código...

Código:: <div style="float:left; width:496px; padding-left:4px;"><a href="http://www.esl.eu/pt/team/6042633/"><img src="img/social/esl.png" width="34" height="28" style="padding-right:3px;" onmouseover="this.src='img/social/esl_hv.png';" onmouseout="this.src='img/social/esl.png';"></a><a href="http://www.facebook.com/pages/nGt-Gaming/201807806529536"><img src="img/social/face.png" width="34" height="28" style="padding-right:3px;" onmouseover="this.src='img/social/face_hv.png';" onmouseout="this.src='img/social/face.png';"></a><a href="mailto:geral@ngt-gaming.org"><img src="img/social/mail.png" width="34" height="28" style="padding-right:3px;" onmouseover="this.src='img/social/mail_hv.png';" onmouseout="this.src='img/social/mail.png';"></a><a href="http://ngt-gaming.org/tmp/rss.xml"><img src="img/social/rss.png" width="34" height="28" style="padding-right:3px;" onmouseover="this.src='img/social/rss_hv.png';" onmouseout="this.src='img/social/rss.png';"></a><a href="http://steamcommunity.com/groups/nGtGaming"><img src="img/social/steam.png" width="34" height="28" style="padding-right:3px;" onmouseover="this.src='img/social/steam_hv.png';" onmouseout="this.src='img/social/steam.png';"></a><a href="http://twitter.com/#!/ngtgaming"><img src="img/social/twitt.png" width="34" height="28" style="padding-right:3px;" onmouseover="this.src='img/social/twitt_hv.png';" onmouseout="this.src='img/social/twitt.png';"></a><a href="http://www.youtube.com/user/nGtGamingTV"><img src="img/social/youtub.png" width="34" height="28" style="padding-right:3px;" onmouseover="this.src='img/social/youtub_hv.png';" onmouseout="this.src='img/social/youtub.png';"></a><a href="http://webchat.quakenet.org/#nGt-gaming"><img src="img/social/mirc.png" width="34" height="28" style="padding-right:3px;" onmouseover="this.src='img/social/mirc_hv.png';" onmouseout="this.src='img/social/mirc.png';"></a></div>

Edit:
dei uma estudada no efeito deste site e ja intendo o esquema que o cara usa, ele usa um esquema que troca as imagem em hover, de uma imagem menor para uma imagens maior, o que faz parecer que ele esta saindo de trás, mas é só uma ilusão muito criativa ^^

por cyllaz em Seg 6 Fev 2012 - 0:30

é só colocar as imagens amigo, e usar um CSS que amanha eu te passo ^^
to com sono agora ^^

por cyllaz em Seg 6 Fev 2012 - 16:48

Desculpem o post duplo, mas estou tentando ajudar...

O codigo é esse...

Código:: /*-----faceboock----*/#id-imagem {width: 60px;height: 60px; background-image: url('link-imagem'); background-repeat: no-repeat;} #id-imagem:hover {width: 60px;height: 60px; background-image: url('link-imagem'); background-repeat: no-repeat;}

se precisar de ajuda é só avisar...

por **Luciano98** em Ter 7 Fev 2012 - 1:09

Olá!

Substitua o código HTML das redes sociais por esse:

Código:: <style>#page-header .navbar ul.linklist.navlinks{z-index:1}#redesociais{position:absolute;top:250px;right:55px}#redesociais a:hover{position:relative;top:-25px}</style><div id="redesociais"><a href="http://www.facebook.com/pages/Forum-Fritoforumeiroscom/270579949633697" target="_blank"><img src="http://cdn4.iconfinder.com/data/icons/inside/PNG/128x128/icontexto-inside-facebook.png" height="37" width="37"></a><a href="http://twitter.com/#%21/ForumFrito" target="_blank"><img src="http://cdn4.iconfinder.com/data/icons/inside/PNG/128x128/icontexto-inside-twitter.png" height="38" width="38"></a><a href="http://www.youtube.com/user/forumfrito?feature=mhee" target="_blank"><img src="http://cdn4.iconfinder.com/data/icons/inside/PNG/128x128/icontexto-inside-youtube.png" height="36" width="36"></a><a href="http://humor-frito.blogspot.com/" target="_blank"><img src="http://i72.servimg.com/u/f72/13/72/85/95/blogge10.gif" height="37" width="37"></a></div>

Até mais.

por cyllaz em Ter 7 Fev 2012 - 11:46

Muito bom Luciano ^^
mas esse código esta bugando...
fica tremendo e não estático...

por **Luciano98** em Ter 7 Fev 2012 - 12:56

[quote="uzumaki minato escreveu:Muito com Luciano ^^
mas esse código esta bugando...
fica tremendo e não estático...

Aqui fica normal. Vamos esperar a resposta do autor Piscada

por Rivas™ em Ter 7 Fev 2012 - 18:09

O meu tá perfeito podem conferir:

www.forum-frito.forumeiros.com

Piscada

Resolvido !

Forma das redes sociais

Forma das redes sociais

Re: Forma das redes sociais

Re: Forma das redes sociais

Re: Forma das redes sociais

Re: Forma das redes sociais

Re: Forma das redes sociais

Re: Forma das redes sociais

Re: Forma das redes sociais

Re: Forma das redes sociais

Re: Forma das redes sociais

Re: Forma das redes sociais

Re: Forma das redes sociais

Re: Forma das redes sociais

Re: Forma das redes sociais

Re: Forma das redes sociais