Añadir enlace en cuadro con DIV

[damian.adriel]

Hola Amigos:
Mi duda es la siguiente. Tengo un cuadro de un color, el mismo contiene texto dentro.
Lo que quiero es que todo este cuadro tenga un Link, que no haya que estar necesariamente sobre el texto para ir al link.
se entiende?
Gracias de antemano.

[ElJavista]

Si, eso es posible con JavaScript y una pizca de CSS, el código es de lo más simple:

<div onClick="window.location.replace('enlace.html')" style="cursor: pointer">
contenido
</div>

[damian.adriel]

muchas gracias. problema resuelto :)

[David]

Me alegra que se haya soucionado, gracias al aporte de ElJavista, que por cierto suele poner respuestas muy acertadas.

También hay una alternativa a usar Javascript, y sería envolver el div con el tag <a>:

Código html:

<a href="pagina.html"><div style="cursor: pointer"></div></a>
 

[ElJavista]

Es cierto, esa solución es mejor, no me acordaba que mediante la etiqueta <a> podia abarcar cualquier cosa. (Eso creo).

[jseros]

En realidad si dentro de una etiqueta <a> pongo más de un elemento, lo que hace el navegador es duplicarla y ponerla en cada uno de esos elementos.

Por ejemplo:

Código HTML:

<a href="mipagina.html">
    <div>Hola</div>
   <span>Mundo!</span>
</a> 

Lo que en realidad está sucediendo es esto:

Código HTML:

<a href="mipagina.html">
    <div>Hola</div>
</a>
<a href="mipagina.html">
   <span>Mundo!</span>
</a> 

Saludos.

[JavierB]

Hola a todos.

Un elemento de bloque (<div>) no debe ir dentro de un elemento en línea (<a>)

Saludos,

[ElJavista]

Iniciado por JavierB

Hola a todos.

Un elemento de bloque (<div>) no debe ir dentro de un elemento en línea (<a>)

Saludos,

Por qué no? es una especificación?

[Mikmoro]

Sí, es una especificación del xhtml estricto: los elementos de línea no deben contener elementos de bloque.

[ElJavista]

Ya veo, tiene sentido, entonces mi solución es la correcta.

[Mikmoro]

Tu forma es correcta, y también existe una bastante sencilla sólo con css si el cuadro tiene dimensiones establecidas:

HTML:

<div class="enlace">
<a href="#">contenido</a>
</div>

CSS:

.enlace {width: 100px; height: 100px;}
.enlace a {width: 100%; height: 100%; display: block;}

Claro, depende de si el cuadro tenía más cosas dentro o no.

[David]

Iniciado por JavierB

Un elemento de bloque (<div>) no debe ir dentro de un elemento en línea (<a>)

Interesante, ¿no hay una alternativa a usar Javascript o CSS entonces? .

[America|UNK]

La solución de Mikmoro es la mejor, tiene mas espacio pero vamos que es el más válido.

[Mikmoro]

Iniciado por David el Grande

Interesante, ¿no hay una alternativa a usar Javascript o CSS entonces? .

No entiendo tu pregunta: un enlace es un enlace y un cuadro es un cuadro.

Si quieres que un enlace parezca un cuadro, entonces le pones display:block y le das medidas height y width, o bien darle tamaño con padding.

O puedes poner dentro del enlace un span y darle tamaño con padding o display block. Pero vamos, que sin css una caja es una caja y un enlace un enlace.

No sé si me explico.

[David]

Muy bien, Mikmoro . Se me había olvidado la posibilidad de darle estilos al enlace para que parezca una caja. Y básicamente es lo que habías hecho con tu código (lo siento, no lo había leído ), ocupar todo el div con el enlace.

La verdad es que nunca necesité usarlo, solo preguntaba por curiosidad, porque no me parece correcto usar Javascript solo para enlazar.

[Mikmoro]

Sí, imaginaba que era sólo por curiosidad, pero al leer tu pregunta

¿no hay una alternativa a usar Javascript o CSS entonces?

he pensado: "¿sin Javascript ni CSS?". Entonces he visualizado en mi cabeza el html sin css y he visto: sin css un enlace solo es un enlace, y nunca puede parecer una caja. A eso te respondía.