Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Div como enlace, con otro div dentro

Estas en el tema de Div como enlace, con otro div dentro en el foro de CSS en Foros del Web. Supongamos que tengo un div de 300 x 300 dentro tengo otro de 100 x 100 con una foto mas un texto algo asi Código ...
  #1 (permalink)  
Antiguo 25/02/2012, 04:09
Avatar de williamhpf  
Fecha de Ingreso: mayo-2009
Mensajes: 144
Antigüedad: 13 años, 2 meses
Puntos: 8
Pregunta Div como enlace, con otro div dentro

Supongamos que tengo un div de 300 x 300
dentro tengo otro de 100 x 100 con una foto
mas un texto
algo asi

Código PHP:
<div class="1">
<
div class="2"><img src="http://www.ejemplo.com/foto.jpg"></div>
<
a href="http://www.dondesea.com">Texto de enlace</a>
</
div
Mi pregunta es: si la imagen no estuviera dentro del div "2" con poner el enlace en bloque ya funciona, pero de esta forma la imagen no me la pilla como enlace.

Como se hace para que todo el div "1" sea un enlace ??
__________________
Electricistas 24 Horas
  #2 (permalink)  
Antiguo 25/02/2012, 12:28
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 15 años, 2 meses
Puntos: 539
Respuesta: Div como enlace, con otro div dentro

¿Hay alguna razón que le impida meter en el mismo enlace la imagen y el texto y así suprimir el segundo div?
Código HTML:
Ver original
  1. <a href="http://www.dondesea.com"><img src="http://www.ejemplo.com/foto.jpg" />Texto de enlace</a>

Sobre su código, breve pero...:
.- El nombre los selectores css (y tag en el html) no pueden ni deben comenzar por un numeral. Si lo hace, serán ignorados.
.- Desconozco el doctype que utiliza, pero curándome en salud, debería cerrar todo lo que abre. Fíjese en su etiqueta img y en cómo debería terminarla:
Código HTML:
Ver original
  1. foto.jpg" />
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 25/02/2012, 12:36
Avatar de williamhpf  
Fecha de Ingreso: mayo-2009
Mensajes: 144
Antigüedad: 13 años, 2 meses
Puntos: 8
Respuesta: Div como enlace, con otro div dentro

Hola, gracias por responder, he abierto otro tema explicando mejor, porque creo que aqui no dejo claro lo que quiero hacer, los numeros es solo para el ejemplo, al igual que las etiquetas de cierre.

En este post aclaro lo que quiero hacer, aqui creo que no se me entiende o no me supe explicar

Código PHP:
http://www.forosdelweb.com/f53/divs-bloque-978138/ 
__________________
Electricistas 24 Horas
  #4 (permalink)  
Antiguo 25/02/2012, 12:39
Avatar de williamhpf  
Fecha de Ingreso: mayo-2009
Mensajes: 144
Antigüedad: 13 años, 2 meses
Puntos: 8
Respuesta: Div como enlace, con otro div dentro

El texto de la imagen si lo dejo a continuacion de la imagen, como la imagen que se carga puede tener diferentes medidas se me descuadra el texto, me queda mas arriba o mas abajo y lo necesito siempre en el mismo lugar.
__________________
Electricistas 24 Horas
  #5 (permalink)  
Antiguo 25/02/2012, 12:41
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 15 años, 2 meses
Puntos: 539
Respuesta: Div como enlace, con otro div dentro

Creo que por su antigüedad en el foro debería saber que si algo no está ni bien visto ni permitido es duplicar temas.

Insisto, si quiere que una imagen y un texto sean a la vez un enlace, por semántica, por simplicidad y sencillez, por funcionalidad, por... (100 razones más) lo lógico es que ambos elementos (imagen y texto) sean el mismo enlace, compartiendo el mismo href="".

Lo que quiera hacer posteriormente a nivel visual sólo es cuestión de aplicarle estilos.

Esta última sí sería una consulta de css. La que planteó inicialmente es de html.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 25/02/2012, 12:44
Avatar de williamhpf  
Fecha de Ingreso: mayo-2009
Mensajes: 144
Antigüedad: 13 años, 2 meses
Puntos: 8
Respuesta: Div como enlace, con otro div dentro

Lo siento es que no se como borrar o editar temas, me llevo la bronca y con motivos lo se, imagen y texto comparten el mismo href, pero a nivel de como quiero hacerlo esteticamente con css con ambos en bloque, div + texto, como debo hacerlo?
__________________
Electricistas 24 Horas
  #7 (permalink)  
Antiguo 25/02/2012, 12:57
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 15 años, 2 meses
Puntos: 539
Respuesta: Div como enlace, con otro div dentro

Dejando de lado el tamaño dispar de las imágenes, que debería ser abordado en el diseño y planteamiento del sitio y en caso de ser necesario modificarlas mediante editor de imágenes o programación.
Lo mismo con el etiquetado html. Como se desconoce qué es, es imposible plantear cuál sería el marcado recomendable.
Pero para el texto aparezca al pie (debajo) de la imagen sólo tiene que declararla como elemento de bloque:
Código CSS:
Ver original
  1. a img {display: block;}
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 25/02/2012, 13:03
Avatar de williamhpf  
Fecha de Ingreso: mayo-2009
Mensajes: 144
Antigüedad: 13 años, 2 meses
Puntos: 8
Respuesta: Div como enlace, con otro div dentro

Gracias por resonder, eres muy amable.
Pero yo pregunto que hora es? y tu me respondes que mañana lloverá.

Por favor si puedes lee el otro post que igual no me has entendido lo que quiero hacer, el como se deberia haber hecho la web es lo que menos importa, tengo un problema puntual y no esta en los planes programar toda una web desde cero para solucionar un problema puntual, que seguramente se soluciona muy facilmente.

Saludos
__________________
Electricistas 24 Horas
  #9 (permalink)  
Antiguo 25/02/2012, 13:45
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 15 años, 2 meses
Puntos: 539
Respuesta: Div como enlace, con otro div dentro

Lo siento, pero no tengo capacidad de videncia. Por lo tanto mis dotes de adivino son, no ya escasas, sino totalmente nulas.

Ni en el otro tema ni en este se explica ni facilita la información mínima suficiente.
Debería ser más preciso al plantear sus dudas, acompañandolas con todo el código implicado (css+html) y una exposición clara, concisa y precisa.
Y si tiene dificultades en hacerlo así, un enlace a una página donde se muestre el problema tampoco está nunca de más.


Edito:
Aquí nos tiene a dos usuarios intentando ayudarle en dos temas distintos para la misma consulta y llegando a la misma conclusión.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #10 (permalink)  
Antiguo 25/02/2012, 13:50
Avatar de williamhpf  
Fecha de Ingreso: mayo-2009
Mensajes: 144
Antigüedad: 13 años, 2 meses
Puntos: 8
Respuesta: Div como enlace, con otro div dentro

Seguramente no me se explicar, como no puedo adjuntar imagenes igual no me explique bien, de todas formas el otro usuario ha subido una imagen, y creo que mi consulta ahora es mas clara en el otro post, gracias a ambos, seguro que al final solucionareis mi problema.

Gracias
__________________
Electricistas 24 Horas
  #11 (permalink)  
Antiguo 25/02/2012, 13:53
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 15 años, 1 mes
Puntos: 1567
Respuesta: Div como enlace, con otro div dentro

Cita:
Iniciado por kseso? Ver Mensaje
Edito:
Aquí nos tiene a dos usuarios intentando ayudarle en dos temas distintos para la misma consulta y llegando a la misma conclusión.
Me acabo se enterar(*) (un poco tarde parece) de la existencia de este post ...
Por la salud de Foro, me abstendré de otras observaciones, en el presente... y en el otro

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Última edición por emprear; 26/02/2012 a las 09:47 Razón: (*)entrar(incorrecto) x enterar(correcto)
  #12 (permalink)  
Antiguo 25/02/2012, 13:56
Avatar de williamhpf  
Fecha de Ingreso: mayo-2009
Mensajes: 144
Antigüedad: 13 años, 2 meses
Puntos: 8
Respuesta: Div como enlace, con otro div dentro

Ahora que he logrado explicarme me dejas asi?
__________________
Electricistas 24 Horas
  #13 (permalink)  
Antiguo 25/02/2012, 14:03
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 15 años, 2 meses
Puntos: 539
Respuesta: Div como enlace, con otro div dentro

Cita:
Iniciado por williamhpf Ver Mensaje
seguro que al final solucionareis mi problema.
Permítame que disienta. De su seguridad y de su pretensión de que terceros hagan su trabajo y solucionen sus problemas.
Más aún después de que haya obviado tan olímpicamente las insistentes y reiteradas peticiones de que se explique bien y mejor

Cita:
Iniciado por emprear Ver Mensaje
Me acabo se entrar (un poco tarde parece) de la existencia de este post ...
Por la salud de Foro, me abstendré de otras observaciones, en el presente... y en el otro

Saludos
+1
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #14 (permalink)  
Antiguo 25/02/2012, 14:17
Avatar de williamhpf  
Fecha de Ingreso: mayo-2009
Mensajes: 144
Antigüedad: 13 años, 2 meses
Puntos: 8
Respuesta: Div como enlace, con otro div dentro

No he obviado nada tan olimpicamente, para empezar. Yo creia haberme explicado bien, solo eso, no quiero que nadie solucione mis problemas, pero tampoco nadie ha nacido sabiendo (al menos yo no) tu igual si.
Si me he explicado mal, no respondas.
Si no tienes idea de como hacer lo que quiero, no respondas.
Si solo quieres vacilar sin ayudar, no respondas.
Si no te gusta como planteo mis dudas, no respondas.

Si me quieres ayudar, responde y te lo agradecere, pero llevamos media con el tema, que igual se resuelve un una linea de codigo.

El tema queda abierto, si alguien quiere hecharme un cable bienvenido sea, al resto mis disculpas por no saber plantear el tema, explicarme mal y demas.
No os robo mas tiempo.

Gracias a todos.
__________________
Electricistas 24 Horas
  #15 (permalink)  
Antiguo 26/02/2012, 09:43
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 15 años, 2 meses
Puntos: 539
Respuesta: Div como enlace, con otro div dentro

Es usted idiota (4ª acepción) y tonto (1ª acepción), esto es, y para evitar que nadie piense que le estoy insultando, "Que carece de toda instrucción" y "Falto o escaso de entendimiento" para darse cuenta que tanto Emprear como yo le hemos dado la respuesta a su problema. Otra cosa es que sus carencias le hayan impedido aplicarla.

Sobre su último comentario, no se preocupe, no falta quien quiere sino quien puede.
Pero ya le indico mi total indiferencia hacia los consejos que en él me da.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #16 (permalink)  
Antiguo 27/02/2012, 03:41
Avatar de williamhpf  
Fecha de Ingreso: mayo-2009
Mensajes: 144
Antigüedad: 13 años, 2 meses
Puntos: 8
Respuesta: Div como enlace, con otro div dentro

Vuestra solucion no sirve:

div= contenedor 500 x 500 // dentro del cual hay un enlace

div= foto 200 x 200


*** el enlace NO puede ir en el mismo div que la foto ***


Se trata de que ambos div trabajen como un unico bloque en referencia al enlace.
__________________
Electricistas 24 Horas
  #17 (permalink)  
Antiguo 27/02/2012, 08:49
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 13 años, 6 meses
Puntos: 306
Respuesta: Div como enlace, con otro div dentro

1º Post - Consulta:
Cita:
Mi pregunta es:....
Como se hace para que todo el div "1" sea un enlace ??
2º Post - Respuesta:
Cita:
<a href="http://www.dondesea.com"><img src="http://www.ejemplo.com/foto.jpg" />Texto de enlace</a>
El resto de los post sobra.

Saludos y que se haga la luz.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #18 (permalink)  
Antiguo 24/11/2015, 14:39
Avatar de joss23  
Fecha de Ingreso: noviembre-2009
Mensajes: 16
Antigüedad: 12 años, 8 meses
Puntos: 0
Respuesta: Div como enlace, con otro div dentro

Buenas tardes.
Llego al tema casi 4 años tarde.
Sin embargo querría hacer constar que he llegado aquí como consecuencia de que hace escasos minutos me ha surgido exactamente la misma e idéntica duda que a williamhpf en su día.
Desde la primera vez que he leído la cuestión planteada he entendido perfectamente lo que este usuario estaba pidiendo. Posteriormente he leído todos y cada uno de los comentarios y he encontrado muchísima prepotencia adornada con un lenguaje exquisito y a una persona viéndose obligada a pedir perdón por plantear una duda en un foro. Nada más.
Prácticamente a diario acudo a muchos foros distintos en busca de soluciones a los obstáculos que se presentan a lo largo de mi aprendizaje. Casi siempre mi papel es de observador, dado que otros usuarios antes que yo ya han planteado y visto resueltas públicamente las cuestiones que actualmente me surgen a mí.
Lamentablemente, en gran parte de las ocasiones me encuentro con situaciones parecidas a la que aquí desató la discordia. Situaciones en que un usuario plantea una duda muy específica y otro(s) usuarios responden con soluciones que claramente no se adaptan a las necesidades expuestas sin excusarse por ello o siquiera avisar, o bien increpándole por su modus operandi.
Observaciones que, a mi parecer, se deberían tener muy en cuenta al atender dudas de otros usuarios:
1) Sí, en muchos casos es posible que el interesado estuviera siguiendo una determinada metodología extraña a ojos de los demás por desconocimiento o deducciones erróneas. Sin embargo, en otros muchos casos existen motivos por los que se plantean esas cuestiones tan concretas. Intentar explicar estos motivos a una persona totalmente externa a la tarea que se está llevando a cabo podría ocupar de segundos a horas. "¿...Y porque quieres hacer 'X'? Haz 'Y'" es un estilo de respuesta muy incómodo para el interesado.
2) Manteniendo presente el punto anterior... Sí, en muchos casos es posible que los fragmentos de código sobre los que el interesado está trabajando sean realmente los tan breves y sencillos fragmentos de código que adjunta en su pregunta. Sin embargo, en otros muchos más casos esos fragmentos son ejemplos simplificados al extremo de lo que se necesita hacer, siendo el código original demasiado largo y/o difícilmente comprensible para una persona totalmente externa a la tarea que se está llevando a cabo. "¿...Y porque quieres hacer 'X'? Haz 'Y'" es un estilo de respuesta muy incómodo para el interesado.
3) La persona que pregunta no necesariamente es siempre idiota, aunque de entrada no se pueda estar seguro. Lo que sí es seguro de entrada es que el que contesta no posee el conocimiento absoluto por muy experto que sea, o crea que es. Ante ese hecho, expresiones como "Creo", "Si no me equivoco", "En mi opinión", "Si no consigues resolver 'X' ¿'Y' te podría servir como alternativa?" pueden convertir una respuesta maleducada en una respuesta reconfortante.
4) Otra sobre educación y buenos modales. Del mismo modo que nunca, de entrada, se debe dar por sentado que si yo doy la explicación el problema es del que no me entiende (¿Se me entiende? -> MAL, ¿Me explico? -> BIEN), nunca, de entrada, se debe dar por sentado que si otro da la explicación el problema es suyo porque no se explica.
Aquí veo a un usuario que ha cuestionado los métodos de otro, ha aportado una "solución" no eficaz, se ha reafirmado calificando su "solución" como "lo lógico", ha aportado prepotencia al asunto, ha faltado y ha abandonado el tema prestando ninguna atención a la crítica que se le hacía. Para dar el toque final, un tercer usuario ha pretendido postular de nuevo y solemnemente la solución definitiva que no es solución de la cuestión planteada.
Un caso más de tantos que desmotiva a los que aún creemos en los foros como valiosas fuentes de aprendizaje.
  #19 (permalink)  
Antiguo 26/11/2015, 07:05
Avatar de williamhpf  
Fecha de Ingreso: mayo-2009
Mensajes: 144
Antigüedad: 13 años, 2 meses
Puntos: 8
Respuesta: Div como enlace, con otro div dentro

Por si a alguien le interesa, el tema lo solucione de una forma muy facil, agregue una tercera capa con z-index en la cual como bloque agregue el enlace.
Dicha capa queda ovbiamente por encima de la capa contenedora.
Mis disculpas si no cerre el tema en su dia.

Saludos y gracias a todos los que han aportado soluciones.
__________________
Electricistas 24 Horas

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 23:14.