Ver Mensaje Individual
  #1 (permalink)  
Antiguo 06/11/2010, 12:47
Avatar de MarioAlejandroCR2
MarioAlejandroCR2
 
Fecha de Ingreso: mayo-2010
Ubicación: Esparza - Puntarenas
Mensajes: 98
Antigüedad: 7 años, 10 meses
Puntos: 2
Información Como puedo centrar un div contenedor

Estoy desarrollando un sitio web en 100% software libre pero ocurre el siguiente problema:


(Ver captura)

El contenedor solo se centra y se ve su color de fondo si pongo una altura ya definida, pero como voy a definir un tamaño si las noticias pueden variar, si pongo "position:absolute" si se ve su color de fondo pero no se centra. por si es necesario pondré el código fuente del archivo css y el de registro.html (solo para guiar).

CSS
Código CSS:
Ver original
  1. body {
  2. /*Estilo visual del body*/
  3. background-image:url(media/bg.png);
  4. }
  5. .banner {
  6. /*Estilo del div que contendrá el banner y subbanner*/
  7. width:950px;
  8. padding-top:3px;
  9. align:center;
  10. margin-left: auto;
  11. margin-right: auto;
  12. border:solid 0px;
  13. }
  14. .bar{
  15. width: 950px;
  16. margin-left: auto;
  17. margin-right: auto;
  18. background: -moz-linear-gradient(top, #f2f2f2, #e5e5e5);
  19. background: -webkit-linear-gradient(top, #f2f2f2, #e5e5e5);
  20. color:#b84a4a;
  21. font-family:Verdana;
  22. font-size:12px;
  23. font-weight:bold;
  24. padding-top:7px;
  25. padding-bottom:7px;
  26. text-indent:15px;
  27. text-align:right;
  28. -moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  29. -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  30. box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
  31. }
  32. .contgral{
  33. width: 950px;
  34. background-color: #f8f8f8;
  35. margin-left: auto;
  36. margin-right: auto;
  37. position:absolute;
  38. -moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  39. -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  40. box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
  41. }
  42. .latder{
  43. width: 250px;
  44. background-color: #eaeaea;
  45. margin-left: auto;
  46. margin-right:10px;
  47. float:right;
  48. margin-top:10px;
  49. padding-bottom:7px;
  50. border-color: #e1e1e1;
  51. -moz-border-radius: 5px 5px 5px 5px;
  52. -webkit-border-radius: 5px 5px 5px 5px;
  53. }
  54. .inses{
  55. color:#b84a4a;
  56. font-family:Verdana;
  57. font-size:10px;
  58. font-weight:bold;
  59. text-align: 5px;
  60. padding-left: 5px;
  61. padding-right: 5px;
  62. margin-top:10px;
  63. padding-bottom:7px;
  64. }
  65. .contnot{
  66. width: 670px;
  67. background-color: #eaeaea;
  68. margin-left: 10px;
  69. margin-right:auto;
  70. float:left;
  71. margin-top:10px;
  72. padding-bottom:7px;
  73. border-color: #e1e1e1;
  74. -moz-border-radius: 5px 5px 5px 5px;
  75. -webkit-border-radius: 5px 5px 5px 5px;
  76. }
  77. input[type='text'] {
  78. /*Estilo visual del las etiquetas de areas de texto*/
  79. -moz-border-radius: 5px 5px 5px 5px;
  80. -webkit-border-radius: 5px 5px 5px 5px;
  81. background-color:#f9f9f9;
  82. color:#b84a4a;
  83. -moz-box-shadow: 1px 0px 1px #b7b6b7;
  84. -webkit-box-shadow: 1px 0px 1px #b7b6b7;
  85. font-family:Verdana;
  86. text-indent:5px;
  87. }
  88. .busc{
  89. /*Estilo visual del las etiquetas de areas de texto*/
  90. margin-right:25px;
  91. }
  92. .cent{
  93. margin-left: auto;
  94. margin-right:auto;
  95. padding-top:10px;
  96. padding-bottom:7px;
  97. text-align:center;
  98. display: block;
  99. margin: auto;
  100. }

HTML
Código HTML:
Ver original
  1. <title>Sector 506 | Revolucion Tecnologica Costarricense</title>
  2. <link href="estilo.css" rel="stylesheet" type="text/css">
  3. <!--Invoca a la hoja de estilos CSS-->
  4. </head>
  5. <section name="top" class="banner"><!--Sección que contiene el banner, el menu de navegación y demás formularios-->
  6. <div class="banner">
  7. <img src="media/banner.png" />
  8. <nav>
  9. <ul class="menu prin"><!--Menú de navegación-->
  10. <li class="current"><a href="index.php" title="Página inical de Tecnologías de Información | UTN Costa Rica - Puntarenas">Inicio</a></li>
  11. <li><a href="informatica.php">Inform&aacute;tica</a></li>
  12. <li><a href="electronica.php">Electr&oacute;nica</a></li>
  13. <li><a href="robotica.php">Robotica</a></li>
  14. <li><a href="aeroespacial.php">Aero Espacial</a></li>
  15. <li><a href="fisica.php">F&iacute;sica</a></li>
  16. <li><a href="quimica.php">Qu&iacute;mica</a></li>
  17. <li><a href="biologia.php">Biolog&iacute;a</a></li>
  18. <li><a href="medicina.php">Medicina</a></li>
  19. <li><a href="foros.php">Foros</a></li>
  20. <li><a href="calendario.php">Calendario</a></li>
  21. <li><a href="directorio.php">Directorio</a></li>
  22. </ul>
  23. </nav><!--Cierre del menú-->
  24. <div class="bar">
  25. Buscar <input type="text" class="busc"></input>
  26. </div><!--Cierre del div class bar-->
  27. </div><!--Cierre del div class banner-->
  28. </section><!--Cierre de la sección Top-->
  29.  
  30. <section name="contgral"><!--Sección con el contenido principal-->
  31. <div class="contgral">
  32.  
  33. <div class="contnot">
  34. <div class="inses">
  35. <form method="post" name="formita" onsubmit='return checkdata(this)' action="<?php echo $Accion_Formulario; ?>" >
  36.                <div><h3>Formula de registro</h3></div>
  37.              
  38.                 <div>NickName:</div>
  39.                 <div><input name="nickname" type="text" size="50" maxlength="75" autofocus="true" /></div>
  40.                 <div>Password:</div>
  41.                 <div><input name="password" type="password" size="50"  /></div>
  42.                 <div>Repetir Password:</div>
  43.                 <div><input name="repassword" type="password" size="50"  /></div>
  44.                 <div>Nombre:</div>
  45.                 <div><input name="nombre" type="text"  value="" size="50" /></div>
  46.                 <div>Primer apellido:</div>
  47.                 <div><input name="primer_apellido" type="text" size="50" maxlength="15"/></div>
  48.                 <div>Segundo apellido:</div>
  49.                 <div><input name="segundo_apellido" type="text" size="50" maxlength="10"  /></div>
  50.                 <div>Identificación:</div>
  51.                 <div><input name="identificacion" type="text" size="50" maxlength="10"  /></div>
  52.                 <div>Teléfono:</div>
  53.                 <div><input name="telefono" type="text" size="50" maxlength="12"  /></div>
  54.                 <div>Correo electronico:</div>
  55.                 <div><input name="email" type="text" size="50" maxlength="45"  /></div>
  56.                 <div>Sexo:</div>
  57.                 <div><select size="1" name="sexo" style="width:327px;">
  58.                 <option value="M">Masculino</option>
  59.                 <option value="F">Femenino</option>
  60.                 </select></div>
  61.                 <div>Fecha de nacimiento: (Año-Mes-Día)</div>
  62.                 <div><input name="fecha_nac" type="text" size="50" maxlength="11" value="Ejemplo: 1990-01-23" placeholder="Ejemplo 1990-10-22" /></div>
  63.              
  64.                 <!-- Sede:
  65.                <select size="1" name="sede" style="width:327px;">
  66.                <option value="Central">Central</option>
  67.                <option selected value="Pacífico">Pacífico</option>
  68.                <option value="Guanacaste">Guanacaste</option>
  69.                <option value="San Carlos">San Carlos</option>                
  70.                </select>-->
  71.              
  72.                 <div><p></p><input name="enviar" type="submit" value="Registrarme" class="white"/><p></p>
  73.               </div>
  74. </div>
  75. </div><!--Cierre del div class contnot-->
  76.  
  77. <div class="latder">
  78. <div class="inses">
  79. Bienvenidos al Sector 506. Sitio no gubernamental de los avences cientificos y tecnol&oacute;gicos en
  80. Costa Rica.<br/>
  81. No hay limitaciones para registrarse m&aacute;s que mantener un vocabulario aceptable si se dispone a comentar.<br/>
  82. Para sugerencias y/o comentarios dirijase al sector de mensajes en su panel de usuario y envie al destinatario &quot;Super Administrador&quot;
  83. </div>
  84. </div><!--Cierre del div latder-->
  85.  
  86. </div><!--Cierre del div contgral-->
  87. </section><!--Cierre de la sección contogral-->
  88. </body>
  89. </html>
  90.  
  91. De antemano, gracias
  92. YQDIOSLB :-)