div que no se comporta como enlace

[etanol]

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:

div.contenedor { 
width: auto; 
background-color: #EBF2FE; 
} 
 
div.contenedor p { 
padding: 5px; 
color: #000FFF;
width: auto; 
 
} 
 
div.contenedor a { 
width: auto; 
height: auto;
text-decoration: none;
display: block;
} 
div.contenedor a:hover { 
width: auto; 
text-decoration: none;
display: block;
 
}
 

Código HTML:

<div class="contenedor">
<p>este es mi texto</p>
<a href="index.php"><img src="imagen.jpg"></a>
</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

[odiseus]

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

[etanol]

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?

[odiseus]

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

[odiseus]

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> 

[etanol]

Ahora si!!

Muchas gracias, era el efecto que buscaba.
A veces uno se cega con css y la solución estaba en html.

[sanxuan]

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.

[odiseus]

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

Un saludo!