Forma das redes sociais

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

Olá,

Vá em: Painel de controle Visualização 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.

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

Boa noite,

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

Obrigado,
Até mais.

Ja enviei

Aqui tá 1 exemplo:

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

Veja os icons das redes sociais ...

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

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

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

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

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

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.

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

[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

O meu tá perfeito podem conferir:

www.forum-frito.forumeiros.com




Resolvido !