Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Galera, boa noite!
Sou novo no forum, estou dando uma repaginada no meu site e me deparei com a seguinte situação:
<div class="col-xs-2 posdiversosIcones">
<a href="imagens/diversos/evcoc_festaconfraternizacao_2009.jpg"
rel="lightbox"
title="EV COC - Convite Festa Confraternização, 2009">
<img src="imagens/diversos/evcoc_festaconfraternizacao_2009a.png"
class="img-responsive center-block"
height="160px"
width="160px"
border="0">
</a>
</div>A imagem que está fazendo a função de um botão tem 160px x 160px, porém a área de clic dela não pega o tamanho total da imagem, a área de clic está somente na metade da imagem, tipo 160px x 80px. A metade de baixo da imagem não sofre ação nenhuma, é como se não fosse uma imagem linkada. Será que fui claro em minha explicação? rsrs
Bom, desde já agradeço a ajuda dos colegas.
A tag <a> é um inline-element, sendo assim, sua largura é definida pelo conteúdo que ele está envolvendo (no caso a imagem). Dessa forma, como a imagem é um um inline-element também o link só irá funcionar na área onde imagem se encontra porém não em sua altura completa já que não se pode definir altura para elementos inline logo a imagem só tem uma altura visual, então o link só funcionará na altura da sua linha.
Veja :
http://codepen.io/anon/pen/YGPKWG
Note que a borda da tag <a> é inferior ao tamanho da imagem porque ambas as tags são inline-elements mas a imagem ocupa visualmente um espaço maior pois tem uma altura (altura da imagem, não do elemento em si) maior que a linha em que se encontra.
Pra fazer o link funcionar corretamente basta defini-lo como um elemento inline-block assim permitindo elementos de nível block e inline dentro dele e assumindo a altura (se não definida) de seu conteúdo (no caso a imagem) e a imagem como block.
Se manter a imagem com seu display padrão que é inline será gerado um padding no bottom. Uma explicação detalhada sobre o problema pode ser encontrada: aqui.
Solução para o problema:
Valeu znatanalvez, a propriedade display: inline-block; já foi suficiente para resolver o problema!
Obrigado!
Agradeço também ao codercss.
Valeu pessoal!
>
Valeu znatanalvez, a propriedade display: inline-block; já foi suficiente para resolver o problema!
Obrigado!
Agradeço também ao codercss.
Valeu pessoal!
Você provavelmente não possui outros elementos abaixo da imagem caso contrário teria o problema que eu citei.
Pelo que percebi a aplicação de elemento inline no interior de outro não permite que seja definida o seu tamanho?
Neste exemplo: https://jsfiddle.net/ededev/fm38weuh/1/ Consigo definir o tamanho da imagem, mas não consigo definir a altura do elemento a, pois como é um elemento inline, estes tipos de elementos não permitem a mudança de largura e altura.
O correcto será aplicara a propriedade display com os valores, correctos, conforme mencionou.
Diga-me s.f. se estou certo?
Obrigado
Pelo que percebi a aplicação de elemento inline no interior de outro não permite que seja definida o seu tamanho?
Neste exemplo: https://jsfiddle.net/ededev/fm38weuh/1/ Consigo definir o tamanho da imagem, mas não consigo definir a altura do elemento a, pois como é um elemento inline, estes tipos de elementos não permitem a mudança de largura e altura.
O correcto será aplicara a propriedade display com os valores, correctos, conforme mencionou.
Diga-me s.f. se estou certo?
Obrigado
Sim, exatamente isso.
No meu caso uma parte da minha imagem tava em baixo de outro elemento com transparência #00fff; e z-index maior que o da minha imagem!
Resolvi assim:
<a href="http://www.abim.inf.br/mudanca-de-sexo-impossibilidade-biologica-revolta-contra-deus/#.W-MT7tVKjIU" rel="nofollow">
<img src="PRA-LINKS-UM-KB.png" alt="" **style="**width:152px;height:43px; border:0; top:-685px; left:-5px; position:absolute;opacity:0; **z-index:99; ****"**>
Bom dia,
Pelo que percebi o seu código consiste nisto: https://jsfiddle.net/a5r5b8nz/
O link no elemento a devia ocupar todas a imagem, pois quem define o seu tamanho é o css da imagem. Veja senão tem outra regra de css a anular essa.
Nota: Alguém pode-me ajudar a perceber porque a borda do botão a não engloba toda a imagem?