Foros del Web » Creando para Internet » HTML »

Div como enlace

Estas en el tema de Div como enlace en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 31/05/2008, 22:20
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.566
Antigüedad: 10 años, 8 meses
Puntos: 19
Div como enlace

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?
  #2 (permalink)  
Antiguo 01/06/2008, 01:20
 
Fecha de Ingreso: febrero-2008
Mensajes: 17
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Div como enlace

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
  #3 (permalink)  
Antiguo 01/06/2008, 02:11
 
Fecha de Ingreso: marzo-2008
Mensajes: 306
Antigüedad: 9 años, 8 meses
Puntos: 6
Respuesta: Div como enlace

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.
__________________
Pop & Rock Bands
Pop Music Stars
  #4 (permalink)  
Antiguo 01/06/2008, 04:03
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: Div como enlace

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,
  #5 (permalink)  
Antiguo 01/06/2008, 09:27
 
Fecha de Ingreso: febrero-2008
Mensajes: 17
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Div como enlace

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

Última edición por -sata-; 01/06/2008 a las 09:37
  #6 (permalink)  
Antiguo 01/06/2008, 10:40
Avatar de pateketrueke
Modernizr
 
Fecha de Ingreso: abril-2008
Ubicación: Mexihco-Tenochtitlan
Mensajes: 26.399
Antigüedad: 9 años, 8 meses
Puntos: 2526
Respuesta: Div como enlace

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!
__________________
Y U NO RTFM? щ(ºдºщ)

No atiendo por MP nada que no sea personal.
  #7 (permalink)  
Antiguo 01/06/2008, 10:40
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.566
Antigüedad: 10 años, 8 meses
Puntos: 19
Respuesta: Div como enlace

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?
  #8 (permalink)  
Antiguo 01/06/2008, 11: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: Div como enlace

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.
  #9 (permalink)  
Antiguo 01/06/2008, 12:11
 
Fecha de Ingreso: febrero-2008
Mensajes: 17
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Div como enlace

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

Muchas gracias Mikel.
  #10 (permalink)  
Antiguo 02/06/2008, 00:32
Avatar de pateketrueke
Modernizr
 
Fecha de Ingreso: abril-2008
Ubicación: Mexihco-Tenochtitlan
Mensajes: 26.399
Antigüedad: 9 años, 8 meses
Puntos: 2526
Respuesta: Div como enlace

... listo! :P
__________________
Y U NO RTFM? щ(ºдºщ)

No atiendo por MP nada que no sea personal.
  #11 (permalink)  
Antiguo 02/06/2008, 01:47
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.566
Antigüedad: 10 años, 8 meses
Puntos: 19
Respuesta: Div como enlace

Hola de nuevo...

Gracias... perfecto!! , cada dia se aprende un truco mas en css...
  #12 (permalink)  
Antiguo 03/04/2013, 07:03
 
Fecha de Ingreso: diciembre-2001
Mensajes: 118
Antigüedad: 16 años
Puntos: 0
Respuesta: Div como enlace

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;

}
  #13 (permalink)  
Antiguo 03/04/2013, 08:09
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
Respuesta: Div como enlace

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.
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
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 05:03.