Ir al contenido


Foto

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


  • 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