Foros del Web » Creando para Internet » CSS »

Mostrar un div al activar una caja de texto

Estas en el tema de Mostrar un div al activar una caja de texto en el foro de CSS en Foros del Web. Hola, grupo no estoy muy familiarizado con CSS, y espero que ustedes me ayuden como se puede hacer para que se visualize un DIV que ...
  #1 (permalink)  
Antiguo 10/03/2007, 11:30
 
Fecha de Ingreso: octubre-2003
Ubicación: La Paz - Bolivia
Mensajes: 116
Antigüedad: 14 años, 2 meses
Puntos: 1
Mostrar un div al activar una caja de texto

Hola, grupo no estoy muy familiarizado con CSS, y espero que ustedes me ayuden como se puede hacer para que se visualize un DIV que estaba oculto al hacer click en una caja de texto por ejemplo en la pagina de hotmail al registrarse como nuevo ususario uno al activar cualquier caja de texto aparece una ayuda en la parte izquierda, tambien cambia el fondo del bloque, como se puede lograr eso con CSS o no se puede, con JavaScript lo he logrado pero sera posible con CSS de antemano muchas gracias y les dejo el link para ver de lo que estoy hablando

Graciass

registro en hotmail

Saludos,
__________________
"El viento puede soplar fuerte, pero la montaña no lo reverencia"
  #2 (permalink)  
Antiguo 10/03/2007, 18:38
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
Re: Mostrar un div al activar una caja de texto

Mira a ver si te sirve este ejemplo:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1" />
  <title>Cajas ocultas</title>
  <style type="text/css">
* {outline: 0;
}
.tip { position: relative;
z-index: 0;
}
.tip:hover { background-color: transparent;
z-index: 1;
}
.tip span { border: 1px solid rgb(255, 102, 0);
padding: 5px;
position: absolute;
text-decoration: none;
background-color: rgb(255, 204, 153);
color: rgb(77, 38, 0);
text-align: center;
width: 100px;
height: 150px;
visibility: hidden;
}
.tip:active span, .tip:focus span { visibility: visible;
top: 0px;
left: 50px;
}
  </style>
</head>
<body>
<br />
<a href="#" class="tip">Pulsa
<span>Caja que se mostrar&aacute; al pulsar el enlace</span>
</a><br />
<br />
<a href="#" class="tip">Pulsa
<span>Caja que se mostrar&aacute; al pulsar el enlace</span>
</a><br />
</body>
</html>
Lo puedes ver funcionando aquí:

http://www.araudi.net/cajas_ocultas.html

Como siempre, funcionará mejor con firefox, porque IE tiene algún problemilla con el :active

Mikel.

Última edición por Mikmoro; 14/03/2008 a las 20:08
  #3 (permalink)  
Antiguo 12/03/2007, 09:03
 
Fecha de Ingreso: octubre-2003
Ubicación: La Paz - Bolivia
Mensajes: 116
Antigüedad: 14 años, 2 meses
Puntos: 1
Re: Mostrar un div al activar una caja de texto

Muchas gracias, por la respuesta voy a poner en practica tu sugerencia, luego te comento como me fue...

Saludos...
__________________
"El viento puede soplar fuerte, pero la montaña no lo reverencia"
  #4 (permalink)  
Antiguo 12/03/2007, 17:00
 
Fecha de Ingreso: octubre-2003
Ubicación: La Paz - Bolivia
Mensajes: 116
Antigüedad: 14 años, 2 meses
Puntos: 1
Re: Mostrar un div al activar una caja de texto

Hola de nuevo, Mikmoro disculpa mi ignorancia pero como puedo implementarlo en una caja de texto no logro hacerlo osea al hacer focus o active a la caja de texto o al list que aparezca el div, gracias otra ves

Saludos...
__________________
"El viento puede soplar fuerte, pero la montaña no lo reverencia"
  #5 (permalink)  
Antiguo 12/03/2007, 17:06
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
Re: Mostrar un div al activar una caja de texto

Con css no lo puedes hacer excepto para elementos de enlace <a href="...>. Bueno, en realidad para firefox podrías hacerlo para cualquier elemento, pero para explorer no, porque explorer sólo acepta pseudo clases tipo :hover, :active, etc., para los elementos de link.

Es una pena pero es así. Maldito sea.

Mikel.
  #6 (permalink)  
Antiguo 12/03/2007, 17:28
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
Re: Mostrar un div al activar una caja de texto

Bueno, siempre se le puede engañar un poco de esta forma:

http://www.araudi.net/cajas_ocultas2.html

Pero como te decía, en explorer no funciona muy bien, porque tiene problemas con el :active.

Mikel.

Última edición por Mikmoro; 14/03/2008 a las 20:08
  #7 (permalink)  
Antiguo 12/03/2007, 17:34
 
Fecha de Ingreso: octubre-2003
Ubicación: La Paz - Bolivia
Mensajes: 116
Antigüedad: 14 años, 2 meses
Puntos: 1
Re: Mostrar un div al activar una caja de texto

ok, muchas gracias lo tomare muy encuenta

Saludos...
__________________
"El viento puede soplar fuerte, pero la montaña no lo reverencia"
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 08:49.