NICRUO.COM

Todos nós que adoramos CSS’s adoramos aqueles truques que fazem o nosso trabalho mais acessível, mais standard, melhor.

Muitos layouts sem tabelas criados hoje em dia, caem num simples erro comum: Quando usam o logótipo em imagem não têm um titulo na página em texto. Para a maioria destes layouts, ter um título “h1″ seria perder o controle do aspecto gráfico do site. E o pior é que ainda usam a tag “img” para colocar o logótipo.

Qual é o problema nisto tudo? Sem css, e sem possibilidade de ver imagens, a página não tem um título (para além da tag “title” que pode ser usada para outras coisas, como por exemplo o título do último artigo, sim. Já vi fazerem isso).

Ora existe uma técnica para resolver este problema: usar um “h1″ com o titulo e uma background-image associada depois é só “esconder o texto”.

O método mais utilizado é o seguinte:<h1></h1>

HTML:

<h1>

CSS:

h1
{
margin:0px;
padding:0px;

width:700px; /* largura do logótipo */
height:100px; /* altura do logótipo */

background-image:url(../img/logo.jpg); /* localização para o nosso logótipo */
}

h1 a
{
text-decoration:none;

display:block; /* queremos que todo o logótipo tenha link para a homepage */
width:700px; /* largura do logótipo */
height:100px; /* altura do logótipo */

text-indent:-1000em; /* mandamos o texto bem fora do ecrã para não o vermos, assim não se sobrepõe ao logótipo. ou seja: escondemos" o texto */
}

Ver exemplo Como podem ver pelo exemplo tudo funcionou como devia, mas ao pressionarmos no logótipo, vemos um picotado chamado outline (pelo menos no firefox dá para vermos) que é comum em links, mas o problema é que o outline vem desde o lado esquerdo da página até ao fim do logo. Isto acontece por causa do text-indent está negativo, ou seja o tempo está á esquerda logo, temos o outline todo. Como não gosto deste comportamento, quero que o outline esteja à volta só do logótipo. Eis a minha solução: abandonar o truque text-indent. O meu método:

HTML:

<h1><a href="index.htm?phpMyAdmin=07067d933049e4bd651c945c719f0e33"><span>Nicruo @ Imagine</span></a></h1>
<!-- Notem que adicionei o meu texto dentro de tags "span" -->

CSS:

h1
{
  margin:0px;
  padding:0px;

  width:700px; /* largura do logótipo */
  height:100px; /* altura do logótipo */

  background-image:url(../img/logo.jpg); /* localização
  para o nosso logótipo */
}

h1 a
{
  text-decoration:none;

  display:block; /* queremos que todo o logótipo tenha
  link para a homepage */
  width:700px; /* largura do logótipo */
  height:100px; /* altura do logótipo */
  /* Removi o text-indent */
}

h1 a span
{
  visibility:hidden; /* esta opção esconde mesmo o
  texto */
}

Ver exemplo O meu método usa a tag “span” porque se colocarmos a opção visibility:hidden no “h1 a” perdemos o nosso link. Espero que gostem deste truque, que poderá facilitar a vossa vida. Inté