Hola buenos días,
Estaba yo esta mañana aqui currando tranquilamente, hasta que de repente se me cruzó una maqueta, con un problema que no soy capaz de resolver....
La idea es la siguiente, tengo una caja con dos botones, cuando le doy al boton abrir, se me desplega un texto debajo de los botones, y la caja, crece.
Cuando le doy al botón cerrar, se me esconde el texto, y la caja vuelve a su tamaña pequeño.
Hasta aqui todo funciona perfectamente.
El problema gordo me viene cuando lo que quiero es meter debajo de mi caja de botones, otra caja igual, entonces parece que debe haber un conflicto de posiciones y el efecto de aparecer y desaparecer...deja de funcionar.
Os voy a poner el código, a ver si alguien tiene alguna pajolera idea de que es lo que me está ocurriendo.....
Si probais lo que he metido, funciona perfectamente, pero probad a duplicar el <div id="cajaContenido"> y meterlo justo debajo del primero, ambos dentro del div contenedor.
Muchas gracias de antemano.
PD: Otra cosa rara....no me pilla los estilos en FIREFOX, sera por lo de no declarar el tdt¿?
Código:
<html>
<head>
<meta http-equiv="Content-Language" content="es">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Pruebas</title>
<STYLE type="text/css">
#contenedor{position:absolute;}
#cajaContenido {position:relative; background-color:'FFF0FF'; width='120px'; border:'solid'; border-width:1px; border-color:'FFD9E6'; padding:4px; font-size:12px; margin=2px;}
#bloqueTexto{position:relative;}
.texto {background-color:'ffffff'; border:'solid'; border-width:1px; border-color:'FFD9E6'; padding-left:4px;};
.boton{background-color:'ffffff'; border:'dotted'; border-width:1px; border-color:'FFD9E6'; padding:2px; font-size:12px; }
.cajaPequena{height='1'; overflow='hidden'; visibility='hidden';}
.cajaGrande{height='auto'; visibility='visible';}
</STYLE>
</head>
<body>
<div id="contenedor">
<div id="cajaContenido">
<input type="button" class="boton" name="btAbrir" id="btAbrir" value="Abrir" title="Abrir" onclick="bloqueTexto.className='cajaGrande';" />
<input type="button" class="boton" name="btCerrar" id="btCerrar" value="Cerrar" title="Cerrar" onclick="bloqueTexto.className='cajaPequena';" />
<div id="bloqueTexto" class="cajaPequena">
<p class="texto">Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor<br/> Lorem ipsum dolor Lorem ipsum dolor</p>
<p class="texto">Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor<br/> Lorem ipsum dolor Lorem ipsum dolor</p>
</div>
</div>
</div>
</body>
</html>