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