Foros del Web » Creando para Internet » CSS »

Como puedo centrar un div contenedor

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

coloca todo el html de tu web dentro un div:

Cita:
<div id="contenedor">
aquí hira todo el codigo de tu web
</div>
CSS sería:

Cita:
#contenedor{width:960px; margin:0 auto;}
Modifica el valor de ancho del contenedor por el ancho de tu sitio web y listo!

Cualquier duda postea! ;)

Etiquetas: contenedor
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 15:10.