Div como enlace

[salbatore]

Hola, foreros:

Aunque seguro que se pregunto alguna vez, yo no lo he encontrado, jeje. Mirar buscaba hacer un div que fuese un enlace, es decir, tengo un div con texto y mucho espacio y quiero que si clicas en todo el div te envia a un lugar.

¿Facil no?, un div que es un enlace...

¿Como lo hago?

[-sata-]

Hola amigo, bueno por tu duda no se si se podra hacer lo que vos queres, pero lo que podes hacer es insertar la DIV dentro de las etiquetas de enlace. Ej:

<a href="index.html"><div class="ejemplo"></div></a>

Saludos

[00siete]

Efectivamente, hay que usar la misma técnica que para poner una imagen que sea un link.
Es decir una etiqueta <a> que englobe a todo lo que queramos que sea la parte "clickable" del enlace.

[JavierB]

Hola a todos.

El código de -sata- no es nada correcto. No se deberían meter elementos de bloque dentro de un elemento en línea.

Saludos,

[-sata-]

Bueno, entonces seria al revez... Primero la etiqueta <div> y despues la <a>

Código:

<div class"ejemplo"><a>Link</a></div>

El ejemplo anterior lo di segun lo que el que Salbatore queria hacer, yo personalmente hago como en este ultimo ejemplo, marcando uno por uno los enlaces dentro de la DIV..jeje

Saludos

[pateketrueke]

claro... pero ke pasa si el DIV contiene padding, pues el enlace no cubre todo el DIV .... deberian usar en ves de <div/> algunos <span/> con propiedades de estilo... como display: block; y sera lo mismo....

PDTA: hagan buen... HTML!

[salbatore]

Hola, de nuevo...

Tenia dudas sobre hacerlo de ese modo, por lo que dice JavierB, aunque no se la razon decir que no es correcto, jeje... solo lo habia leido...

¿Por que no es bueno hacerlo de ese modo? y ¿como seria el modo correcto?

[Mikmoro]

Por ejemplo:

<div class="enlazado"><a href="#">texto</a></div>

Con la CSS:

.enlazado {height: 100px; width: 200px; border: solid #f00;}

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

Mikel.

[-sata-]

jaja perfecto!! lo prove y si funciona... No la sabia esa xD

Muchas gracias Mikel.

[pateketrueke]

... listo! :P

[salbatore]

Hola de nuevo...

Gracias... perfecto!! , cada dia se aprende un truco mas en css...

[toniveas]

Y si ese div, contiene otro div que cambia de posición cuando situamos el cursor encima?
<div id="portfolio_boto">

<div id="portfolio_boto_text"><h1>boton</h1></div>

</div>

css:

#portfolio_boto {
display:block;
float:left;
width:300px;
height:200px;
margin:10px;
overflow:hidden;
border: 8px solid #FFF;
-moz-box-shadow:5px 5px 10px rgba(0,0,0,0.4);
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.4);
box-shadow: 5px 5px 10px rgba(0,0,0,0.4);
}
#portfolio_boto_text {
position:relative;
top:200px;
width:300px;
height:100px;
background: rgba(255,255,255,0.8);
text-align:center;
overflow:hidden;
font-size:12px;
}
#portfolio_boto:hover {
cursor:pointer;

}
#portfolio_boto:hover #portfolio_boto_text {
top:100px;
overflow:none;

-webkit-transition: all 200ms linear; /*safari and chrome */
-moz-transition: all 200ms linear; /* firefox */
-o-transition: all 200ms linear; /* opera */
transition: all 200ms linear;

}

[webosiris]

toniveas, te das cuenta que estás levantando un tema del 2008?
además no se que tiene que ver tu código con lo preguntado aquí.
si tienes alguna pregunta te recomiendo crear un nuevo tema y explicar todo claramente desde el inicio.