Foros del Web » Creando para Internet » HTML »

Añadir enlace en cuadro con DIV

Estas en el tema de Añadir enlace en cuadro con DIV en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/09/2008, 18:50
Avatar de damian.adriel  
Fecha de Ingreso: junio-2007
Mensajes: 35
Antigüedad: 10 años, 6 meses
Puntos: 0
Añadir enlace en cuadro con DIV

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.
  #2 (permalink)  
Antiguo 20/09/2008, 18:55
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Añadir enlace en cuadro con DIV

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>
  #3 (permalink)  
Antiguo 20/09/2008, 19:05
Avatar de damian.adriel  
Fecha de Ingreso: junio-2007
Mensajes: 35
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: Añadir enlace en cuadro con DIV

muchas gracias. problema resuelto :)
  #4 (permalink)  
Antiguo 20/09/2008, 19:56
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
De acuerdo Respuesta: Añadir enlace en cuadro con DIV

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:
Ver original
  1. <a href="pagina.html"><div style="cursor: pointer"></div></a>
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #5 (permalink)  
Antiguo 20/09/2008, 20:05
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Añadir enlace en cuadro con DIV

Es cierto, esa solución es mejor, no me acordaba que mediante la etiqueta <a> podia abarcar cualquier cosa. (Eso creo).
  #6 (permalink)  
Antiguo 20/09/2008, 23:20
Avatar de jseros  
Fecha de Ingreso: agosto-2008
Ubicación: Bogotá
Mensajes: 218
Antigüedad: 9 años, 3 meses
Puntos: 18
Respuesta: Añadir enlace en cuadro con DIV

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.
  #7 (permalink)  
Antiguo 21/09/2008, 03:25
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Respuesta: Añadir enlace en cuadro con DIV

Hola a todos.

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

Saludos,
  #8 (permalink)  
Antiguo 21/09/2008, 10:28
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Añadir enlace en cuadro con DIV

Cita:
Iniciado por JavierB Ver Mensaje
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?
  #9 (permalink)  
Antiguo 21/09/2008, 16:13
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Añadir enlace en cuadro con DIV

Sí, es una especificación del xhtml estricto: los elementos de línea no deben contener elementos de bloque.
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 21/09/2008, 16:28
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Añadir enlace en cuadro con DIV

Ya veo, tiene sentido, entonces mi solución es la correcta.
  #11 (permalink)  
Antiguo 21/09/2008, 16:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Añadir enlace en cuadro con DIV

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.
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 23/09/2008, 15:31
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Pregunta Respuesta: Añadir enlace en cuadro con DIV

Cita:
Iniciado por JavierB Ver Mensaje
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? .
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #13 (permalink)  
Antiguo 23/09/2008, 15:54
Avatar de America|UNK  
Fecha de Ingreso: noviembre-2006
Ubicación: Piura - Perú
Mensajes: 582
Antigüedad: 11 años
Puntos: 56
Respuesta: Añadir enlace en cuadro con DIV

La solución de Mikmoro es la mejor, tiene mas espacio pero vamos que es el más válido.
__________________
/* El que atiende, entiende..., el que entiende, aprende!.
Desarrollo Web Freelance, Contactar */
  #14 (permalink)  
Antiguo 23/09/2008, 16:56
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Añadir enlace en cuadro con DIV

Cita:
Iniciado por David el Grande Ver Mensaje
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.
__________________
Visita mi nueva web idplus.org
  #15 (permalink)  
Antiguo 23/09/2008, 17:07
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
De acuerdo Respuesta: Añadir enlace en cuadro con DIV

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.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #16 (permalink)  
Antiguo 23/09/2008, 17:19
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Añadir enlace en cuadro con DIV

Sí, imaginaba que era sólo por curiosidad, pero al leer tu pregunta
Cita:
¿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.
__________________
Visita mi nueva web idplus.org
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 03:29.