Foros del Web » Creando para Internet » CSS »

Problema con POSITION (creo)

Estas en el tema de Problema con POSITION (creo) en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/02/2007, 03:22
Avatar de walan  
Fecha de Ingreso: febrero-2007
Ubicación: Madrid
Mensajes: 49
Antigüedad: 10 años, 10 meses
Puntos: 0
Problema con POSITION (creo)

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';" />&nbsp;
						<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>
  #2 (permalink)  
Antiguo 14/02/2007, 04:17
Avatar de Shade  
Fecha de Ingreso: noviembre-2006
Mensajes: 262
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: Problema con POSITION (creo)

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';" />&nbsp;
						<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>
Sacados los ' de el css y funciona perfecto.
  #3 (permalink)  
Antiguo 14/02/2007, 04:27
Avatar de walan  
Fecha de Ingreso: febrero-2007
Ubicación: Madrid
Mensajes: 49
Antigüedad: 10 años, 10 meses
Puntos: 0
Re: Problema con POSITION (creo)

Vale, perfecto, ahora se visualizan las css en firefox, pero sigo sin poder solucionar el problema de los bloques.´

Gracias por lo de las comillas ;)


Este es el código que no funcifona:

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';" />&nbsp;
						<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 id="cajaContenido">

						<input type="button" class="boton" name="btAbrir" id="btAbrir" value="Abrir" title="Abrir" onclick="bloqueTexto.className='cajaGrande';" />&nbsp;
						<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>
  #4 (permalink)  
Antiguo 14/02/2007, 04:45
Avatar de Shade  
Fecha de Ingreso: noviembre-2006
Mensajes: 262
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: Problema con POSITION (creo)

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;}
					#bloqueTexto1{position:relative;}
					#bloqueTexto2{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="bloqueTexto1.className='cajaGrande';" />&nbsp;
						<input type="button" class="boton" name="btCerrar" id="btCerrar" value="Cerrar" title="Cerrar" onclick="bloqueTexto1.className='cajaPequena';" />

						<div id="bloqueTexto1" 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 id="cajaContenido">

						<input type="button" class="boton" name="btAbrir" id="btAbrir" value="Abrir" title="Abrir" onclick="bloqueTexto2.className='cajaGrande';" />&nbsp;
						<input type="button" class="boton" name="btCerrar" id="btCerrar" value="Cerrar" title="Cerrar" onclick="bloqueTexto2.className='cajaPequena';" />

						<div id="bloqueTexto2" 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>
Problema... tenias definidos los mismos id's para las dos cajas y eso hacia que causara conflictos... ^_^ te he cambiado los ids y establecido los nuevos en el css con tu permiso.
  #5 (permalink)  
Antiguo 14/02/2007, 04:53
Avatar de walan  
Fecha de Ingreso: febrero-2007
Ubicación: Madrid
Mensajes: 49
Antigüedad: 10 años, 10 meses
Puntos: 0
Re: Problema con POSITION (creo)

i n c r i b l e!!No me j... que era eso...que fuerte, pensé que eso no me daría problemas con el tema de las posiciones....y yo comiéndome mazo la olla, y era esa tonteria

muchíiiiisimas gracias Shade, te lo agradezco un montón.
  #6 (permalink)  
Antiguo 14/02/2007, 04:57
Avatar de Shade  
Fecha de Ingreso: noviembre-2006
Mensajes: 262
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: Problema con POSITION (creo)

No hay drama, los problemas que parecen mas graves son inversamente proporcional a la tonteria que los genera ^_^ Y siempre pasa lo mismo, cuanto mas tiempo se te rebela un codigo mas tardas en descubrirlo porque mas harto estas.

P.D.: Por cierto si quieres que te agarre bien los estilos... tienes que ponerle el style de los botones a los input y no a el class del boton ^_^

input{blahblah}
  #7 (permalink)  
Antiguo 14/02/2007, 05:09
Avatar de walan  
Fecha de Ingreso: febrero-2007
Ubicación: Madrid
Mensajes: 49
Antigüedad: 10 años, 10 meses
Puntos: 0
Re: Problema con POSITION (creo)

perfecto, ya lo cambié! :)
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 09:43.