Foros del Web » Creando para Internet » CSS »

Hacer que todo el div sea un enlace

Estas en el tema de Hacer que todo el div sea un enlace en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/09/2008, 11:57
 
Fecha de Ingreso: septiembre-2008
Mensajes: 14
Antigüedad: 9 años, 3 meses
Puntos: 0
Hacer que todo el div sea un enlace

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?
  #2 (permalink)  
Antiguo 18/09/2008, 12:23
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: Hacer que todo el div sea un enlace

¿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)
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 18/09/2008, 12:37
 
Fecha de Ingreso: septiembre-2008
Mensajes: 14
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Hacer que todo el div sea un enlace

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!

Última edición por Darwinformatico; 18/09/2008 a las 13:15
  #4 (permalink)  
Antiguo 19/09/2008, 03:51
Avatar de kok
kok
 
Fecha de Ingreso: agosto-2006
Mensajes: 138
Antigüedad: 11 años, 3 meses
Puntos: 2
Respuesta: Hacer que todo el div sea un enlace

<a><div> ... </div></a>
  #5 (permalink)  
Antiguo 19/09/2008, 04:43
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: Hacer que todo el div sea un enlace

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,
  #6 (permalink)  
Antiguo 23/09/2008, 13:30
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 10 años
Puntos: 4
Respuesta: Hacer que todo el div sea un enlace

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>
  #7 (permalink)  
Antiguo 24/09/2008, 02:31
Avatar de Fuzzylog  
Fecha de Ingreso: agosto-2008
Ubicación: En internet
Mensajes: 2.338
Antigüedad: 9 años, 3 meses
Puntos: 169
Respuesta: Hacer que todo el div sea un enlace

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.
  #8 (permalink)  
Antiguo 13/09/2011, 05:09
Avatar de PedroDesing  
Fecha de Ingreso: octubre-2007
Ubicación: Barcelona, España
Mensajes: 202
Antigüedad: 10 años, 1 mes
Puntos: 18
Respuesta: Hacer que todo el div sea un enlace

Cita:
¿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!!!!
__________________
pedrorodas.com próximamente! Permanezcan atentos
  #9 (permalink)  
Antiguo 13/09/2011, 07:05
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Hacer que todo el div sea un enlace

Cita:
Iniciado por PedroDesing Ver Mensaje
Una vez que tengo el a con el display:block, ya puedo meter el div dentro??? o no?
Cita:
Iniciado por JavierB Ver Mensaje
Un elemento de bloque no puede ir dentro de un elemento en línea.
Cita:
Iniciado por PedroDesing Ver Mensaje
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
Cita:
.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>
  #10 (permalink)  
Antiguo 13/09/2011, 08:04
Avatar de PedroDesing  
Fecha de Ingreso: octubre-2007
Ubicación: Barcelona, España
Mensajes: 202
Antigüedad: 10 años, 1 mes
Puntos: 18
Respuesta: Hacer que todo el div sea un enlace

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

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

Muchas gracias :)
__________________
pedrorodas.com próximamente! Permanezcan atentos
  #11 (permalink)  
Antiguo 13/09/2011, 08:29
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Hacer que todo el div sea un enlace

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
  #12 (permalink)  
Antiguo 13/09/2011, 08:40
Avatar de PedroDesing  
Fecha de Ingreso: octubre-2007
Ubicación: Barcelona, España
Mensajes: 202
Antigüedad: 10 años, 1 mes
Puntos: 18
Respuesta: Hacer que todo el div sea un enlace

el h3 y el p son elementos de bloque?? dará problemas de validación al estar incluidos dentro del a?
__________________
pedrorodas.com próximamente! Permanezcan atentos
  #13 (permalink)  
Antiguo 13/09/2011, 08:47
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Hacer que todo el div sea un enlace

has mirado tan siquiera el html?? donde ves que los elementos de bloque estén contenidos por el elemento de línea??
  #14 (permalink)  
Antiguo 13/09/2011, 11:28
Avatar de PedroDesing  
Fecha de Ingreso: octubre-2007
Ubicación: Barcelona, España
Mensajes: 202
Antigüedad: 10 años, 1 mes
Puntos: 18
Respuesta: Hacer que todo el div sea un enlace

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

Gracias.
__________________
pedrorodas.com próximamente! Permanezcan atentos
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.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 00:09.