float sem largura como bloco

• Postado por Zigolis em 16/07/2009

Caros,
nesse último sprint, tivemos que desenvolver a nova barrinha da globo.com, que será utilizada pelos produtos e parceiros, nela temos aqueles campos tradicionais (notícias, esporte, entretenimento e vídeos) e algumas outras novidades, como por exemplo:
o camarada poderá configurar alguns campos para a sua barra (esses serão novos links dentro daquela sequência tradicional), ou seja ficaria algo mais ou menos assim:

globo.com | notícias | esportes | entretenimento | vídeos | rede globo | novelas

ai que começou a ficar maneiro… porque quando eu flutuo (float) os itens, em alguns casos (não me perguntem pq apenas em alguns casos… ;-P) o float faz com que o elemento fique com 100%, dessa forma ele passa a ocupar toda a largura da página, que como consequência nos força a setar uma largura para cada um deles, ai mora o primeiro problema, que a maioria já deve saber como solucioná-lo, basta colocar o display:inline no li

<ul>

</ul>

li {float:left;display:inline;}

blz, isso resolve nosso primeiro problema, mas gera um outro, que é o seguinte, preciso que o link (a) dentro do item (li), seja um bloco, onde ao passar o mouse ele não ocupe apenas a área do texto.

já estou ouvindo várias vozes dizendo, zigolin, é só colocar uma largura e altura na tag a que o link vai aumentar e consequentemente o li também, certo?

e agora outras vozes lá no final dizem, cara basta vc colocar o display:block e padding para ambos os lados que a tag a vai aumentar e consequentemente o li também, certo?

li {float:left;display:inline;}
li a {display:block;padding:5px 15px;}

reparem que ao passar o mouse nos links em qualquer navegador de verdade, a área sensível ocupa todo o bloco, porém no ieca 6, apenas a área do texto fica como área de link.

a solução

molezinha, basta colocar position:relative na tag (a), que ele volta a se comportar como um bloco e ocupar toda a sua área que vc definiu usando o padding e o display… ;-P

(medonho não, também achei, mas essas simples regras padrões do css resolveram um problema escroto demais, pois se não fosse dessa forma, eu teria que setar por js a largura e altura de cada elemento que fosse dinâmico…)

então galera, ficou assim…

li {float:left;display:inline;}
li a {display:block;padding:5px 15px;position:relative;}

espero que isso ajude, fiz vários testes aqui para a nova barra e funcionou perfeitamente, e também com o mesmo problema que o vinícius estava em um menu, que também rolou na boa!!!

vlw galera… abraaaaaaço

• Modificado em: 24/07/2009
• Seção: bugs, css, destaques, globo.com