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 matheusmacias
      Alguém sabe resolver isso?

    • Por fabioseco
      Ola pessoal, meu dw cs6 não tem as tags de css flexbox.
      Alguém sabe como adiciona-las no dw cs6???
    • Por Solo
      Boa noite  pessoal, estou com um problema, sou iniciante me php e estou em duvida com como posso fazer uma paginacao de produtos do banco de dados...... alguem poderia me ajudar ou me indicar um tutorial ???
       
      <?php
      error_reporting(0);
      ini_set(“display_errors”, 0 );
      require_once("conexao.php"); 
         $produtos = "SELECT produto_ID, nome_produto, imagem_produto, valor ";
          $produtos .= "FROM produto ";
          $resultado = mysqli_query($conecta, $produtos);
          if(!$resultado) {
              die("Falha na consulta ao banco");   
          }
      ?> 
       
       
       
      AONDE LISTA OS PRODUTOS 
       
       
       
          <div class="rowproducts">
          <div id="listagem_produtos2" class="">
            <?php while($linha=mysqli_fetch_assoc($resultado)) {   ?>
                       
                      <ul>
                          <div class="class22">
                          
                          <li>
                              
                              <img  class="img-responsive"  height="200" width="200" src="<?php echo $linha["imagem_produto"]?> "  >
                              </li>
                              
                              <li class="nproduto"><?php echo $linha["nome_produto"]?></li>
                               <li class="nproduto">R$ <?php echo $linha["valor"]?></li>
                          </div>
                          </ul>
                          
                          
                          
                          
                          
                          
                          
                      
                  <?php } ?>
                      
                      
                      
                    </div>
                    </div>
       
       
       
       
    • Por lindomar55
      ola amigos preciso de uma ajudinha, estou montando uma aplicaçao usando vb.net windows forms. nela tenho um botao onde chamo uma url no chrome com o seguinte comando.
      Private Sub Btn_abrir_site_Click(sender As Object, e As EventArgs) Handles Btn_abrir_site.Click
              Dim url As String = “https://www.rico.com.você/dashboard/tesouro-direto/“
              Process.Start(url)
          End Sub
      no google entao eu acesso com meu logim manualmente(prefiro assim). e em realizo uma serie de operaçoes, chega um determinado momento que preciso passar passar os dados que o site me apresenta entao(apos as operaçoes) para o aplicativo. ai é que esta o problema. neste ponto estou boiando.
      no codigo abaixo por exemplo: precisava obter os valores 12,36 e 8806,84 de forma automatica e colocar em textbox.
      vi exemplos na net que mostram com webbrowser porem eu prefiro que seja com o chrome. e nesses exemplos ele abre a pagina e ja obtem os dados. eu preciso trabalhar na pagina muiiiito e so depois baixar os dados programaticamente.
      qualquer ajuda sera bem vinda....
       

×

Informação importante

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