BlogAlex, sed Alex

Ícone

quem faz yoga não bloga

Colocando links em DIVs com fundo PNG transparente

Se o título do post lhe parece grego, não entre em pânico; leia os outros – sobre economia, futebol etc. Ou faça um dos quizzes, ou divirta-se com as frases e momentos José Simão.

Uma das coqueluches atuais no webdesign é usar imagens de fundo com bordas arredondadas. Dá um ar de modernidade.

O problema é que navegadores mais antigos, como o Internet Explorer 6 (e seus primos mais arcaicos ainda), só aceitam transparência em arquivos GIF. Sim, eu ouço o seu pensamento, você que está sentado aí na última fila. Por que usar transparência? Imagina que o site tem o azul como cor de fundo. Mesmo usando o fundo com código RGB hexa idêntico no Fireworks (ou Photoshop, Illustrator etc.), dá uma diferença no browser. Então, para sites que não têm fundo branco, é necessária a transparência.

(Espero que nenhum de vocês, meus leitores e minhas leitoras, tenha perdido noites de sono nem deixado de ver capítulos de novela, ou finais de Libertadores, tentando aplicar transparência em sites com fundo branco!)

Usar JPG em vez de GIF, além de aumentar significativamente o tamanho do arquivo, não resolve o problema da visualização em navegadores antigos. A alternativa então é usar um filtro da própria Microsoft em imagens PNG.

Class ou id?

Não há diferença significativa entre class ou id para este caso, de modo que usarei id nos exemplos.

CSS:

#fundo {
float: left;
margin-bottom: 3px;
background-image:url(‘imagemdefundo.png’);
background-repeat:no-repeat center center;
_background:none!important;
width:400px;
height:400px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src=’imagemdefundo.png’,sizingMethod=’scale’);
}

HTML:

<div id=”fundo”>

</div>
</code>

É importante que a DIV do fundo transparente não tenha sua position definida se a mesma tiver links. Links?

Links

Tudo muito bom, tudo muito certo. A não ser que haja links na DIV de fundo transparente. Funciona de forma correta no Firefox e demais geckos -aqueles navegadores que usam a tecnologia do Firefox e do Opera-, mas, adivinhe, dá problema no Explorer. Qualquer um deles. O navegador do tio Bill interpreta os links como uma camada abaixo do fundo, de forma que o mouse não os alcança devido a uma barreira. Isso explica muita coisa, inclusive um filme com o nome “Kill Bill”!

Para tornar clicáveis os links, é preciso acrescentar uma DIV com posição relativa. Vamos lá:

a.fundo {
position: relative;
}

Agora fica evidente a importância de não se colocar position:relative na DIV da imagem de fundo.

Arquivado em:informática, web 2.0, webdesign

One Response

  1. Valeu cara, acabou de me ajudar bastante com essa dica do position: relative no link.

    Abração!

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: