← Desenvolvimento

Problema com botão LIKE

Lida 5282 vezes

Offline

fpdeus 
Membro
Mensagens 1289 Gostos 0
Feedback +42

Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 1000 Posts

Pessoal,

Num dos meus sites está a acontecer isto que aparece na imagem, alguém sabe como corrigir?



Ou seja, a pessoa clica gosto e abre essa janela pequena para comentar e partilhar.
Só que essa janela está cortada... alguém sabe como resolver isso?

É que se eu clicar no botão Enviar, essa janela já aparece inteira...
Offline

=IceBurn= 
Membro
Mensagens 897 Gostos 3
Feedback +3

Troféus totais: 32
Trófeus: (Ver todos)
Windows User Level 6 Linux User Mobile User Super Combination Combination Topic Starter Poll Voter Poll Starter Level 5

Saber qual é o site ajudava, mas possivelmente o problema está no CSS atribuído à <div> que contém o botão.

Geralmente as propriedades overflow, max-width, width ou position, quando mal atribuídas, podem originar isso.
Offline
J

Jose Augusto 
Membro
Mensagens 434 Gostos 0
Feedback +3

Troféus totais: 25
Trófeus: (Ver todos)
Windows User Super Combination Combination Topic Starter Level 5 Level 4 Level 3 Level 2 Level 1 100 Posts

Para resolver mete o z-index das divs que estão sobrepostas mais baixo.
Offline

fpdeus 
Membro
Mensagens 1289 Gostos 0
Feedback +42

Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 1000 Posts

Citação de: Jose Augusto em 14/Dez/2012 16:12
Para resolver mete o z-index das divs que estão sobrepostas mais baixo.

Aquilo está em <li>
Alterei no CSS para z-index: 4; e também z-index:auto; no entanto ficou na mesma...
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Mete mais de 4.
Offline

fpdeus 
Membro
Mensagens 1289 Gostos 0
Feedback +42

Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 1000 Posts

Citação de: Pedro Lopes em 14/Dez/2012 16:44
Mete mais de 4.

Já coloquei 10. E também não deu.

O problema é que aquilo é uma <ul> dividido em vários <li>.
Onde em cada <li> tem um botão. E aquela janela apenas abre no tamanho dessa <li>
Já tentei aumentar os tamanhos das <li>, mas depois os botões ficam todos desorgazinados.

Ou seja, o que preciso é que as <li> tenham o tamanho certo, mas que permitem que essa janela apareça por cima...

EDIT: Já tentei também com overflow.

Deixo aqui o código, pode ser que vejam o que poderá ser.

Código: [Seleccione]
/* Share */
.share-post {
clear: both;
margin:10px -20px -20px;
padding: 10px 0px 10px 10px ;
background:#F7F7F7;
border-top:1px solid #EAEAEA;
height:20px;
}
.mini-share-post {
clear: both;
margin:10px -20px -20px;
padding:10px 10px 10px 25px;
height:20px;
}
.share-post li , .mini-share-post li{
float: left;
width: 106px;
}
.share-post span.share-text{
background:#FF8500 ;
margin: -10px 10px -10px -10px ;
display:block;
float:left;
color: #FFF;
padding:9px;
font-family: BebasNeueRegular,arial,Georgia, serif;
font-size: 14pt;

}
Offline

=IceBurn= 
Membro
Mensagens 897 Gostos 3
Feedback +3

Troféus totais: 32
Trófeus: (Ver todos)
Windows User Level 6 Linux User Mobile User Super Combination Combination Topic Starter Poll Voter Poll Starter Level 5

Não quero que leves a mal o que vou escrever, mas, se queres ajuda, seria mais que justo forneceres o que é preciso para quem ajuda poder trabalhar no teu problema. Ficar a adivinhar não te ajuda a ti, nem quem te tenta ajudar.

Quando precisas de um mecânico, deixas o carro em casa e vais levando peças do motor para ele descobrir onde está a avaria? Acho que não. Aqui passa-se a mesma coisa que na analogia, só não tens de pagar a factura à saída.

Uma coisa que me saltou à vista foi todas essas unidades negativas e os clear, mas o problema, pode até nem estar aí, pode vir da <div> (ou div's) que contêm o <ul>. 

Sugiro que deixes no mínimo a estrutura da div que contém os <ul> e o CSS relativo a essa estrutura. Ou então, se é um projecto assim tão privado que não podes deixar sequer uma porção do html, acho que esta não é a forma mais indicada de resolver o problema.
Offline

fpdeus 
Membro
Mensagens 1289 Gostos 0
Feedback +42

Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 1000 Posts

Citação de: =IceBurn= em 14/Dez/2012 17:49
Não quero que leves a mal o que vou escrever, mas, se queres ajuda, seria mais que justo forneceres o que é preciso para quem ajuda poder trabalhar no teu problema. Ficar a adivinhar não te ajuda a ti, nem quem te tenta ajudar.

Quando precisas de um mecânico, deixas o carro em casa e vais levando peças do motor para ele descobrir onde está a avaria? Acho que não. Aqui passa-se a mesma coisa que na analogia, só não tens de pagar a factura à saída.

Uma coisa que me saltou à vista foi todas essas unidades negativas e os clear, mas o problema, pode até nem estar aí, pode vir da <div> (ou div's) que contêm o <ul>.  

Sugiro que deixes no mínimo a estrutura da div que contém os <ul> e o CSS relativo a essa estrutura. Ou então, se é um projecto assim tão privado que não podes deixar sequer uma porção do html, acho que esta não é a forma mais indicada de resolver o problema.

Quando levo o carro ao mecânico, levo o carro devido a estar todo montado.
Num website, onde (no meu caso) tenho uns 30 ficheiros .php é um bocado complicado estar a colocar aqui tudo, uma vez que não sei de onde provem o erro.
Mas pronto, eu percebi o que quiseste dizer...

Aqui está:

Código: [Seleccione]
<?php
global $get_meta , $post;
if( ( tie_get_option( 'share_post' ) &&  empty( $get_meta["tie_hide_share"][0] ) ) || $get_meta["tie_hide_share"][0] == 'no' ):?>

<div class="share-post">
<span class="share-text"><?php _e( 'Partilhe!' , 'tie' );?></span>
<ul>
<?php if( tie_get_option( 'share_tweet' ) ): ?>
<li><a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-via="<?php echo tie_get_option( 'share_twitter_username' ) ?>" data-lang="en">tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>
<?php endif; ?>
<?php if( tie_get_option( 'share_facebook' ) ): ?>
<li><div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" ></div></li>
<?php endif; ?>
<?php if( tie_get_option( 'share_google' ) ): ?>
<li style="width:80px;"><div class="g-plusone" data-size="medium" data-href="<?php the_permalink(); ?>"></div>
<script type='text/javascript'>
 (function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
 })();
</script>
</li>
<?php endif; ?>
<?php if( tie_get_option( 'share_stumble' ) ): ?>
<li><su:badge layout="2"></su:badge>
<script type="text/javascript">
(function() {
var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
})();
</script>
</li>
<?php endif; ?>
<?php if( tie_get_option( 'share_linkdin' ) ): ?>
<li><script src="//platform.linkedin.com/in.js" type="text/javascript"></script><script type="IN/Share" data-url="<?php the_permalink(); ?>" data-counter="right"></script></li>
<?php endif; ?>
<?php if( tie_get_option( 'share_pinterest' ) ): ?>
<li style="width:80px;"><script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script><a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&amp;media=<?php echo tie_thumb_src('', 660 ,330); ?>" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a></li>
<?php endif; ?>
</ul>
<div class="clear"></div>
</div> <!-- .share-post -->
<?php endif; ?>
Offline

=IceBurn= 
Membro
Mensagens 897 Gostos 3
Feedback +3

Troféus totais: 32
Trófeus: (Ver todos)
Windows User Level 6 Linux User Mobile User Super Combination Combination Topic Starter Poll Voter Poll Starter Level 5

Talvez não me tenha explicado bem. Não te estava a pedir para colocares o código PHP, basta a porção relevante do código fonte (HTML) que podes ver no próprio browser!

Para além disso, o CSS relativo ao HTML que colocares.
Offline
D

Diogo Pinto 
Administrador
Mensagens 4400 Gostos 371
Feedback +4

Troféus totais: 37
Trófeus: (Ver todos)
Avatar Search Level 6 Linux User Mobile User Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes

Citação de: fpdeus em 14/Dez/2012 17:56
Quando levo o carro ao mecânico, levo o carro devido a estar todo montado.
Num website, onde (no meu caso) tenho uns 30 ficheiros .php é um bocado complicado estar a colocar aqui tudo, uma vez que não sei de onde provem o erro.
Mas pronto, eu percebi o que quiseste dizer...

Aqui está:

Não te posso ajudar, mas quis apenas ajudar a interpretar a analogia... O IceBurn referia-se a indicares o site penso eu, isso simboliza o "carro". E as peças simbolizam os ficheiros php. Por isso, seria preferível indicares o site para as pessoas te ajudarem. ;)
Offline

Octávio Alves 
Membro
Mensagens 963 Gostos 36
Feedback +25

Troféus totais: 27
Trófeus: (Ver todos)
Windows User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Citação de: =IceBurn= em 14/Dez/2012 18:04
Talvez não me tenha explicado bem. Não te estava a pedir para colocares o código PHP, basta a porção relevante do código fonte (HTML) que podes ver no próprio browser!

Para além disso, o CSS relativo ao HTML que colocares.

A parte do CSS relativo penso que seja o que colocou mais em cima.
Offline

fpdeus 
Membro
Mensagens 1289 Gostos 0
Feedback +42

Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 1000 Posts

Penso que seja esta parte do CSS

Código: [Seleccione]
/* Share */
.share-post {
clear: both;
margin:10px -20px -20px;
padding: 10px 0px 10px 10px ;
background:#F7F7F7;
border-top:1px solid #EAEAEA;
height:20px;
}
.mini-share-post {
clear: both;
margin:10px -20px -20px;
padding:10px 10px 10px 25px;
height:20px;
}
.share-post li , .mini-share-post li{
float: left;
width: 106px;
}
.share-post span.share-text{
background:#FF8500 ;
margin: -10px 10px -10px -10px ;
display:block;
float:left;
color: #FFF;
padding:9px;
font-family: BebasNeueRegular,arial,Georgia, serif;
font-size: 14pt;

}
Offline

=IceBurn= 
Membro
Mensagens 897 Gostos 3
Feedback +3

Troféus totais: 32
Trófeus: (Ver todos)
Windows User Level 6 Linux User Mobile User Super Combination Combination Topic Starter Poll Voter Poll Starter Level 5

Na folha de estilos, comenta isto:
Código: (css) [Seleccione]
  .content iframe { max-width: 100%; }
Ou seja:
Código: (css) [Seleccione]
/* .content iframe { max-width: 100%; } */

Páginas: 1

Posts relacionados

Social Media

Botão "Like" do Facebook nos post do wordpress

k
kandalf

Joomla

Problemas com o botão "like" do Facebook

Rodrigues

SMF

SMF e o botão like do Facebook

D
Dub