Jump to content

RodrigoRitta

Members
  • Content count

    4
  • Joined

  • Last visited

Everything posted by RodrigoRitta

  1. RodrigoRitta

    Como fazer o texto sair da vertical

    Olá pessoal, Passei praticamente o dia inteiro hoje tentando resolver um bug em um código e não consegui. Encontrei muita coisa na net e aqui no fórum também, mas nada me ajudou a solucionar. Eu quero colocar no meu blogspot um menu das redes sociais, só que ele é um código com animação, quando o mouse é colocado em cima do ícone da rede social expande um texto com o respectivo nome, e logo assim que o mouse sai de cima o texto some e fica apena o ícone da rede social. O código funciona perfeitamente no simulador de HTML, só que quando tento implementar no blog o texto que deveria aparecer na horizontal fica na vertical, e deslocado, e os ícones das redes sociais não são exibidos. Eu consegui separar a parte de css certinho da parte HTML e colocar cada uma em seus respectivo lugar (PELO MENOS ACREDITO NISSO), só o que tá pegando mesmo são esses detalhes, o resto tá tudo funcionando bem, e o mais estranho: isso só ocorre quando passa pro blog, no simulador tá perfeito. Estou anexando aqui uma imagem que mostra melhor o que falei. Se alguém puder ajudar serei extremamente grato. Se já tiver algo aqui no fórum a respeito peço desculpas, mas não encontrei, e peço que apontem aqui pra mim. Desde já agradeço muito.
  2. RodrigoRitta

    Como fazer o texto sair da vertical

    Olá Lifed, agradeço muito o interesse e a sugestão, mas não funcionou amigo, veja o print. Testei de todas as formas possíveis e apenas consegui deixar as caixas uma ao lado da outra, mas não é isso que eu quero, quero que elas continuem como estão uma abaixo da outra e preciso que o nome da rede social deixe de aparecer na vertical e apareça na horizontal. E os ícones das redes sociais ainda não estão aparecendo.... Pode ser que eu tenha feito algo errado, se foi isso me desculpe e me diga o local exato onde devo inserir o código. lembrando que no simulador de HTML ele tá rodando redondinho, o problema é quando cai na plataforma blogspot. Obrigado amigo.
  3. RodrigoRitta

    Como fazer o texto sair da vertical

    <style type='text/css'>@import url(http://weloveiconfonts.com/api/?family=entypo); [class*="entypo-"]:before { font-family: 'entypo', sans-serif; } /* ---------- GENERAL ---------- */ #social-sidebar a { text-decoration: none; } #social-sidebar ul { list-style: none; margin: 0; padding: 0; } /* ---------- Social Sidebar ---------- */ #social-sidebar { left: 0; margin-top: -75px; /* (li * a:width) / -2 */ position: fixed; top: 50%; } #social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; } #social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; } #social-sidebar ul li a { background: #121212; color: #fff; display: block; height: 50px; font-size: 18px; line-height: 50px; position: relative; text-align: center; width: 50px; } #social-sidebar ul li a:hover span { left: 130%; opacity: 1; } #social-sidebar ul li a span { border-radius: 3px; line-height: 24px; left: -100%; margin-top: -16px; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; padding: 4px 8px; position: absolute; -webkit-transition: opacity .3s, left .4s; -moz-transition: opacity .3s, left .4s; -ms-transition: opacity .3s, left .4s; -o-transition: opacity .3s, left .4s; transition: opacity .3s, left .4s; top: 50%; z-index: -1; } #social-sidebar ul li a span:before { content: ""; display: block; height: 8px; left: -4px; margin-top: -4px; position: absolute; top: 50%; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); width: 8px; z-index: -2; } #social-sidebar ul li a[class*="twitter"]:hover, #social-sidebar ul li a[class*="twitter"] span, #social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; } #social-sidebar ul li a[class*="gplus"]:hover, #social-sidebar ul li a[class*="gplus"] span, #social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; } #social-sidebar ul li a[class*="facebook"]:hover, #social-sidebar ul li a[class*="facebook"] span, #social-sidebar ul li a[class*="facebook"] span:before { background: #234999; } #social-sidebar ul li a[class*="rss"]:hover, #social-sidebar ul li a[class*="rss"] span, #social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; } </style><br /><div id='social-sidebar'> <ul> <li><br /><a class='entypo-twitter' href='https://twitter.com/' target='_blank'><br /><span>Twitter</span><br /></a><br /></li> <li><br /><a class='entypo-gplus' href='https://plus.google.com/' target='_blank'><br /><span>Google+</span><br /></a><br /></li> <li><br /><a class='entypo-facebook' href='https://www.facebook.coml' target='_blank'><br /><span>Facebook</span><br /></a><br /></li> <li><br /><a class='entypo-rss' href='http://feeds.feedburner.com/' target='_blank'><br /><span>Feedburner</span><br /></a><br /></li> </ul> </div>
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.