Ver Mensaje Individual
  #2 (permalink)  
Antiguo 02/04/2011, 15:03
Avatar de Naahuel
Naahuel
 
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años, 8 meses
Puntos: 192
Respuesta: duda con enlace

Lo que yo hacía cuando necesitaba hacer eso es usar el contenedor con position:relative y el <a> con position absolute y un ancho y alto del 100%. Algo así:

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <meta charset=utf-8 />
  3. <title>JS Bin</title>
  4.   <style type="text/css">
  5.     #caja-link{
  6.       position:relative;
  7.       padding-bottom:20px;
  8.       width:200px;
  9.       overflow:hidden;
  10.     }
  11.     #caja-link a{
  12.       color:black;
  13.       position:absolute;
  14.       left:0;
  15.       top:0;
  16.       width:200px;
  17.       height:20px;
  18.       text-align:center;
  19.       padding-top:200px;
  20.       line-height:20px;
  21.     }
  22.     #caja-link a:hover{
  23.       color:yellow;
  24.     }
  25.   </style>
  26. </head>
  27.   <div id="caja-link">
  28.     <img src="http://1.bp.blogspot.com/_ytXYaNtqQ4U/ST2QQLZ9EfI/AAAAAAAAAWk/Nr4GAkyXU2o/s200/homer-simpson.png" />
  29.     <a href="http://google.com">Google</a>
  30.   </div>
  31. </body>
  32. </html>

Claro que en ese ejemplo hay mas estilos, pero no son dificiles de entender :P
Mirá acá lo podés ver:
http://jsbin.com/acupu5

Otra cosa que podés hacer es simplemente envolver todo el bloque en los <a></a>. Eso no está realmente permitido pues los anchors son elementos inline y no pueden contener elementos de bloque. Aún así funciona. Esto si está permitido en HTML5.
__________________
nahueljose.com.ar