hacer un div como un enlace

[PedroDesing]

Hola amigo/as.

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

Tengo unos div parecidos a los de la imagen que les muestro, compuestos por un <h3>, un <img> y un <p>. Me gustaría conseguir que todo el div fuera un enlace, ya que me gustaria que al pasar el ratón encima del div, me cambiara el color de fondo y pudiera hacer clic en cualquier parte del mismo para accender a sus contenidos.

Alguna idea???

Muchas gracias.

[cristian_cena]

Podes encerrar todo tu contenido con un <a>

Código HTML:

<a href="#">
<h3></h3>
... etc...
</a>
 

y das:

Código CSS:

a{display:block;}
 

también puedes dar un onclick sobre un div:

Código HTML:

<div id="ejemplo">
<h3></h3>
... etc...
</div>
 

Código Javascript:

// requiere jquery
$(document).ready(function(){
    $("#ejemplo").click(function(){
        window.location = "http://www.google.com";
    });
    */
    /*o bien un interruptor.
    $("#ejemplo").toggle(
        function(){
            $("#ejemplo h3").css({"color":"red"});
            
        },
        function(){
            $("#ejemplo h3").css({"color":"black"});
        }
    );
    */
});
 

Saludos.

[IsaBelM]

cristian, los elemento de bloque no pueden estar dentro de los elementos en línea
el tema está "repetido" http://www.forosdelweb.com/f53/hacer...5/#post3985890

[cristian_cena]

Iniciado por IsaBelM

cristian, los elemento de bloque no pueden estar dentro de los elementos en línea.

Ok, por eso ponemos display:block; para transformarlo en bloque. A los fines prácticos funciona, aunque no se si validará, supongo que sí.

Saludos.

[tinocastro]

Iniciado por PedroDesing

Hola amigo/as.

[url]http://img695.imageshack.us/img695/3209/divs.png[/url]

Tengo unos div parecidos a los de la imagen que les muestro, compuestos por un <h3>, un <img> y un <p>. Me gustaría conseguir que todo el div fuera un enlace, ya que me gustaria que al pasar el ratón encima del div, me cambiara el color de fondo y pudiera hacer clic en cualquier parte del mismo para accender a sus contenidos.

Alguna idea???

Muchas gracias.

No he llegado a probar, pero creo que asi quedaria como quieres:

<div id="nombrecapa"><a href""></a>
en css le das las etiquetas p y h.

Saludos

[IsaBelM]

como había algo que me rayaba en el código, lo probé en ie y mis sospechas se confirmaron. no funciona!!. la solución que se me ha ocurrido en añadir una imagen de fondo transparente, por lo que quedaría así

.contenedor a {background-image: url('pixel_transparente.gif'); position: absolute; width: 100%; height: 400px;}

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

[webosiris]

Iniciado por cristian_cena

Ok, por eso ponemos display:block; para transformarlo en bloque. A los fines prácticos funciona, aunque no se si validará, supongo que sí.

no cristian, no es algo válido. lo que importa es el estado natural de los elementos, y el A es naturalmente un elemento en línea... así que no le puedes poner dentro un h3

[RafaRG]

otra solución podría ser poner el div como una imagen. ya sé que resulta un poco rudimentario, pero es más seguro XD
la idea sería:
1 haces el div que quieres que aparezca
2 vas a la página y haces una captura de pantalla
3 pega la captura en el paint y recortas las imágenes
4 quita el div y pon la imágenes como enlace en su lugar

si quieres que al poner el cursor sobre la imagen, el fondo cambie, simplemente, antes de quitar el div, cambias el color de fondo (o lo que quieras) y repites el proceso. luego tendrás que usar un script para que cambie de imagen al pasar el cursor.

[IsaBelM]

Iniciado por cristian_cena

Ok, por eso ponemos display:block; para transformarlo en bloque. A los fines prácticos funciona, aunque no se si validará, supongo que sí.

Saludos.

hacemos que se comporte como un bloque pero no pierde el tipo de elemento que es

Iniciado por webosiris

no cristian, no es algo válido. lo que importa es el estado natural de los elementos, y el A es naturalmente un elemento en línea... así que no le puedes poner dentro un h3

puedes comproblarlo tu mismo. sólo hay que añadir el atributo alt a la imagen. http://validator.w3.org/#validate_by_input+with_options + Validate HTML fragment + XHTML 1.0

Iniciado por RafaRG

otra solución podría ser poner el div como una imagen. ya sé que resulta un poco rudimentario, pero es más seguro XD

y si no encontramos con ..... 50 y los datos son obtenidos dinámicamente??

[cristian_cena]

haber, como hacen para hacer esto sin javascript y que valide el css?. O le dicen al diseñador: mire señor no se puede. O hacemos que ande igual sin validar. saludos.

[IsaBelM]

Iniciado por cristian_cena

haber, como hacen para hacer esto sin javascript y que valide el css?

no comprendo que quieres decir

[cristian_cena]

claro, ¿como haces un bloque con contenido anidado que sea clickeable, y al clickearse direccione a alguna url y al mismo tiempo valide?. O le decis al diseñador "no se puede solo con css", o tomas el evento onclick con javascript y lo solucionás, o anidas contenido al enlace haciendolo solo con css aún sabiendo que es código no válido pero que funciona a la perfección.

[IsaBelM]

continuo sin comprenderlo

validación del css


validación del html

[cristian_cena]

isabel, lo que haces está bien, pero según entendí yo, no es lo que necesita pedro.
En este caso div.contenedor debe ser clickeable y enlazar a una url. A eso me refería.
Igualmente creo que ya está aclarado el tema.

Saludos.

[IsaBelM]

Iniciado por cristian_cena

isabel, lo que haces está bien, pero según entendí yo, no es lo que necesita pedro.
En este caso div.contenedor debe ser clickeable y enlazar a una url. A eso me refería.
Igualmente creo que ya está aclarado el tema.

Saludos.

el problema viene por que no has ejecutado el código. pruebalo por ti mismo. al hacer click en div.contenedor te redirecciona a la url asignada

[cristian_cena]

excelente isabel, en realidad la url la tiene el enlace superpuesto :) lo voy a tener presente, saludos.

[DrFaust]

+1 a IsaBelM. Gracias por el método; lo voy a empezar a usar.