Foros del Web » Creando para Internet » CSS »

footer se sobrepone a otros divs. Divs no llegan al final de la pagina.

Estas en el tema de footer se sobrepone a otros divs. Divs no llegan al final de la pagina. en el foro de CSS en Foros del Web. Hola, llevo 3 dias mirando un codigo y no consigo descifrar que he hecho mal. He probado borrando codigo y añadiendolo poco a poco y ...
  #1 (permalink)  
Antiguo 23/05/2014, 05:19
Avatar de neoarcangel  
Fecha de Ingreso: enero-2005
Ubicación: España
Mensajes: 566
Antigüedad: 19 años, 10 meses
Puntos: 5
footer se sobrepone a otros divs. Divs no llegan al final de la pagina.

Hola, llevo 3 dias mirando un codigo y no consigo descifrar que he hecho mal.
He probado borrando codigo y añadiendolo poco a poco y aunque veo algo claro no consigo saber que condiciona a que el footer suba o baje en funcion de el sidebar o barra derecha donde estan las categorias.

De todas maneras este comportamiento es debido a que tanto el div principal como el div main no llegan al final de la pagina, se quedan hasta la mitad, y lo he modificado ya con tantos parametros que no veo solucion.
He contado los div en notepad++ abiertos y cerrados y me salen los mismos.
He comprobado mediante validadores los css haber si habia algun error, y no me ha encontrado ningun error.
Como digo, yo pienso que es del div principal o del div main, no se por que no llegan hasta el final de la pagina.
Mis css, la pagina y los menus

Como no me deja postear tanto texto, las subo a un pequeño archivo.
neopag.zip
Espero me podais ayudar.
Gracias.
__________________
Mi equipo

Gigabyte GA-MA770T-UD3P Socket AM3|OZC StealthxStream 600 w | Gigabyte Radeon HD 4770 512MB GDDR5| AMD Phenom II 945 X4 Quad Core 3.0Ghz| Memoria Kingston 6GB DDR3 1333
  #2 (permalink)  
Antiguo 23/05/2014, 06:08
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Respuesta: footer se sobrepone a otros divs. Divs no llegan al final de la pagina.

Sin ver el código (no soy tan valiente de descargar cualquier cosa) suena a que te falta limpiar el flotado por algún sitio.

Al elemento que contenga el sitio, añádele:

Código CSS:
Ver original
  1. overflow: hidden;

Si no tiene altura definida ese elemento, debería de funcionar si es eso.
  #3 (permalink)  
Antiguo 23/05/2014, 09:37
Avatar de neoarcangel  
Fecha de Ingreso: enero-2005
Ubicación: España
Mensajes: 566
Antigüedad: 19 años, 10 meses
Puntos: 5
Respuesta: footer se sobrepone a otros divs. Divs no llegan al final de la pagina.

Yo queria poner el codigo pero no he podido por que me dice que es demasiado largo, es por ello que lo he subido a ese archivo.
He probado con el overflow:hidden, y lo que hace es ocultarme lo que esta por debajo del contenedor, que en este caso no funciona por que el contenedor principal no abarca todo el contenido, si no que se cierra casi a mitad del sitio.
He reducido algo de codigo, para postearlo aqui, tambien he añadido bordes a las tablas para que veais como el contenedor principal se queda a mitad.

NOTICIAS.PHP
Código HTML:
<?php 
require_once('class/class.php');
$instantrabajo=new Trabajo();
?>


<html>

<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=UTF-8">
<title>CREACION DE BLOG</title>

<link href="css/estilos.css" type="text/css" rel="stylesheet" />
</head>
<body>
<center>
<div id="principal">
	<div id="cabecera"> cabecera</div>
	<div id="main">
			<!-- *****************MENU************************ -->
		<div id="menu">
		<?php 
		//incluimos el menu que esta en menu.php
			include('menu.php');
			?>
		<!-- *****************FIN DE MENU************************ -->	
		
		<!-- *****************BUSCADOR************************ -->
			<div id="buscador">
				<form name="buscar">
				<input type="text" name="s" />
					<a href="">
					<img src="img/buscarimg.png" border="0"></img>
					</a>
				</form>
			</div>
		</div>
		<!-- *****************FIN DE BUSCADOR************************ -->
		<div id="contenidosecun">
			<div id="contenedor">
				<div id="div_paginacion_post">
					<!------------------------------detalle del post----------------------------->
					<div id="div_post_top"></div><!----separador----->
					<div id="div_contenedor_post">	
						<div id="div_post_titulo">
								<div id="div_post_titulo_texto">
								TITULO DE NUESTRO POST.
								</div>
								<div id="div_post_titulo_fecha">
									Martes, 20 de mayo de 2014
								</div>
						</div>
						
					
						
						<div id="div_post_contenedor_detalle">	
							<!-- <div class="div_separador_detalle_post"></div> -->
								<div id="div_detalle_post">
										DETALLE DEL POST	
										<hr>
										OTRO DETALLE
										<hr>
									<div id="contenedor_descarga_categoria_post">
											<div id="div_categoria_post">
													categoria: PHP
											</div>
											
											<div id="div_descarga_post">
													<a href="">DESCARGAR</a>
											</div>
									</div>	
												<br />
												<br />
												<hr />
									<div id="div_form_comentarios">
										<form name="form"action="" method="POST">
																<br />
											Nombre:&nbsp;&nbsp;
											<input type="text" name="nom" title="nombre" />
																<br />
																<br />
											E-Mail:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
												<input type="text" name="correo" title="E-mail" /> no sera publicado
																<br />
																<br />
											Sitio Web:
												<input type="text" name="web" title="Sitio web" />
																<br />
																<br />
																
											<div id="div_textarea_msg_1">Mensaje:</div>
												<textarea name="mensaje" cols="40" rows="10" title=""></textarea>
																<br />
																<br />
												<input type="button" value="Insertar Comentario" title="Insertar Comentario" onclick=""/>
										</form>
									</div>
									
									<div id="div_comentarios_post">
										<?php
											for($i=0;$i<30;$i++)
											{
											?>
													
													<a href="">pruebax</a><br/>
										<?php
											}
											?>
									</div>
									<br />
								</div>
								
							<div class="div_separador_detalle_post"></div>
						</div>
						</div>

					</div>
			</div>
			
			
			<div id="sidebar">
			
			<!--PRIMERA CAJA WIDGET-->
				<div id="separador_widget"></div>
				<div id="widget">
					
					
					
						<div id="caja_widget">
							<div id="titulo_widget">Categorias</div>
							<?php 
							$categorias=$instantrabajo->listar_categorias();
						for($i=0;$i<sizeof($categorias);$i++)
						{
						?>
							<a href="http://localhost/pruebas/tutorial12/?cat=<?php echo $categorias[$i]["id_categoria"];?>
									"title="<?php echo $categorias[$i]["categoria"];?>">
							<div id="contenido_widget"><?php echo $categorias[$i]["categoria"];?></div>
							</a>
						<?php 
						}
						?>
						
						</div>
					
					<div class="separador_lateral_widget"></div>
						
				</div>
				
					<!--SEGUNDA CAJA WIDGET-->
				<div id="separador_widget"></div>
				<div id="widget">
					<div id="caja_widget">
							<div id="titulo_widget">SUBCATEGORIAS</div>
									<?php 
											for($i=0;$i<10;$i++)
											{
									?>
							<div id="contenido_widget">ASP</div>
									<?php 
											}
									?>
					</div>
					
					<div class="separador_lateral_widget"></div>
						
				</div>
				
			</div>
														<div id="footer_separador"></div>
								<div id="footer">
					<hr/>
					&copy Desarrollado por Neoarcangel <?php echo date("Y");?>
				</div>
		</div>
	</div>
		

</div>
</center>
</body>
</html> 
CSS
Código HTML:
body{margin-left:0px;margin-top:0px;	font-family:Verdana;}

#principal{	font-size:12px;	width:800px;background-color:#ffffff;	border:solid 2px #aa0000;}


	#cabecera{width:800px;height:100px;background-color:#00BFFF;color:#FFFFFF;float:left;}
		#main{width:800px;	height:100%;border:solid 2px #220501;}
			#menu{width:800px;	height:25px;float:left;	}
					.boton{width:120px;	height:25px;float:left;	background-color:#000000;color:#ffffff;	}
				  .url_boton{text-decoration:none;	color:#ffffff;	   }
				  #buscador{width:200px;height:25px;float:left;	text-align:center;  }
				  
				  
			#contenidosecun{width:800px;float:left;	}
					#contenedor{width:600px;	float:left;}
					
						#separador{width:600px; height:20px;float:left;}
						
						#post{width:600px;float:left;text-align:center;		}
							#titulo_post{width:600px;	height:20px;float:left;	}
								#titulo{width:400px;height:20px;float:left;text-align:left;font-weight:bold;}
								#fecha{width:200px;height:20px;float:left;text-align:right;}
							#texto_post{width:600px;float:left;text-align:left;}
							#separador_debajo_post{width:600px;height:10px;float:left;	}
							#debajo_post{width:600px;height:20px;float:left;}
								#leer_mas{width:400px;height:20px;float:left;text-align:left;}
								#comentarios{width:200px;height:20px;float:left;text-align:right;}
								#div_entre_post{width:600px;height:3px;float:left;background-color:#000000;	}
								
								#div_paginacion_post{margin-top:5px;height:30px;	width:600px;float:left;text-align:center;font-size:12px;}
													
					/*********************estilos para noticias.php*******************************/								
					#div_post_top		{width:600px; height:25px;	float:left;}
					
						#div_post_contenedor	{width:600px;float:left;}
							#div_post_titulo	{width:600px;float:left;text-align:left;}
								#div_post_titulo_texto	{width:400px;float:left; height:20px;text-align:left;font-weight:bold;								font-size:14px;font-family:Verdana;}
								#div_post_titulo_fecha	{width:200px;float:left; height:20px;text-align:right;	text-decoration:underline;	}
							#div_separador_titulo	{width:600px;float:left; height:3px; background-color:#009966;}		
							#div_post_contenedor_detalle	{width:600px;border:solid 2px #aa0000;	float:left;	}		
								.div_separador_detalle_post{width:25px;float:left;	}
								#div_detalle_post	{width:550px;border:solid 3px #eeA3D9;margin-left:25px;	float:left; }		
									#contenedor_descarga_categoria_post	{width:550px;float:left;height:20px;}	
										    #div_categoria_post	{width:275px;height:20px;text-align:left;float:left;}														
											 #div_descarga_post	{width:275px;height:20px;text-align:right;float:left;color:#BFFFBF;	font-size:11px;}	
									#div_form_comentarios	{width:550px;text-align:left;float:left;}
										#div_textarea_msg_1	{width:100px;vertical-align:top;float:left;}
									#div_comentarios_post	{width:550px;border:solid 3px #bbbb00;text-align:left;	float:left;}
																								
																		
					/*********************fin de estilos para noticias.php*******************************/						
								
					#sidebar{width:200px;float:left;}
						#separador_widget{width:200px; height:20px;float:left;}
						#widget{width:200px;float:left;margin-left:15px;}
								.separador_lateral_widget{width:15px;float:left;}
								#caja_widget{width:170px;float:left;}
								#titulo_widget{width:170px; height:20px;float:left;background-color:#333333;color:#ffffff;text-align:center;}
								#contenido_widget{width:170px;float:left;height:20px;background-color:#f0f0f0;text-align:center;	}
					#footer_separador{width:800px;	height:15px;	color:#000000;float:left;
								
										}							
					#footer{width:800px;height:15px;background-color:#ffffff;color:#000000;font-size:10px;border:solid 2px #00A3D9;
							float:left;}
__________________
Mi equipo

Gigabyte GA-MA770T-UD3P Socket AM3|OZC StealthxStream 600 w | Gigabyte Radeon HD 4770 512MB GDDR5| AMD Phenom II 945 X4 Quad Core 3.0Ghz| Memoria Kingston 6GB DDR3 1333

Última edición por neoarcangel; 23/05/2014 a las 09:42

Etiquetas: divs, final, footer, llegan
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 18:19.