Jump to content
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

Share this post


Link to post
Share on other 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>

 

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By JenneferBarbosa
      <label>Data Inicio</label> <input type="date" name="data_inicio-incluir" id="data_inicio-incluir"> <label>Data Fim</label> <input type="date" name="data_fim-incluir" id="data_fim-incluir"> Boa tarde pessoal, estou iniciando em JS e não sei como fazer a validação de datas. Estou fazendo um sistema de aluguel de livros, então,  como consigo verificar se a data_fim não é menor que a data inicio e que a data_fim seja de 1 até 7 dias depois da data_inicio, não podendo ultrapassar. Se alguém tiver como me ajudar, ficarei muito grata.  
    • By Leonardo Ortega
      Prezados, bom dia.
      sou novo por aqui, e me deparei com esta situação:
      estou desenvolvendo um projeto e tudo começou quando apenas mudei o banco de dados que estava conectado. Ou seja, se eu me conecto ao baco de dados anterior, volta todo código html, porém, se conecto ao banco de dados atual as divs desaparecem. 
       
      obs: Isso tb acontece quando eu desativo o php tudo volta como a imagem 1 e se eu ativo fica como a imagem2.
       
      quem pode me ajudar.. desde já muito obrigado.  


    • By thgsousa312
      uma função que recebe uma frase e uma palavra antiga e uma palavra nova. A função deve retornar uma string contendo a frase original, mas com a última ocorrência da palavra antiga substituída pela palavra nova. A entrada e saída de dados deve ser feita no programa principal. Exemplo:  
      Frase: “Quem parte e reparte fica com a maior parte”
      Palavra antiga: “parte”  Palavra nova: “parcela”
      Resultado a ser impresso no programa principal: “Quem parte e reparte fica com a maior parcela”
       
      function trocarNome(){
              
          var frase = document.getElementById("frase").value;
          var strAntiga = document.getElementById("strAntiga").value;
          var strNova = document.getElementById("strNova").value;
          //frase = frase.split(" ");
          var a = frase.lastIndexOf(strAntiga);
          var fras2 = frase.lastIndexOf(strAntiga).replace(strAntiga,strNova);
          document.getElementById("demo").innerHTML = "Certo";
      }
    • By Tuzzolino
      Boa tarde gente,
       
       
      Estou fazendo  um site  e  na hora que eu vou compartilhar ele no whatsapp  ele tá pegando o link corretamente mas ao invés de aparecer o titulo aparece somente o description  e não pega a miniatura da imagem  alguém tem algum exemplo de como  deveria ser ?
       
       
      A  imagem  é carregada assim 
       
      <amp-img height="320" width="470" id="img" src="890x610.jpg" layout="responsive" class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout" i-amphtml-layout="responsive"><i-amphtml-sizer style="padding-top: 68.0851%;"></i-amphtml-sizer><img decoding="async" amp-img-id="img" src="890x610.jpg" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img>  
    • By prometheusz
      Amigos bom dia, sou novo aqui
      Tenho a seguinte tabela  :
       
       
      gostaria de capturar os ids quando fosse clicado no botão pegar valor do codigo porem do jeito que fiz ele só captura o 88 nao importa qual mlinha eu clique ele so captura o numero 88
       
      codigo:

       
      <script> $(function () { $(document).on('click', '.btn-danger', function (e) { e.preventDefault; var codigo =document.getElementsByTagName('th')[5].innerHTML; alert(codigo) }); }); </script> <?php while ($dado = ibase_fetch_object($consulta_retorno)){ ?> <tr> <th data-title="ID"><?php echo ($dado->ID)?> </th> <td data-title="Nome"><?php echo utf8_encode($dado->NOME)?></td> <td data-title="DataCompra"><?php echo date("d/m/Y", strtotime($dado->DATACOMPRA))?></td> <td data-title="Email"><?php echo utf8_encode($dado->EMAIL)?></td> <td> <button class="btn-danger">Pegar Valor do Código</button></td> </tr> <?php }?>  
       
×

Important Information

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