Hacer que todo el div sea un enlace

[Darwinformatico]

Primero agradecer por las respuestas que me han brindado los compañeros del foro, y tmb thnks por la paciencia otorgada a este noob xD

Entrando en materia: quisiera saber como hacer para que todo el espacio que ocupa un div sea un enlace.

mi caso es: tengo un div en el cual pongo de background una imagen la cual dibuja tres diferentes secciones de mi sitio, puse un div de posicion absoluta sobre cada una de estas partes de mi imagen; quisiera que estos divs llevaran a las otras secciones del sitio, para esto he puesto:

<div id="seccion1"><li><a href="#">&nbsp;</a></li>
</div>
<div id="seccion2"><li><a href="../icontacto.html">&nbsp;</a></li>
</div>
<div id="seccion2"><li><a href="#">&nbsp;</a></li>
</div>

con esto solo consigo que los espacios en blanco hagan de enlace pero no todo el espacio del div

tambien probé utilizando la propiedad

cursor:pointer;

en cada uno de los estilos de los divs pero como sabrán, esto solo cambia el cursor pero no hace de todo el espacio un link, ¿Como lograrlo?

[Mikmoro]

¿Los divs tiene tamaño fijo?

En ese caso, lo puedes hacer poniendo en tu css:

a {display: block; width: 100%; height: 100%;}

De todas maneras, no deberías usar elementos de lista (li) sin estar dentro de una lista (ul, ol)

[Darwinformatico]

No me di cuenta hasta que me boto el validador, gracias mikmoro es que a veces me agobio hejhejhe

otra vez gracias por el dato elimine los <li>

añadi el display block y todo quedo perfecto

aun no entiendo muy bien la propiedad display leere algo mas a respecto gracias!

[kok]

<a><div> ... </div></a>

[JavierB]

Hola kok

El código que has puesto es totalmente incorrecto. Un elemento de bloque no puede ir dentro de un elemento en línea.

Saludos,

[talmente]

mira esto:

.li {
padding: 20px;
border: 1px dotted #000000;
display: block;
}

a {
background: #009966;
}
a:hover {
background: #0099cc;
}


Con esto:

<ul>
<li><a href="#" class="li">el texto</a></li>
</ul>

[Fuzzylog]

Se me ocurre que el <ul> y el <li> generan margenes con respecto al <div> que no consideras después en el enlace <a>.

Por ello deberías darle margin-left (o padding-left) si eso no va con valor 0 a <ul> y a <li>, y luego hacer un <a> que tenga el margin-left adecuado para que el texto o la imagen del enlace comience donde estaba antes.

Un saludo.

[PedroDesing]

¿Los divs tiene tamaño fijo?

En ese caso, lo puedes hacer poniendo en tu css:

a {display: block; width: 100%; height: 100%;}

Una vez que tengo el a con el display:block, ya puedo meter el div dentro??? o no?

Entiendo lo que hace el codigo, pero no se como ponerlo en el caso que me ocupa. Tengo un div con cierto padding, un h3 seguido de un img y un p. quiero que todo sea un enlace para que al pasar el raton por encima, cambie el color de fondo y pueda acceder a los contenidos con un clic en cualquier parte del color de fondo.


http://img695.imageshack.us/img695/3209/divs.png

Alguna idea???

Gracias!!!!

[IsaBelM]

Iniciado por PedroDesing

Una vez que tengo el a con el display:block, ya puedo meter el div dentro??? o no?

Iniciado por JavierB

Un elemento de bloque no puede ir dentro de un elemento en línea.

Iniciado por PedroDesing

Entiendo lo que hace el codigo, pero no se como ponerlo en el caso que me ocupa. Tengo un div con cierto padding, un h3 seguido de un img y un p. quiero que todo sea un enlace para que al pasar el raton por encima, cambie el color de fondo y pueda acceder a los contenidos con un clic en cualquier parte del color de fondo.

ya llevas unos cuantos mensajes como para saber que no hay que revivir temas antiguos. los lenguajes y los navegadores evolucionas y lo que hace unos años era correcto, hoy en día puede que esté obsoleto o haya una manera mas simple de hacerlo

con respecto a lo que te ocupa y como sabes el alto del contenedor

.contenedor a {position: absolute; width: 100%; height: 400px;}

<div class="contenedor">
<a href="#"></a>
<h3>enunciado</h3>
<img src="img.png" />
<p>texto</p>
</div>

[PedroDesing]

1) Perdón por lo del hilo antiguo, tienes razón.

2) Para que es necesario el position absolute???

Muchas gracias :)

[IsaBelM]

para que de esa manera tome las dimensiones que se le da. añádele un fondo y cambia el valor de position, verás que no toma las dimenensiones

[PedroDesing]

el h3 y el p son elementos de bloque?? dará problemas de validación al estar incluidos dentro del a?

[IsaBelM]

has mirado tan siquiera el html?? donde ves que los elementos de bloque estén contenidos por el elemento de línea??

[PedroDesing]

joder, sí que lo había mirado, pero se ve que no muy bien...

Gracias.