um link href para toda a div em HTML / CSS

Aqui está o que estou tentando realizar em HTML / CSS:

Tenho imagens em diferentes alturas e larguras, mas todas elas têm menos de 180x235. Então, o que eu quero fazer é criar um divcom bordere vertical-align: middletodos eles. Eu fiz isso com sucesso, mas agora estou preso em como vincular corretamente um href ao todo div.

Aqui está o meu código:

<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
    <div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
        <img src="myimage.jpg" height="62" width="180">
    </div>
</div>

Observe que, para copiar e colar aqui facilmente, o código de estilo está embutido.

Eu li em algum lugar que eu posso simplesmente adicionar outra div pai sobre o código e depois fazer um href dentro disso. No entanto, com base em algumas pesquisas, não será um código válido.

Então, para resumir novamente, preciso que todo o div ( #parentdivimage) seja um link href.

ATUALIZAÇÃO 10/06/2014: o uso de div dentro de a é semanticamente correto no HTML5.

Você precisará escolher entre os seguintes cenários:

<a href="http://google.com">
    <div>
        Hello world
    </div>
</a>

que é semanticamente incorreto, mas funcionará.

<div style="cursor: pointer;" onclick="window.location='http://google.com';">
    Hello world
</div>

que é semanticamente correto, mas envolve o uso de JS.

<a href="http://google.com">
    <span style="display: block;">
        Hello world
    </span>
</a>

que é semanticamente correto e funciona como esperado, mas não é mais uma div.

Por que você não retira o <div>elemento e o substitui por um <a>? Só porque a tag âncora não é uma div, não significa que você não pode estilizá-la display:block, como altura, largura, plano de fundo, borda etc. Você pode fazer com que pareça uma div, mas ainda age como um link. Então você não depende de código ou JavaScript inválido que pode não estar ativado para alguns usuários.

Faça isso deste modo:

A imagem dos pais deve ter largura e altura especificadas e sua posição deve ser:

position: relative;

Dentro da imagem pai, ao lado de outras divs que o pai contém, você deve colocar:

<a href="linkt.to.smthn.com"><span class="clickable"></span></a>

Em seguida, no arquivo css:

.clickable {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;     
  z-index: 1;
}

A tag span preencherá seu bloco pai, que é parentdiv, devido à altura e largura definidas como 100%. A extensão estará no topo de todos os elementos circundantes devido à configuração do índice z mais alto do que outros elementos. Finalmente, o span será clicável, porque está dentro de uma tag 'a'.

Duas coisas que você pode fazer:

1. Mude #childdivimagepara um spanelemento e mude #parentdivimagepara uma marca de âncora. Isso pode exigir que você adicione um pouco mais de estilo para deixar as coisas perfeitas. Isso é preferido, pois usa marcação semântica e não depende de javascript.

2. Use Javascript para vincular um evento de clique #parentdivimage. Você deve redirecionar a janela do navegador modificando window.locationdentro deste evento. Este é o TheEasyWay ^TM , mas não será degradado normalmente.

Seguindo o que a Surreal Dreams disse, provavelmente é melhor estilizar a marca âncora na minha experiência, mas isso realmente depende do que você está fazendo. Aqui está um exemplo:

Html:

<div class="parent-div">
  <a href="#">Test</a>
  <a href="#">Test</a>
  <a href="#">Test</a>
</div>

Então o CSS:

.parent-div {
  width: 200px;
}
a {
  display:block;
  background-color: #ccc;
  color: #000;
  text-decoration:none;
  padding:10px;
  margin-bottom:1px;
}
a:hover {
  background-color: #ddd;
}

http://jsbin.com/zijijuduqo/1/edit?html,css,output

Faça o divde id="childdivimag"uma spanvez, e dispor que em um aelemento. Como os elementos spane imgsão in-line por padrão, isso permanece válido, enquanto a divé um elemento no nível do bloco e, portanto, uma marcação inválida quando contida em um a.

coloque display:blocko elemento de ancoragem. e / ou zoom:1;

mas você realmente deveria fazer isso.

a#parentdivimage{position:relative; width:184px; height:235px; 
                 border:2px solid #000; text-align:center; 
                 background-image:url("myimage.jpg"); 
                 background-position: 50% 50%; 
                 background-repeat:no-repeat; display:block; 
                 text-indent:-9999px}

<a id="parentdivimage">whatever your alt attribute was</a>

O que eu faria é colocar uma extensão dentro da <a>tag, definir a extensão para bloquear e adicionar tamanho à extensão, ou simplesmente aplicar o estilo à <a>tag. Definitivamente, manipule o posicionamento no <a>estilo da tag. Adicionar um onclick eventao a whereJavaScript capturará o evento e, em seguida, retornará false no final do evento do JavaScript para impedir a ação padrão hrefe a intermitência do clique. Isso funciona em casos com ou sem o JavaScript ativado, e qualquer AJAX pode ser tratado no ouvinte Javascript.

Se você estiver usando jQuery, poderá usá-lo como seu ouvinte e omitir o onclickna atag.

$('#idofdiv').live("click", function(e) {
    //add stuff here
    e.preventDefault; //or use return false
}); 

isso permite anexar ouvintes a qualquer elemento alterado, conforme necessário.

Um link com <div>tags:

<div style="cursor: pointer;" onclick="window.location='http://www.google.com';">
     Something in the div 
</div>

Um link com <a>tags:

<a href="http://www.google.com">
    <div>
        Something in the div 
    </div>
</a>

Isso pode ser feito de várias maneiras. uma. Usando aninhado dentro de uma tag.

<a href="link1.html">
   <div> Something in the div </div>
 </a>

b. Usando o método JavaScript embutido

<div onclick="javascript:window.location.href='link1.html' "> 
  Some Text 
</div>

c. Usando a tag jQuery inside

HTML:

<div class="demo" > Some text here </div>

jQuery:

$(".demo").click( function() {
  window.location.href="link1.html";
 });