Foros del Web » Creando para Internet » CSS »

Un DIV rebelde

Estas en el tema de Un DIV rebelde en el foro de CSS en Foros del Web. Hola a todos/todas: Estoy definiendo el estilo de mi site con mis rudimentarios conocimientos de CSS. Me estoy basando en DIV's y float para organizar ...
  #1 (permalink)  
Antiguo 22/02/2011, 11:58
Avatar de Rankxerox1984  
Fecha de Ingreso: septiembre-2010
Mensajes: 253
Antigüedad: 7 años, 2 meses
Puntos: 4
Un DIV rebelde

Hola a todos/todas:

Estoy definiendo el estilo de mi site con mis rudimentarios conocimientos de CSS. Me estoy basando en DIV's y float para organizar el Layout.
En la parte de HTML tengo definidos los DIV unos dentro de otros, quiero decir que cada DIV tiene su correspondiente cierre encapsulando los que contiene. Dentro de estos DIV hay otros que fluyen (deberian fluir) mediante la propiedad FLoat:left en CSS pero no sucede asi para uno en particular. Y explico mi problema.
El DIV "CentroPagina" Contiene "Panel_Principal" y "Caja_Tabla" y los dos tienen asignados Float:left (incluso Caja_tabla tiene Clear:both) pero "Caja_Tabla" se superpone a "Panel_Principal".
Llevo todas la tarde dándole vueltas pero no veo el fallo (que seguro que existe) ¿alguien lo ve?

El HTML:

Código HTML:
 <div id="CentroPagina">
  
		<div id="Panel_principal"><p></div>

		<!--Aquí va mapa funcional primario-->	

		<div id="caja_tabla">

			<div id="Encabezado">
			<p></p></div >
			
			<div id="Caja1">
			<p></p></div >
			
			<div id="Caja2">
			<p></p></div >
			
			<div id="Caja3">
			<p></p></div >
			
			<div id="Caja4">
			<p></p></div >
			
		</div>
	</div> 
y el CSS:

Código HTML:
/*Centro página*/

	#CentroPagina {position:absolute;top:115px; left:12.5em; width:43.5em; margin:0.1em;text-align: Left;}
	
		/*panel principal*/ 

		#Panel_principal {float: left; width:43.5em; margin:0.1em;text-align: Left;}
		
		/*Registro*/

		#Regform{float: left;padding: 3px 10px 10px 10px;border-radius:7px;-moz-border-radius: 7px;-webkit-border-radius:7px;height:auto;width:40em;margin:0.1em;}

		/*Mapa Funcional*/

		#caja_tabla {clear:both;float:left;clear:both;width: 35em; margin:0.1em;}
			#Encabezado {background:#778899;position:absolute;top: 1px; left: 0px;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width: 34.9em;height:3.70em;margin:0.1em;text-align: Center;font-size:18;font-weight: bold;line-height: center;}
			#Caja1 {background:#778899;position:absolute;top: 59px; left: 0px;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width: 34.9em;height:3.2em;margin:0.1em;text-align: Center;font-size:18;font-weight: bold;line-height: center;}
			#Caja2{background:#778899;position:absolute;top: 109px; left: 0px;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width:34.9em;height:3.2em;margin:0.1em;text-align: Center;font-weight: bold;line-height: center;}
			#Caja3{background:#778899;position:absolute;top: 159px; left: 0px;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width: 11.5em;height:3.2em;margin:0.1em;text-align: Center;font-weight: bold;line-height: center;}
			#Caja4{background:#778899;position:absolute;top: 159px; left: 11.7em;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width:11.5em;height:3.2em;margin:0.1em;text-align: Center;font-weight: bold;line-height: center;}
Gracias por la paciencia, la ayuda y el apoyo sicológico ,
__________________
J.
¿Dónde está la tecla ‘ANY’?
(H. Simpson)
  #2 (permalink)  
Antiguo 22/02/2011, 13:15
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Un DIV rebelde

Lo que pasa es que le estas diciendo a #Encabezado que se ubique a 1px del borde superior y eso hace exactamente, y así sucesivamente a las demás.
Recuerda las posiciones absolutas se ubicarán de acuerdo a la caja contenedora que tengan de referencia. En este caso "CentroPagina" que es la caja que la contiene que tiene definida la posición, en este caso absoluta. Si no hubiera cajas superiores que tengan definido el position entonces se ubica de acuerdo a la pantalla, con el vertice superior izquierdo como el 0 0.

Material de lectura:
http://www.librosweb.es/css/capitulo5.html
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 22/02/2011, 15:12
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Un DIV rebelde

Cita:
<div id="Panel_principal"><p></div>
?¿ y el cierre de ese párrafo?
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #4 (permalink)  
Antiguo 23/02/2011, 00:00
Avatar de Rankxerox1984  
Fecha de Ingreso: septiembre-2010
Mensajes: 253
Antigüedad: 7 años, 2 meses
Puntos: 4
Respuesta: Un DIV rebelde

Hola a los dos:

Buenos dias. acabo de leer vuestros consejos y me ha funcionado.

Doy el tema por zanjado,
__________________
J.
¿Dónde está la tecla ‘ANY’?
(H. Simpson)

Etiquetas: Ninguno
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 04:37.