Ir para conteúdo
RodrigoRitta

Como fazer o texto sair da vertical

Recommended Posts

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.

777777777777.jpg

Compartilhar este post


Link para o post
Compartilhar em outros sites
<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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Sem título1010.jpg

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Luiz Fernando 111
      Caros amigos, estou tentando adicionar soma entre inputs do html e do javascript, mas com esse exemplo, apenas consegui colocar no input do html. Como faço para implementar no input do javascript e somar o valor junto com o Valor Total mostrar lucro quando foi debito e prejuizo quando for crédito ? Alguém poderia me dá help !!!
       
       

    • Por allancisneiro
      pessoal boa tarde, estou construindo um arquivo HTML, porém estou com um problema de alinhamento do texto apartir do segundo<H1>.  já tentei  usar o comando align:"left". mas não funcionu.
      quem puder ajudar agradeço. a ideia é alinhar tudo à esquerda
       
      este arquivo contém este código-fonte:
       
      <!DOCTYPE html>
      <html>
      <head>
      <title>Título da página</title>
      <meta charset="utf-8"/>
      </head>
      <body>
      <h1>Lista não ordenada</h1>
      <ul>
      <li>LIVERPOOL</li>
      <li>CHELSEA</li>
      <li>MANCHESTER CITY</li>
      <li>MANCHESTER UNITED</li>
      <li>ARSENAL</li>
      <li>TOTTENHAM</li>

      <h1 align="left">Lista ordenada</h1>
      <OL>
      <li>LIVERPOOL</li>
      <li>CHELSEA</li>
      <li>MANCHESTER CITY</li>
      <li>MANCHESTER UNITED</li>
      <li>ARSENAL</li>
      <li>TOTTENHAM</li>

      </OL>
          
      </body>
      </html>

    • Por Robson Augusto
      Galera se alguém souber o que ocorre,  é o seguinte, não acredito que possa ser Problema de SEO, mas vamos lá meu site anuncicarbh.com, não aparece em pesquisa feitas pelo computador, com a palavra chave "seminovos bh", ele aparece na primeira oscilando para segunda pagina do bing e yahoo, fazendo a pesquisa pelo telefone, ja no pc ele nao aparace mais no yahoo, mas continua a aparecer no bing, ja no google ele teve pequenas aparições na terceira página, agora em ambas as pesquisas de pc e celular ja não aparece mais no google... So aparece atualmente no google, pesquisando pelo nome do site... Alguem saberia me dizer o por que disso? será SEO?
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.