Jump to content
Frederico Zanitti

Link com imagem não "cobre" todo a área da imagem

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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:

http://codepen.io/anon/pen/LREPkp

  • +1 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

znatanalves


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

Share this post


Link to post
Share on other sites

znatanalves

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.

  • +1 1

Share this post


Link to post
Share on other sites

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; ">

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 camargo.2018
      Alguem sabe como posso fazer pra puxar imagens do google 
       
      Ex:
      $pesquisa = "fernando e sorocaba";
      e ele me retorna somente uma imagem
       
       
      pfv me ajudem !!!!!
    • By Matt_Engler
      Por favor, preciso de ajuda para meu TCC onde terei que criar um site. Eis o problema, utilizei o CSS para estilizar os links do site, dessa maneira:
       
      a{
          color: white;
          text-decoration: none;
          padding: 5px 10px;
      }
      a:link{
          color: white;
      }
      a:visited{
          color: white;
      }
      a:hover{
          color: black;
          background-color: white;
      }
       
      Essa estilização foi aplicada a todos os links do site, porém, quero aplicá-la a apenas alguns links específicos (no caso, os links do top). Como faço para "isolar" a estilização de cada link?!
       
      Abaixo disponibilizo o HTML e o CSS do site, desde já agradeço!
       
       
      <!DOCTYPE html>
      <html>
      <head>
          <title>Anything</title>
          <link rel="stylesheet" type="text/css" href="css/Stil.css">
      </head>
      <body>
      <!-- Inicio do Menu -->
      <div class="haus">
          <div class="area">
              <h1 class="logo"> <span class="yellow">&emsp;<img src="Logo.png" width="325" height="50"></span> </h1>
              <div class="menu">
                  <a href="Haus.html">Haus</a>
                  <a href="#">Nachrichten</a>
                  <a href="#">Kino</a>
              </div>
          </div>n
      </div>
      <!-- Fim do menu -->
      <!-- Inicio do Conteúdo -->
      <br>
      <div class="area-principal">
          
          <div class="postagem">
              <h2><a href="#"> Título da Notícia:</a></h2>
              <span class="data-postagem">Data da postagem:</span>
              <img src="img/imagem1.png" class="img-postagem">
              <p>
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
              </p>
              <span>Postado por: Fulano</span>
                  </div>
      </div>
      </body>
      </html>
       
      ================================================================================================================================================================
       
      *{
          margin: 0px;
          padding: 0px;
      }
      body{
          background-color: lightgray;
          font-size: 16px;
          font-family: "Trebuchet MS", Helvetica, sans-serif;
          color: black;
      }
      .haus{
          font-size: 25px;
          color: yellow;
          background-color: black;
          border-bottom: 7px solid gold;
          height: 50px;
          position: fixed;
          width: 100%;
          top: 0px;
      }
      .area{
          width: 720px
          margin: 0 auto;
      }
      .menu{
          float: right;
          padding: 10px 100px;
      }
      .logo{
          float: left;
      }
      .yellow{
          color: gold;
      }
      a{
          color: white;
          text-decoration: none;
          padding: 5px 10px;
      }
      a:link{
          color: white;
      }
      a:visited{
          color: white;
      }
      a:hover{
          color: black;
          background-color: white;
      }

      .area-principal{
          width: 720px;
          margin: 55px auto 10px auto;
      }
      .postagem{
          margin: 10px;
          background-color: darkgray;
          margin-bottom: 10px;
      }
      h2{
          color: gold;
          text-decoration: none;
      }
      .data-postagem{
          display: block;
          font-size: 14px;
          border-bottom: 1px solid #f4f4f4;
          padding-bottom: 10px;
          margin-bottom: 10px;
      }
      .img-postagem{
          float: left;
          margin: 0px 10px 10px 0px;
      }
      p{
          text-align: justify;
          padding: 10px;
      }
       
    • By Pablo Bernardo
      Gostaria de fazer um botão que levasse o usuário não pra uma página da web, e sim para um aplicativo de seu computador.
      No caso iniciasse o aplicativo do computador ai clicar no botão.
    • By langarolucas
      Bom dia,
      Comecei a fazer um curso de Html, porém não estou conseguindo colocar imagem. Eu uso a tag "img" (destacado em vermelho) porém a mesma não localiza a imagem na pasta.
      Segue a baixo o html:
       
       
      <!DOCTYPE html>
      <html lang = "pt-br">
      <head>
          <meta charset="UTF-8">
          <title>Tudo sobre o Google Glass</title>
      </head>
      <body>
      <div id="interface">
          <header>
          <h1>Google Glass</h1>
          <h2>A revolução do Google está chegando</h2>
          </header>
          --> <img src="imagens/glass-oculos-preto-peq.jpg"/>
      Menu Principal
      - Home
      - Especificações
      - Fotos
      - Multimídia
      - Fale conosco
      Tecnologia > Inovações
      Saiba tudo sobre o Google Glass
      por Gustavo Guanabara
      Atualizado em 23/Abril/2013
      O que é
      O Google Glass é um acessório em forma de óculos que possibilita a interação dos usuários com diversos conteúdos em realidade aumentada. Também chamado de Project Glass, o eletrônico é capaz de tirar fotos a partir de comandos de voz, enviar mensagens instantâneas e realizar vídeoconferências. Seu lançamento está previsto para 2014, e seu preço deve ser de US$ 1,5 mil. Atualmente o Google Glass encontra-se em fase de testes e já possui um vídeo totalmente gravado com o dispositivo. Além disso, a companhia de buscas registrou novas patentes anti-furto e de desbloqueio de tela para o acessório.
      [AQUI ENTRA UMA FOTO]
      Data de lançamento
      Não há uma data específica e oficial para o dispositivo ser lançado, ainda. Pode ser que ele esteja disponível em demonstrações a partir de 2013, mas seu lançamento para as lojas fica para, pelo menos, 2014.
      Especificações Técnicas
      Tabela Técnica do Google Glass Mar/2013
      Tela:Resolução equivalente a tela de 25"
      Camera: 5MP para fotos / 720p para vídeos
      Conectividade: Wi-Fi/ Bluetooth
      Memória Interna: 12GB
      Como funciona
      De acordo com fontes próximas do Google, os óculos vão contar com uma pequena tela de LCD ou AMOLED na parte superior e em frente aos olhos do usuário. Com o uso de uma câmera e GPS, você pode se situar, assim como selecionar opções com o movimento da cabeça
      O que você pode fazer com o Google Glasses
      O vídeo de divulgação do Google mostra que você pode se transformar em uma espécie de “super-humano”, já que o aparelho pode indicar a quantos metros você está de seu destino, se o metrô está aberto ou fechado, mostrar o clima, agenda e até mesmo permitir que você marque encontros apenas com comandos de voz.
      [AQUI ENTRA UM VÍDEO]
      Outras Notícias
      Vídeo mais recente
      [AQUI ENTRA UM VÍDEO]
      Novidades no Glass
      O Google enfim revelou as especificações completas do Google Glass, e com ele uma surpresa ainda inédita no mercado: a gigante das buscas usará um sistema de áudio baseado na transdução por condução. Através das hastes dos óculos, o som será transmitido para o ouvido do usuário por meio de microvibrações em determinados ossos de sua cabeça, sem usar nenhum tipo de alto-falante.
      Além da surpresa do áudio, a tela montada a frente do olho do usuário também chamou atenção. Serão 640 x 360 pixels de resolução que, em proporção, equivaleria a um monitor de 25 polegadas de alta definição colocado a 2,5 metros de distância do espectador.
      Copyright 2013 - by Gustavo Guanabara
      Facebook | Twitter
      </div>
      </body>
      </html>
       
      Poderiam me ajudar?
    • By kellanjos
      Olá pessoal. Tem uma coisa que o corel faz e está me irritando. Quando eu linko algumas imagens, como se faz no cartão de visitas interativo e salvo como PDF Web ou PDF distribuição de documentos.. o que era o link do botão de facebook, passa a ser de instagram, o do site passa ser do  whats.. ou repete os hiperlinks.. e gero novo arquivo, refaço tudo, seja através já janela de internet ou a de links e marcadores. pensei que poderia ser pq cada botão tinha camadas e efeitos.. deixei com uma camada e nada, bloquei o objeto e nada.. estou tipo faço já tentativas tolas e não consigo resolver essa questão das trocas ou repetições dos hiperlinks.. e quando eu fecho e abro o arquivo.. muda toda vez.. o trem dos hiperlinks tem vontade e vida própria..como eu faço pra prender essas pestes no lugar que eu quero?.. rs socorro..
×

Important Information

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