GustavoRibeiro.net

Quem nunca passou por problemas ao criar um menu, ou qualquer outra coisa que seja, utilizando a propriedade float? Pois é! Procurando sobre o que escrever nesse blog, resolvi deixar aqui uma solução para o problema da imagem abaixo.

Continuar lendo…

“Image Replacemente” é uma técnica bastante utilizada hoje em dia quando queremos substituir um texto em nosso site por uma imagem, nos possibilitando o uso de diversos tipos de fontes etc. Abaixo coloco um exemplo utilizado aqui no blog, aonde eu substituo o texto “gustavoribeiro.net” por uma imagem chamada “logo.jpg”. A técnica é bastente simples:

Costumo utilizar sempre a tag <h1> para inserção de logo nos sites que faço, ficando assim:

<h1><a href="index.php"><span>gustavoribeiro.net</span></a></h1>

Já no CSS, aplico a imagem da logo como background da tag <a>, fazendo assim, um link para a home do site e na <span> escondo o texto para que o mesmo não apareça em cima da imagem.

h1 a {
    float:left;
    width:148px;
    height:22px;
    margin-top:9px;
    background:url('img/logo.jpg') no-repeat;
}
h1 span {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    visibility:hidden;
}

Dessa forma, ao utilizar-mos o Jaws ou o Lynx não iremos perder nenhuma informação disponível no site por causa de imagens. Experimente também, desabilitar o CSS utilizando a extension web developer do firefox e veja o que acontece com a imagem do logo.

ps off topic: parabéns para mim