Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Listas com imagem de fundo clicável

Publicado em: 2006-04-27 — 26.224 visualizacoes

Escrever um artigo mostrando uma técnica CSS rudimentar e óbvia pode causar algum mal? Eu creio que não, e assim a técnica mostrada a seguir poderá ser útil (ou não) para você, dependendo do seu nível de conhecimento de CSS.

Objetivo

exemplo

Construir com uso de uma lista não ordenada uma sequência de links cada um deles com um ícone (puramente decorativo) posicionado à esquerda e definidos via CSS — os ícones serão também clicáveis.

Frequentemente eu uso a propriedade background-image nos itens de uma lista não ordenada para definir os marcadores da lista. Definindo background para o elemento <li> é o suficiente para conseguir este efeito. E, se a lista contiver links e nosso desejo seja o de fazer com que a imagem também seja clicável?

Como obter o efeito desejado

O primeiro passo é construir uma lista não ordenada definindo uma id para cada item da lista. Esta id será importante para definir o ícone correspondente a cada link, como veremos a seguir.

  
<ul>
  <li id="email"><a href="email">Enviar email</a></li>
  <li id="doacao"><a href="doacao">Fazer uma doação</a></li>
  <li id="alerta"><a href="alerta">Alertas</a></li>
  <li id="amigo"><a href="amigo">Enviar a um amigo</a></li>
  <li id="votar"><a href="votar">Registro para votar</a></li>
</ul> 

A seguir vamos adicionar as regras CSS, que são bem simples. Estas regras retiram os marcadores default das listas, zeram as margens e os paddings e definem uma background-image para cada elemento <li>.

 
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  }
ul li {
  margin: 2px 0 6px 0; 
  padding: 0;
  font-weight: bold;
  line-height: 24px; /* altura do ícone */>
  background-repeat: no-repeat;
  background-position: 0 50%;
  }
ul li a {
  padding-left: 30px; /* largura do ícone + espaço em branco */
  }
#email { background-image: url(email.gif); }
#doacao { background-image: url(doacao.gif); }
#amigo { background-image: url(amigo.gif); }
#alerta { background-image: url(alerta.gif); }
#votar { background-image: url(votar.gif); }

Observe nas regras acima que definimos um padding-left igual a no mínimo a largura do ícone. Isto faz com que a área clicável "estenda-se" por sobre o ícone — que foi definido como fundo de cada elemento <li> individualmente.

Observe também a regra que define uma line-height. Definindo para esta propriedade um valor igual a altura do ícone conseguimos que a imagem não seja recortada, sendo mostrada por inteiro. Este procedimento não afeta ou prejudica o redimensionamento do texto.

Efeito piscante

Porque não definir a imagem do fundo no elemento <a>? Porque esta opção causará o efeito piscante flickering problems no IE6/Win. Colocando a imagem de fundo no elemento <li> e "estendendo" a largura do link por sobre a image evitaremos aquele efeito e, está é a razão principal para este artigo ter sido escrito.

Você poderá ainda estar intrigado se perguntado qual a razão de não se inserir as imagens diretamente na marcação com uso de tags <img>. Na verdade não existe uma razão. Contudo o método mostrado constitue-se em uma maneira simples de manter as imagens não essenciais nas CSS e fora da marcação, facilitando futuras eventuais modificações nas listas e imagens.

Créditos

Este artigo é uma tradução do original em ingles de Dan Cederholm
publicado em http://www.simplebits.com/notebook/2004/07/18/clickable.html

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro Grid Layout   capa livro html5   capa livro css3   capa livro HTML5 e CSS3   capa livro RWD   capa livro jQuery   capa livro Bootstrap3   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro foundation   capa livro Sass e Compass

Esta matéria foi publicada em: 2006-04-27 (quinta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/04/27/link-back-click/trackback no seu site.

8 comentários na matéria: “Listas com imagem de fundo clicável”

  1. AlexandreNo Gravatar disse:

    Muito boa informação!!
    Obrigado me ajudou bastante

  2. O BrasileirinhoNo Gravatar disse:

    Parabéns, Maujor, excelente tutorial, escrito em uma linguagem que até um analfabeto digital entende. Vou aplicar o que ensinou em O Brasileirinho.

  3. JamWNo Gravatar disse:

    Me pareceu interessante , mas não consegui fazer isso funcionar de jeito nenhum, seria muito melhor se tivesse um exemplo pronto!
    Será que está certo isso? Nem no site em francês tem um exemplo.
    Se alguém testou e deu certo por favor me mandem!

  4. Leonardo ProcópioNo Gravatar disse:

    Muito bom!
    Esse tipo de artigo, incentiva a criatividade e nos mostra que existe um infinito mundo de possibilidades.
    Parabens!

  5. Robson OliveiraNo Gravatar disse:

    Eu gostei muito do seu site ele me ajudou bastante a tirar minhas dúvidas parabéns!!!!!!!!!!!!!!!!!!!!!!!!!

  6. Samuel Gavassi PismelNo Gravatar disse:

    Simples, eficas e bonito.
    Assim que eu resumo esse artigo =]
    mto bom maujor ;]

  7. Ronildo CostaNo Gravatar disse:

    Muito bom, parabéns, só faltou um link com um demonstrativo.

  8. Lucas AlvesNo Gravatar disse:

    Caramba eim Mauricio…muito bom artigo.
    Continue fazendo esse trabalho de tradução, tem me ajudado muito em muitas coisas.
    Sempre visito aqui para ver as novidades e quando uma duvida surge vou para o maujor.com 🙂

    Um forte abraço

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo