Aprenda NumClique > Desenvolvimento Web

Como fazer um cabeçalho virar link?

Muitas das dúvidas de quem está iniciando nos padrões webstandards, se deparam com certos bizus que nem sempre estão tão acessíveis…

Lembro muito bem do dia que estava com o site quase todo pronto e ao tentar utilizar o “Image Replacement” combinando com um link, veio a cara de espanto… ou desespero, como acharem melhor.

Para quem não sabe de que se trata o “Image Replacement“… você pode ver o sobre o do que se trata essa técnica dando uma lida no post Image Replacement – a técnica de substituição de imagens.

Pois bem… agora que estamos todos sabendo como utilizar e o que é o Image Replacement e todos estão craques em CSS e talz… vamos ao que realmente interessa… seguinte…

Depois que você já sumiu com o texto, colocou a imagem, mas o link (caso tenha) não apareceu, ou melhor… não está nem gerando link, é por conta de um esqueminha que não é mágica nem nada…

Como você sumiu com o texto -9000px, obviamente o “corpo” do link foi junto né?! Quando foi inserida a imagem, ela apareceu, mas o link está sem saber onde aparecer, para isso, o lindo e perfect CSS vai te dar uma mãozinha… utilizando o exemplo anterior vamos à prática…

No HTML

<div id=”topo”>

<h1><a href=”#”>Topo do site</a></h1>

</div>

No CSS

#topo h1 {

text-indent:-9000px;

overflow:hidden;

width:200px;

height:100px;

}

Agora vamos ajustar o link…

#topo h1 a {

width:200px;

height:100px;

display:block;

background:url(imagem) no-repeat top left;

}

Entendendo o que foi feito…

Determinamos a largura que o link deveria ter, bem com a altura, depois de feito isso a área do link estava configurada, mas não apresentada, com isso… a função do display:block é gerar o “pedaço” determinado para o clique do usuário, onde tem o background, obviamente é a imagem a ser inserida…

Nota do autor: Os detalhes pós imagem do background, entra na questão da abreviação de termos com CSS, você pode ter uma idéia sobre o assunto lendo Dicas Básicas sobre CSS

Publicado em

14
de março de 2008

Twitter: @joares

Posts relacionados

Comentários