Foros del Web » Creando para Internet » CSS »

duda con enlace

Estas en el tema de duda con enlace en el foro de CSS en Foros del Web. Buenas, tengo una capa que posee una imagen y un texto y me gustaría que todo fuera un vinculo en el cual al pasar el ...
  #1 (permalink)  
Antiguo 02/04/2011, 15:19
 
Fecha de Ingreso: octubre-2008
Mensajes: 14
Antigüedad: 9 años, 2 meses
Puntos: 0
duda con enlace

Buenas, tengo una capa que posee una imagen y un texto y me gustaría que todo fuera un vinculo en el cual al pasar el ratón por encima de la capa que el texto cambiara de color...

En lo que tengo hecho solo se cambia cuando paso por encima del texto:

HTML:

<div class="apartados_home_elemento">
<img src="img/portada-grafico.jpg" alt="portada diseño grafico" />
<table class="tabla" width="170" cellspacing="0" cellpadding="0">
<tr>
<td><img src="img/icono-grafico.jpg" alt="icono diseño grafico" /></td>
<td class="elemento_texto1"><a href="diseno-grafico.html"><strong>Diseño gráfico</strong></a></td>
</tr>
</table>
</div>


CSS:

.apartados_home_elemento{ width:180px; display:inline-block; margin-right:80px;}
.elemento_texto1{ font-family: Verdana, Geneva, sans-serif; font-size: 10px; color:#FFF; line-height:14px; background-color:#000;}
.elemento_texto1 a:hover{color:#2EAADC;}


He intentado hacerlo insertando la etiqueta "<a...>de muchas formas y estoy por pensar que no se puede hacer...

¿Alguien me puede ayudar?

¡Muchas gracias!
  #2 (permalink)  
Antiguo 02/04/2011, 16:03
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 6 años, 9 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
  #3 (permalink)  
Antiguo 02/04/2011, 19:15
 
Fecha de Ingreso: octubre-2008
Mensajes: 14
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: duda con enlace

Gracias por responder!

Por lo que he visto a ti si que te sale en el ejemplo que has mandado, pero cuando intento aplicarlo a lo mio no me sale...

Tal vez sea porque tengo una tabla o porque sean elementos inline, no lo se...

Intentaré ver si puedo hacerlo de otra manera... lo de insertar la etiqueta "a" envolviendo a la capa no me ha funcionado tampoco, pero si no va a ser un código válido entonces no me va a servir esa idea, jejeje!

Si pudieras conseguir que funcionara en el código que he enviado mio me lo haces saber

Muchas gracias!

Etiquetas: enlace
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:01.