fazer da div um link

[Annyh 4]

ola pessoal,

 

gostaria de saber como fazer da div um link..

 

tipo, toda ela ser clicavel.

 

valeu.

[wdc_black_ 0]

<a href="#" style="display:block;"><div style="width:100px;height:100px;background-color:#000;"></div></a>

 

;)

[Annyh 4]

mas, não é semântico e no validador não vai passar, pois div dentro de <a>...??

[Evandro Oliveira 331]

exatamente. Exceto para HTML5 (por enquanto).

 

Mas a resposta dele não está de todo errada. Você pode alterar a propriedade display do a para o valor block para fazer com que este se comporte como uma div. Deste modo, torna-se possível manipular sua largura e altura. Não se torna possível adicionar elementos de bloco, como sugerido, pois HTML e CSS independem entre si.

 

<a href="#">O plano de fundo deste link mostra a funcionalidade do efeito</a>

 

a { display: block; height: 50px; width: 100px; }

 

 

[wdc_black_ 0]

vlw evandro, realmente nunca tinha testado somente alterando o display para block da tag a...

;)

abraço

[Annyh 4]

mas veja só meu código:

 

eu quero que a div descricao-va-hover seja toda linkada, pois estou usando um jquery para criar um efeito que quanto passa o mouse na div ele mostra os detalhes do assunto

 

<div id="descricao-va">          
         <div id="descricao-va-sobrepor"></div>
         <div id="descricao-va-hover">            
           <h1>Criando uma função útil com PHP</h1>
           <p>Uma função é um bloco de código que executa uma determinada tarefa, possivelmente baseado em um conjuntos de valores fornecidos,</p>
           <p>16 mar 2011 | 152 visitas | <a href="#" title="Categoria: PHP">PHP</a> | <a href="#" title="03 Comentários">3 comentários</a></p>            
         </div>
       </div>  

 

entendeu?!

 

por isso penso que não posso usar o display:block no link "<a href="#"></a>"...

[Evandro Oliveira 331]

Sinceramente, tem como 'desenhar' ??

Você pode adicionar um span dentro do a e fazer o estado a:hover exibir o span como block.

[Annyh 4]

olha agora pra ver se você entende:

 

Imagens de exemplo

[Evandro Oliveira 331]

olha agora pra ver se você entende:

 

Imagens de exemplo

 

Já que está utilizando Javascript, torne a div clicável com o mesmo

 

 

 

 

 

<ul id='sliders'>

<li><h1><a href='link' title='visitar'>Título da notícia</a></h1>

<p class='descricao'>lorem ipsum dolor sit amet...</p>

<p><span class='data'>23 Abr 2011</span> | <span class='visitas'>99 visitas</span> | <a href='php' class='categoria'>PHP</a> | <a href='comentarios' class='comentarios'>99 comentários</a></p>

</li>

</ul>

 

$('#sliders li').click(function(){ 

   $('h1 a', this).click();

}

 

 

[Annyh 4]

mas onde coloco a url de destino?...

[Annyh 4]

e não tem como fazer só com HTML?

[Evandro Oliveira 331]

mas onde coloco a url de destino?...

 

Lugar nenhum. O evento click na div chama o evento click do respectivo link

 

 

 

 

e não tem como fazer só com HTML?

 

Tem, sobreposição de camadas. Posicionamentos relativos e absolutos. Não recomendo pela presença dos links da categoria e comentários. Mas se desejar mesmo assim, me avise que posto um esboço