colocando botões sociais na mesma linha

[Apenas Eu 13]

Ola!

Eu gostaria de algum tutorial que explique como faz isso. Sempre que tento fazer do meu jeito da bug. Eu queria lado a lado sem muito espaço entre um e o outro.

 

Eu vejo os sites por ai funcionando tudo direitinho mas o meu nunca fica igual. Deve ter um jeito correto pra isso. Eu faço um .class para cada um, usando o float...mas não funciona muito bem :)

 

Obrigado :)

[WilkerIceri 4]

Tente algo assim:

<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Youtube</li>
</ul>

ul {
list-style-type: none;
height: 100px;
}

ul li {
width: 100px;
height: 100px;
float: left;
}

 

Qual navegador você usa? Caso use o chrome utilize o inspeccioar elemento para verificar o que está dando errado ;)

[Apenas Eu 13]

owww. Brigado pela dica!

 

Então..até deu certo, mas o botao do facebook continua teimoso ¬¬.

 

Eu não estava conseguindo deixar na mesma linha mas dae eu troquei o cod. do face isso foi arrumado, no entanto, ele criou mó espação feio pra baixo.

 

E aquele coiso do Google Chrome eu num achei :(

 

Valeuuu pela dica...se você tiver mais alguma outra...tamos ae pra ouvir ;)

 

O html ficou assim ó:

<ul>
<li><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a></li>
<li><g:plusone annotation="inline" width="50"></g:plusone></li>
<li><div class="fb-like" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false"></div></li>
</ul>

 

Os javascript eu coloquei num arquivo separado...

[WilkerIceri 4]

Que isso, estamos ae para ajudar!

Sobre o inspeccionar elemento é só clicar com o botão direito na sua página que ele está la na última opção.

 

Sobre o espaço eu não sei o que é, mais coloca um border na ul e na li e ve o que está acontecendo, e outra dica é colocar um "clear: both;" no elemento que vem depois da ul, por exemplo:

<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Youtube</li>
</ul>
<div id="next" style="clear: both;"></div>

 

Isso para o flutuamento, isso evita do elemento que vem depois flutuar tambem ;)

[Apenas Eu 13]

ooo brigadaooo!!!

 

Bom fuçando ali e aqui eu descobri que o que estava dando o espação em baixo era a função "height 100px". Eu a removi do UL e LI e fico legal. Dae depois eu peguei o cód do site do facebook de novo, dae corrigiu todos os problemas. Agora ficou show. Bom...

Sobre o clear both, daria no mesmo eu colocar na div que coloquei para "guardar" os botoes né?! Dizem que não é apropriado fazer uma div como você citou....

 

Consegui achar o coiso la do Google...bem dahora aquilo la...

 

 

Muito obrigado novamente ;)

[WilkerIceri 4]

Sim, você tem sempre que medir os elementos direitinhos e colocar os width's e height's certos para não darem problemas.

Sobre o clear se a sua ul está dentro de uma div e depois da ul não tem um próximo elemento, não é necessário o clear.

Você fala eu escrever o css no modo inline utilizando a tag style?

 

Tem o firebug do firefox tambem, ajudam bastante quando tem esses probleminhas :D

[Apenas Eu 13]

é...depois dos botoes sociais eu coloquei um formulario de pesquisa....

 

Eu gostei muito da sua dica pq agora o formulario num fica saindo do lugar. Tipo na hora que abre a pagina ele ficava la no meio da linha e depois que abria os botoes ele ia pro local que deveria estar, no lado direito da tela. Agora ele fica no lugar certinho onde se deve ;)

[Kayan Ruiz 0]

Olá, sou novo no Fórum, achei legal o pessoal sempre ligado, um ajudando o outro, espero retribuir tambem.

 

Queria pedir o codigo desses botões de compartilhamento, eu adicionei usando um plugin do AddThis (http://www.addthis.com/), mais não esta legal não, ao carregar a página com o plugin instalado no html, ele altera a url do site colocando uma linha como essa (meusite.com/index.php#.UG1xWVFqGuw),

 

Gostaria dos codigos desses botões, sei q encontro nas proprias redes sociais, mais não com o mesmo estilo com o balãozinho e tal.

 

 

Obrigado!