Ir al contenido


Foto

Contenedor principal llega a mitad de pagina en vez de hasta final de pagina.

Comenzado por shinneo , may 26 2014 02:47

  • Por favor identifícate para responder
No hay respuestas en este tema

#1 shinneo

shinneo

    Newbie

  • Miembros
  • Pip
  • 6 mensajes

Escrito 26 mayo 2014 - 02:47

Hola, llevo 6 dias mirando un codigo de un tutorial de cesar, el 12 concretamente 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.
NOTICIAS.PHP


delphi
  1. <?php 
  2. require_once('class/class.php');
  3. $instantrabajo=new Trabajo();
  4. ?>
  5.  
  6.  
  7. <html>
  8.  
  9. <head>
  10. <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=UTF-8">
  11. <title>CREACION DE BLOG</title>
  12.  
  13. <link href="css/estilos.css" type="text/css" rel="stylesheet" />
  14. </head>
  15. <body>
  16. <center>
  17. <div id="principal">
  18. 	<div id="cabecera"> cabecera</div>
  19. 	<div id="main">
  20. 			<!-- *****************MENU************************ -->
  21. 		<div id="menu">
  22. 		<?php 
  23. 		//incluimos el menu que esta en menu.php
  24. 			include('menu.php');
  25. 			?>
  26. 		<!-- *****************FIN DE MENU************************ -->	
  27.  
  28. 		<!-- *****************BUSCADOR************************ -->
  29. 			<div id="buscador">
  30. 				<form name="buscar">
  31. 				<input type="text" name="s" />
  32. 					<a href="">
  33. 					<img src="img/buscarimg.png" border="0"></img>
  34. 					</a>
  35. 				</form>
  36. 			</div>
  37. 		</div>
  38. 		<!-- *****************FIN DE BUSCADOR************************ -->
  39. 		<div id="contenidosecun">
  40. 			<div id="contenedor">
  41. 				<div id="div_paginacion_post">
  42. 					<!------------------------------detalle del post----------------------------->
  43. 					<div id="div_post_top"></div><!----separador----->
  44. 					<div id="div_contenedor_post">	
  45. 						<div id="div_post_titulo">
  46. 								<div id="div_post_titulo_texto">
  47. 								TITULO DE NUESTRO POST.
  48. 								</div>
  49. 								<div id="div_post_titulo_fecha">
  50. 									Martes, 20 de mayo de 2014
  51. 								</div>
  52. 						</div>
  53.  
  54.  
  55.  
  56. 						<div id="div_post_contenedor_detalle">	
  57. 							<!-- <div class="div_separador_detalle_post"></div> -->
  58. 								<div id="div_detalle_post">
  59. 										DETALLE DEL POST	
  60. 										<hr>
  61. 										OTRO DETALLE
  62. 										<hr>
  63. 									<div id="contenedor_descarga_categoria_post">
  64. 											<div id="div_categoria_post">
  65. 													categoria: PHP
  66. 											</div>
  67.  
  68. 											<div id="div_descarga_post">
  69. 													<a href="">DESCARGAR</a>
  70. 											</div>
  71. 									</div>	
  72. 												<br />
  73. 												<br />
  74. 												<hr />
  75. 									<div id="div_form_comentarios">
  76. 										<form name="form"action="" method="POST">
  77. 																<br />
  78. 											Nombre:&nbsp;&nbsp;
  79. 											<input type="text" name="nom" title="nombre" />
  80. 																<br />
  81. 																<br />
  82. 											E-Mail:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  83. 												<input type="text" name="correo" title="E-mail" /> no sera publicado
  84. 																<br />
  85. 																<br />
  86. 											Sitio Web:
  87. 												<input type="text" name="web" title="Sitio web" />
  88. 																<br />
  89. 																<br />
  90.  
  91. 											<div id="div_textarea_msg_1">Mensaje:</div>
  92. 												<textarea name="mensaje" cols="40" rows="10" title=""></textarea>
  93. 																<br />
  94. 																<br />
  95. 												<input type="button" value="Insertar Comentario" title="Insertar Comentario" onclick=""/>
  96. 										</form>
  97. 									</div>
  98.  
  99. 									<div id="div_comentarios_post">
  100. 										<?php
  101. 											for($i=0;$i<30;$i++)
  102. 											{
  103. 											?>
  104.  
  105. 													<a href="">pruebax</a><br/>
  106. 										<?php
  107. 											}
  108. 											?>
  109. 									</div>
  110. 									<br />
  111. 								</div>
  112.  
  113. 							<div class="div_separador_detalle_post"></div>
  114. 						</div>
  115. 						</div>
  116.  
  117. 					</div>
  118. 			</div>
  119.  
  120.  
  121. 			<div id="sidebar">
  122.  
  123. 			<!--PRIMERA CAJA WIDGET-->
  124. 				<div id="separador_widget"></div>
  125. 				<div id="widget">
  126.  
  127.  
  128.  
  129. 						<div id="caja_widget">
  130. 							<div id="titulo_widget">Categorias</div>
  131. 							<?php 
  132. 							$categorias=$instantrabajo->listar_categorias();
  133. 						for($i=0;$i<sizeof($categorias);$i++)
  134. 						{
  135. 						?>
  136. 							<a href="http://localhost/pruebas/tutorial12/?cat=<?php echo $categorias[$i]["id_categoria"];?>
  137. 									"title="<?php echo $categorias[$i]["categoria"];?>">
  138. 							<div id="contenido_widget"><?php echo $categorias[$i]["categoria"];?></div>
  139. 							</a>
  140. 						<?php 
  141. 						}
  142. 						?>
  143.  
  144. 						</div>
  145.  
  146. 					<div class="separador_lateral_widget"></div>
  147.  
  148. 				</div>
  149.  
  150. 					<!--SEGUNDA CAJA WIDGET-->
  151. 				<div id="separador_widget"></div>
  152. 				<div id="widget">
  153. 					<div id="caja_widget">
  154. 							<div id="titulo_widget">SUBCATEGORIAS</div>
  155. 									<?php 
  156. 											for($i=0;$i<10;$i++)
  157. 											{
  158. 									?>
  159. 							<div id="contenido_widget">ASP</div>
  160. 									<?php 
  161. 											}
  162. 									?>
  163. 					</div>
  164.  
  165. 					<div class="separador_lateral_widget"></div>
  166.  
  167. 				</div>
  168.  
  169. 			</div>
  170. 														<div id="footer_separador"></div>
  171. 								<div id="footer">
  172. 					<hr/>
  173. 					&copy Desarrollado por Neoarcangel <?php echo date("Y");?>
  174. 				</div>
  175. 		</div>
  176. 	</div>
  177.  
  178.  
  179. </div>
  180. </center>
  181. </body>
  182. </html>


mis css


delphi
  1. body{margin-left:0px;margin-top:0px;	font-family:Verdana;}
  2.  
  3. #principal{	font-size:12px;	width:800px;background-color:#ffffff;	border:solid 2px #aa0000;}
  4.  
  5.  
  6. 	#cabecera{width:800px;height:100px;background-color:#00BFFF;color:#FFFFFF;float:left;}
  7. 		#main{width:800px;	height:100%;border:solid 2px #220501;}
  8. 			#menu{width:800px;	height:25px;float:left;	}
  9. 					.boton{width:120px;	height:25px;float:left;	background-color:#000000;color:#ffffff;	}
  10. 				  .url_boton{text-decoration:none;	color:#ffffff;	   }
  11. 				  #buscador{width:200px;height:25px;float:left;	text-align:center;  }
  12. 				  
  13. 				  
  14. 			#contenidosecun{width:800px;float:left;	}
  15. 					#contenedor{width:600px;	float:left;}
  16.  
  17. 						#separador{width:600px; height:20px;float:left;}
  18.  
  19. 						#post{width:600px;float:left;text-align:center;		}
  20. 							#titulo_post{width:600px;	height:20px;float:left;	}
  21. 								#titulo{width:400px;height:20px;float:left;text-align:left;font-weight:bold;}
  22. 								#fecha{width:200px;height:20px;float:left;text-align:right;}
  23. 							#texto_post{width:600px;float:left;text-align:left;}
  24. 							#separador_debajo_post{width:600px;height:10px;float:left;	}
  25. 							#debajo_post{width:600px;height:20px;float:left;}
  26. 								#leer_mas{width:400px;height:20px;float:left;text-align:left;}
  27. 								#comentarios{width:200px;height:20px;float:left;text-align:right;}
  28. 								#div_entre_post{width:600px;height:3px;float:left;background-color:#000000;	}
  29.  
  30. 								#div_paginacion_post{margin-top:5px;height:30px;	width:600px;float:left;text-align:center;font-size:12px;}
  31.  
  32. 					/*********************estilos para noticias.php*******************************/								
  33. 					#div_post_top		{width:600px; height:25px;	float:left;}
  34.  
  35. 						#div_post_contenedor	{width:600px;float:left;}
  36. 							#div_post_titulo	{width:600px;float:left;text-align:left;}
  37. 								#div_post_titulo_texto	{width:400px;float:left; height:20px;text-align:left;font-weight:bold;								font-size:14px;font-family:Verdana;}
  38. 								#div_post_titulo_fecha	{width:200px;float:left; height:20px;text-align:right;	text-decoration:underline;	}
  39. 							#div_separador_titulo	{width:600px;float:left; height:3px; background-color:#009966;}		
  40. 							#div_post_contenedor_detalle	{width:600px;border:solid 2px #aa0000;	float:left;	}		
  41. 								.div_separador_detalle_post{width:25px;float:left;	}
  42. 								#div_detalle_post	{width:550px;border:solid 3px #eeA3D9;margin-left:25px;	float:left; }		
  43. 									#contenedor_descarga_categoria_post	{width:550px;float:left;height:20px;}	
  44. 										    #div_categoria_post	{width:275px;height:20px;text-align:left;float:left;}														
  45. 											 #div_descarga_post	{width:275px;height:20px;text-align:right;float:left;color:#BFFFBF;	font-size:11px;}	
  46. 									#div_form_comentarios	{width:550px;text-align:left;float:left;}
  47. 										#div_textarea_msg_1	{width:100px;vertical-align:top;float:left;}
  48. 									#div_comentarios_post	{width:550px;border:solid 3px #bbbb00;text-align:left;	float:left;}
  49.  
  50.  
  51. 					/*********************fin de estilos para noticias.php*******************************/						
  52.  
  53. 					#sidebar{width:200px;float:left;}
  54. 						#separador_widget{width:200px; height:20px;float:left;}
  55. 						#widget{width:200px;float:left;margin-left:15px;}
  56. 								.separador_lateral_widget{width:15px;float:left;}
  57. 								#caja_widget{width:170px;float:left;}
  58. 								#titulo_widget{width:170px; height:20px;float:left;background-color:#333333;color:#ffffff;text-align:center;}
  59. 								#contenido_widget{width:170px;float:left;height:20px;background-color:#f0f0f0;text-align:center;	}
  60. 					#footer_separador{width:800px;	height:15px;	color:#000000;float:left;
  61.  
  62. 										}							
  63. 					#footer{width:800px;height:15px;background-color:#ffffff;color:#000000;font-size:10px;border:solid 2px #00A3D9;
  64. 							float:left;}



Espero me podais ayudar.
Gracias.
  • 0
Volver a CSS (Cascading Style Sheet)


  1. Comunidad Delphiaccess
  2. → PROGRAMACIÓN
  3. → Otros Lenguajes (.NET, Web, C, C++, Java, ASM)
  4. → CSS (Cascading Style Sheet)
  5. Privacy Policy
IP.Board spam blocked by CleanTalk.