Foros del Web » Creando para Internet » CSS »

div que no se comporta como enlace

Estas en el tema de div que no se comporta como enlace en el foro de CSS en Foros del Web. Hola a todos: Veran, mi problema es que tengo un div con unos elementos de imagen y párrafo y quiero que cuando se pulse encima ...
  #1 (permalink)  
Antiguo 17/01/2011, 05:43
 
Fecha de Ingreso: marzo-2005
Mensajes: 149
Antigüedad: 12 años, 9 meses
Puntos: 0
div que no se comporta como enlace

Hola a todos:

Veran, mi problema es que tengo un div con unos elementos de imagen y párrafo y quiero que cuando se pulse encima de este div vaya a un enlace.

Lo que he conseguido a través de display:block es que se comporte como bloque solamente en dirección horizontal, pero no toma al div completo.

Este es el código:


Código CSS:
Ver original
  1. div.contenedor {
  2. width: auto;
  3. background-color: #EBF2FE;
  4. }
  5.  
  6. div.contenedor p {
  7. padding: 5px;
  8. color: #000FFF;
  9. width: auto;
  10.  
  11. }
  12.  
  13. div.contenedor a {
  14. width: auto;
  15. height: auto;
  16. text-decoration: none;
  17. display: block;
  18. }
  19. div.contenedor a:hover {
  20. width: auto;
  21. text-decoration: none;
  22. display: block;
  23.  
  24. }


Código HTML:
Ver original
  1. <div class="contenedor">
  2. <p>este es mi texto</p>
  3. <a href="index.php"><img src="imagen.jpg"></a>
  4. </div>

El div contenedor se tiene que comportar como un bloque para que al pulsar encima de cualquier área de éste nos lleve al enlace index.php

Muchas gracias
  #2 (permalink)  
Antiguo 17/01/2011, 07:27
Avatar de odiseus  
Fecha de Ingreso: enero-2011
Mensajes: 109
Antigüedad: 6 años, 11 meses
Puntos: 3
Respuesta: div que no se comporta como enlace

Código HTML:
 <div class="contenedor" onclick="document.location='index.php'">
      <p>este es mi texto</p>
      <a href="index.php"><img src="imagen.jpg"></a>
      </div> 
Un saludo
  #3 (permalink)  
Antiguo 17/01/2011, 07:43
 
Fecha de Ingreso: marzo-2005
Mensajes: 149
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: div que no se comporta como enlace

Gracias por la respuesta pero probando el código he observado que tampoco realiza este comportamiento.

Por cierto, es javascript, y preferentemente lo busco con css.

De todas formas gracias.

Hay alguien que pueda ayudarme?
  #4 (permalink)  
Antiguo 17/01/2011, 07:58
Avatar de odiseus  
Fecha de Ingreso: enero-2011
Mensajes: 109
Antigüedad: 6 años, 11 meses
Puntos: 3
Respuesta: div que no se comporta como enlace

Si que hace ese comportamiento, lo que te hace es ir a la pagina que tu le pones y con css no vas a poder hacerlo a no ser que transformes el elemento "a" en un bloque
  #5 (permalink)  
Antiguo 17/01/2011, 08:02
Avatar de odiseus  
Fecha de Ingreso: enero-2011
Mensajes: 109
Antigüedad: 6 años, 11 meses
Puntos: 3
Respuesta: div que no se comporta como enlace

Código HTML:
 <div class="contenedor" onclick="document.location='index.php'">
      <p>este es mi texto</p>
      <a href="index.php"><img src="imagen.jpg"></a>
      </div> 

Olvidate del div y pon el <p> dentro del <a>

Código HTML:
<a href="index.php" style="display:block">
<p>este es mi texto</p>
<img src="imagen.jpg">
</a> 
  #6 (permalink)  
Antiguo 17/01/2011, 12:30
 
Fecha de Ingreso: marzo-2005
Mensajes: 149
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: div que no se comporta como enlace

Ahora si!!

Muchas gracias, era el efecto que buscaba.
A veces uno se cega con css y la solución estaba en html.
  #7 (permalink)  
Antiguo 17/01/2011, 12:46
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: div que no se comporta como enlace

display:block te garantiza que el elemento con esa propiedad tenga el ancho de su contenedor, no el alto.
Yo suelo utilizar un ancho y alto predeterminados para el contenedor.
Al contenedor le doy posición relativa y al enlace posicion absoluta.
La imagen la coloco como una regla CSS para el enlace mediante background-image posicionándola en el lugar adecuado.
El enlace suele adaptarse al tamaño del contenido, por lo que uso una imagen transparente dentro del mismo a la que le doy el mismo tamaño del contenedor.

Es otra manera de hacerlo, no la única.
  #8 (permalink)  
Antiguo 18/01/2011, 01:19
Avatar de odiseus  
Fecha de Ingreso: enero-2011
Mensajes: 109
Antigüedad: 6 años, 11 meses
Puntos: 3
Respuesta: div que no se comporta como enlace

Formas las hay mil para hacer las cosas, solo tienes que tener un poco de imaginación, conocimientos y experiencia

Un saludo!

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:13.