Un enlace href para div completo en HTML / CSS

Esto es lo que estoy tratando de lograr en HTML / CSS:

Tengo imágenes en diferentes alturas y anchos, pero todas tienen menos de 180x235. Entonces, lo que quiero hacer es crear un divcon bordery vertical-align: middletodos ellos. Lo he hecho con éxito, pero ahora estoy atrapado en cómo vincular todo href correctamente div.

Aquí está mi 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>

Tenga en cuenta que por el simple hecho de copiar y pegar aquí, el código de estilo está en línea.

Leí en alguna parte que simplemente puedo agregar otro div padre encima del código y luego hacer un href dentro de eso. Sin embargo, según algunas investigaciones, no será un código válido.

Entonces, para resumirlo nuevamente, necesito que todo el div ( #parentdivimage) sea un enlace href.

ACTUALIZACIÓN 10/06/2014: el uso de div dentro de a es semánticamente correcto en HTML5.

Tendrá que elegir entre los siguientes escenarios:

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

lo cual es semánticamente incorrecto, pero funcionará.

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

lo cual es semánticamente correcto pero implica el uso de JS.

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

que es semánticamente correcto y funciona como se esperaba, pero ya no es un div.

¿Por qué no quitas el <div>elemento y lo reemplazas con un <a>en su lugar? El hecho de que la etiqueta de anclaje no sea un div no significa que no pueda darle estilo display:block, altura, ancho, fondo, borde, etc. Puede hacer que se vea como un div pero seguir actuando como un enlace. Entonces no confía en un código no válido o JavaScript que puede no estar habilitado para algunos usuarios.

Hazlo asi:

Parentdivimage debe tener ancho y alto especificados, y su posición debe ser:

position: relative;

Justo dentro de la imagen principal, junto a otros div que contiene el padre, debe poner:

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

Luego en el archivo css:

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

La etiqueta span completará su bloque padre, que es parentdiv, debido a que la altura y el ancho están establecidos en 100%. El intervalo estará en la parte superior de todos los elementos circundantes debido a que el índice z es más alto que otros elementos. Finalmente, se podrá hacer clic en el intervalo, porque está dentro de una etiqueta 'a'.

Dos cosas que puedes hacer:

1. Cambiar #childdivimagea un spanelemento y cambiar #parentdivimagea una etiqueta de anclaje. Esto puede requerir que agregue más estilo para que las cosas se vean perfectas. Esto se prefiere, ya que utiliza marcado semántico y no se basa en javascript.

2. Use Javascript para vincular un evento de clic #parentdivimage. Debe redirigir la ventana del navegador modificando window.locationdentro de este evento. Este es TheEasyWay ^TM , pero no se degradará con gracia.

Saliendo de lo que dijo Surreal Dreams, probablemente sea mejor diseñar la etiqueta de anclaje en mi experiencia, pero realmente depende de lo que esté haciendo. Aquí hay un ejemplo:

HTML:

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

Entonces el 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

Haz el divde id="childdivimag"a spanen su lugar y envuélvelo en un aelemento. Como los elementos en línea spany imgson por defecto, esto sigue siendo válido, mientras que a dives un elemento de nivel de bloque y, por lo tanto, un marcado no válido cuando está contenido dentro de un a.

poner display:blockel elemento de anclaje. y / ozoom:1 ;

pero realmente deberías hacer esto.

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>

Lo que haría es poner un espacio dentro del <a> etiqueta, configurar el espacio para bloquear y agregar tamaño al espacio, o simplemente aplicar el estilo a la <a>etiqueta. Definitivamente manejar el posicionamiento en el <a>estilo de etiqueta. Añadir una onclick evental a whereJavaScript cogerá el caso, entonces falsa volver al final del evento JavaScript para impedir la acción predeterminada de la hrefy el burbujeo del clic. Esto funciona en casos con o sin JavaScript habilitado, y cualquier AJAX puede manejarse en el escucha de Javascript.

Si está usando jQuery, puede usar esto como su oyente y omitir el onclick en la aetiqueta.

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

esto le permite adjuntar oyentes a cualquier elemento modificado según sea necesario.

Un enlace con <div>etiquetas:

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

Un enlace con <a>etiquetas:

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

Esto puede hacerse de muchas maneras. a. Usando anidado dentro de una etiqueta.

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

si. Usando el método JavaScript en línea

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

C. Usando jQuery dentro de la etiqueta

HTML:

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

jQuery:

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