Forma das redes sociais

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Forma das redes sociais

Mensagem por Rivas™ em 24/01/12, 08:20 pm

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
avatar

Rivas™
Usuário destaque

Masculino
Inscrito dia : 31/05/2010
Mensagens : 901
Pontos Ativos : 1438

Ver perfil do usuário

Resolvido Re: Forma das redes sociais

Mensagem por Convidad em 25/01/12, 12:02 am

Olá,

Vá em:
Painel de controle Seta curta Visualização Seta curta Cores Seta curta "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

Convidad
Convidado


Resolvido Re: Forma das redes sociais

Mensagem por Rivas™ em 25/01/12, 04:26 pm

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

Rivas™
Usuário destaque

Masculino
Inscrito dia : 31/05/2010
Mensagens : 901
Pontos Ativos : 1438

Ver perfil do usuário

Resolvido Re: Forma das redes sociais

Mensagem por Convidad em 25/01/12, 10:17 pm

Boa noite,

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

Obrigado,
Até mais. Piscada

Convidad
Convidado


Resolvido Re: Forma das redes sociais

Mensagem por Rivas™ em 26/01/12, 06:17 pm

Ja enviei
avatar

Rivas™
Usuário destaque

Masculino
Inscrito dia : 31/05/2010
Mensagens : 901
Pontos Ativos : 1438

Ver perfil do usuário

Resolvido Re: Forma das redes sociais

Mensagem por Rivas™ em 26/01/12, 07:43 pm

Aqui tá 1 exemplo:

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

Veja os icons das redes sociais ...
avatar

Rivas™
Usuário destaque

Masculino
Inscrito dia : 31/05/2010
Mensagens : 901
Pontos Ativos : 1438

Ver perfil do usuário

Resolvido Re: Forma das redes sociais

Mensagem por MateusV. em 26/01/12, 07:56 pm

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

MateusV.
Principal contribuidor
Principal contribuidor

Inscrito dia : 30/10/2011
Mensagens : 7017
Pontos Ativos : 9289

Ver perfil do usuário http://mateusv.site11.com/gerador2.html

Resolvido Re: Forma das redes sociais

Mensagem por Rivas™ em 26/01/12, 08:39 pm

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

Rivas™
Usuário destaque

Masculino
Inscrito dia : 31/05/2010
Mensagens : 901
Pontos Ativos : 1438

Ver perfil do usuário

Resolvido Re: Forma das redes sociais

Mensagem por cyllaz em 04/02/12, 08:31 am

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 ^^

cyllaz
Usuário destaque

Masculino
Inscrito dia : 28/11/2009
Mensagens : 890
Pontos Ativos : 1258

Ver perfil do usuário http://sparquitetura.livreforum.com/

Resolvido Re: Forma das redes sociais

Mensagem por cyllaz em 06/02/12, 01:30 am

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

cyllaz
Usuário destaque

Masculino
Inscrito dia : 28/11/2009
Mensagens : 890
Pontos Ativos : 1258

Ver perfil do usuário http://sparquitetura.livreforum.com/

Resolvido Re: Forma das redes sociais

Mensagem por cyllaz em 06/02/12, 05:48 pm

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...

cyllaz
Usuário destaque

Masculino
Inscrito dia : 28/11/2009
Mensagens : 890
Pontos Ativos : 1258

Ver perfil do usuário http://sparquitetura.livreforum.com/

Resolvido Re: Forma das redes sociais

Mensagem por Luciano98 em 07/02/12, 02:09 am

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.
avatar

Luciano98
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 01/09/2010
Mensagens : 7648
Pontos Ativos : 11045

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Forma das redes sociais

Mensagem por cyllaz em 07/02/12, 12:46 pm

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


Última edição por uzumaki minato em 07/02/12, 05:16 pm, editado 1 vez(es)

cyllaz
Usuário destaque

Masculino
Inscrito dia : 28/11/2009
Mensagens : 890
Pontos Ativos : 1258

Ver perfil do usuário http://sparquitetura.livreforum.com/

Resolvido Re: Forma das redes sociais

Mensagem por Luciano98 em 07/02/12, 01:56 pm

[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
avatar

Luciano98
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 01/09/2010
Mensagens : 7648
Pontos Ativos : 11045

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Forma das redes sociais

Mensagem por Rivas™ em 07/02/12, 07:09 pm

O meu tá perfeito podem conferir:

www.forum-frito.forumeiros.com

Piscada


Resolvido !
avatar

Rivas™
Usuário destaque

Masculino
Inscrito dia : 31/05/2010
Mensagens : 901
Pontos Ativos : 1438

Ver perfil do usuário

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum