Definir link no item principal

para o efeito de over/out você não precisa de um link, já que da para fazer esse efeito com javascript.

agora, se o box inteiro precisar ser clicável, ai eu consideraria, posicionar o link absolutamente por cima de todo o box.

ou setar o display do link como block e definir altura e largura como 100%;

O box inteiro precisa ser clicável, não é apenas por causa do efeito, é um link mesmo! A dúvida é que utilizo uma img, um título e uma breve descrição em cada box, seria algo como <a> <img><h2><p> </a>, só que não é correto utilizar elementos nível de bloco dentro de elementos inline, então fiz dessa forma e me corrijam se estiver errado:

<ul>
 <li><a href=""><img src="" /> <span class="title">Title1</span> <span class="desc">Description1</span> </a></li>
 <li><a href=""><img src="" /> <span class="title">Title2</span> <span class="desc">Description2</span> </a></li>
 <li><a href=""><img src="" /> <span class="title">Title3</span> <span class="desc">Description3</span> </a></li>
 <li><a href=""><img src="" /> <span class="title">Title4</span> <span class="desc">Description4</span> </a></li>
</ul>

ul li a {

 display: block;

 height: 100%;

 width: 100%;

}

hum... e a semântica vai pro saco ne?! ^_^

eu queria sugerir algo assim:

<ul>
 <li><img src="" /> <h3>Title1</h3> <p>Description1</p> <a href=""></a></li>ai você pega, dá o block no <a>, e posiciona ele absolutamente por cima de tudo, tendo como referencial a caixa <li>

Ok, tks! Mas a forma como montei está correta?

Att.

Edit, inda não tinha visto seu post...

Ok, semanticamente correto. O probelma é fazer isso funcionar no IE6...

? :huh:

não vi nada ai, que vá dar problema no ie6...

coloca ai como você tentou.

ah, lógico que o valor do '<a>', não pode ser algo nulo... coloca algo ali.. um espaço, um 'blank.gif' http://forum.imasters.com.br/public/style_emoticons/default/ermm.gif (sem pedras por favor)

Depois de algumas tentativas, pode ser que tenha errado em algo, mas veja como ficou:

ul {

	list-style:none;
}

	width:200px;
	height:80px;
	background:#ccc;
}

	border:none;
}

	float:left;
}

	width:200px;
	height:80px;
	display:block;
	position:absolute;
}

<ul>
 <li><img src="img1.gif" width="80" height="80" />
 <h2>Title1</h2>
 <p>Description1</p>
 <a href=""><img src="_blank.gif" width="1" height="1" /></a></li>
.....

Att.

ie6 não rola o hover, pq ele só reconhece :hover na tag a. Por isso que eu lhe disse, para fazer o over/out com javascript

o problema dos links estarem no lugar errado, é que você não deu contexto de posicionamento, no <li>

estude sobre a propriedade position

javascript por javascript, mantenha a semântica, dê adeus à tag <a> e transforme os itens de lista em atalhos u.u. Claro, deixe um trecho - sugiro o título da imagem - como atalho, para fins de acessibilidade (leitores de tela e noscripts)

William, muito obrigado pela atenção. Agora estou a definir posição absoluta para o elemento "a" e margens bottom/right = "0" e o elemento "li" com posição relativa. Só mesmo o "over" que vou precisar fazer com js como indicou para que funcione no IE6.

Att.

Edit: Evandro, obrigado também pela força e dica.

>
javascript por javascript, mantenha a semântica, dê adeus à tag <a> e transforme os itens de lista em atalhos u.u.

ai fica legal, mas perde acessibilidade ne?!

se desativer o js, cadê de conseguir seguir o link ?

mas seria muito simples fazer o <li> inteiro virar um 'link' com js ^_^