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 originalbody {
/*Estilo visual del body*/
background-image:url(media/bg.png);
}
.banner {
/*Estilo del div que contendrá el banner y subbanner*/
width:950px;
padding-top:3px;
align:center;
margin-left: auto;
margin-right: auto;
border:solid 0px;
}
.bar{
width: 950px;
margin-left: auto;
margin-right: auto;
background: -moz-linear-gradient(top, #f2f2f2, #e5e5e5);
background: -webkit-linear-gradient(top, #f2f2f2, #e5e5e5);
color:#b84a4a;
font-family:Verdana;
font-size:12px;
font-weight:bold;
padding-top:7px;
padding-bottom:7px;
text-indent:15px;
text-align:right;
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}
.contgral{
width: 950px;
background-color: #f8f8f8;
margin-left: auto;
margin-right: auto;
position:absolute;
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}
.latder{
width: 250px;
background-color: #eaeaea;
margin-left: auto;
margin-right:10px;
float:right;
margin-top:10px;
padding-bottom:7px;
border-color: #e1e1e1;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}
.inses{
color:#b84a4a;
font-family:Verdana;
font-size:10px;
font-weight:bold;
text-align: 5px;
padding-left: 5px;
padding-right: 5px;
margin-top:10px;
padding-bottom:7px;
}
.contnot{
width: 670px;
background-color: #eaeaea;
margin-left: 10px;
margin-right:auto;
float:left;
margin-top:10px;
padding-bottom:7px;
border-color: #e1e1e1;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}
input[type='text'] {
/*Estilo visual del las etiquetas de areas de texto*/
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
background-color:#f9f9f9;
color:#b84a4a;
-moz-box-shadow: 1px 0px 1px #b7b6b7;
-webkit-box-shadow: 1px 0px 1px #b7b6b7;
font-family:Verdana;
text-indent:5px;
}
.busc{
/*Estilo visual del las etiquetas de areas de texto*/
margin-right:25px;
}
.cent{
margin-left: auto;
margin-right:auto;
padding-top:10px;
padding-bottom:7px;
text-align:center;
display: block;
margin: auto;
}
Código HTML:
Ver original<title>Sector 506 | Revolucion Tecnologica Costarricense
</title> <link href="estilo.css" rel="stylesheet" type="text/css"> <!--Invoca a la hoja de estilos CSS-->
<section name="top" class="banner"><!--Sección que contiene el banner, el menu de navegación y demás formularios--> <img src="media/banner.png" /> <ul class="menu prin"><!--Menú de navegación--> <li class="current"><a href="index.php" title="Página inical de Tecnologías de Información | UTN Costa Rica - Puntarenas">Inicio
</a></li> <li><a href="informatica.php">Inform
ática
</a></li> <li><a href="electronica.php">Electr
ónica
</a></li> <li><a href="robotica.php">Robotica
</a></li> <li><a href="aeroespacial.php">Aero Espacial
</a></li> <li><a href="fisica.php">F
ísica
</a></li> <li><a href="quimica.php">Qu
ímica
</a></li> <li><a href="biologia.php">Biolog
ía
</a></li> <li><a href="medicina.php">Medicina
</a></li> <li><a href="foros.php">Foros
</a></li> <li><a href="calendario.php">Calendario
</a></li> <li><a href="directorio.php">Directorio
</a></li> </nav><!--Cierre del menú--> </div><!--Cierre del div class bar--> </div><!--Cierre del div class banner--> </section><!--Cierre de la sección Top-->
<section name="contgral"><!--Sección con el contenido principal-->
<form method="post" name="formita" onsubmit='return checkdata(this)' action="<?php echo $Accion_Formulario; ?>" >
<div><input name="nickname" type="text" size="50" maxlength="75" autofocus="true" /></div> <div><input name="password" type="password" size="50" /></div> <div><input name="repassword" type="password" size="50" /></div> <div><input name="nombre" type="text" value="" size="50" /></div> <div><input name="primer_apellido" type="text" size="50" maxlength="15"/></div> <div><input name="segundo_apellido" type="text" size="50" maxlength="10" /></div> <div><input name="identificacion" type="text" size="50" maxlength="10" /></div> <div><input name="telefono" type="text" size="50" maxlength="12" /></div> <div>Correo electronico:
</div> <div><input name="email" type="text" size="50" maxlength="45" /></div> <div><select size="1" name="sexo" style="width:327px;"> <div>Fecha de nacimiento: (Año-Mes-Día)
</div> <div><input name="fecha_nac" type="text" size="50" maxlength="11" value="Ejemplo: 1990-01-23" placeholder="Ejemplo 1990-10-22" /></div>
<!-- Sede:
<select size="1" name="sede" style="width:327px;">
<option value="Central">Central</option>
<option selected value="Pacífico">Pacífico</option>
<option value="Guanacaste">Guanacaste</option>
<option value="San Carlos">San Carlos</option>
</select>-->
<div><p></p><input name="enviar" type="submit" value="Registrarme" class="white"/><p></p> </div><!--Cierre del div class contnot-->
Bienvenidos al Sector 506. Sitio no gubernamental de los avences cientificos y tecnológicos en
No hay limitaciones para registrarse m
ás que mantener un vocabulario aceptable si se dispone a comentar.
<br/>Para sugerencias y/o comentarios dirijase al sector de mensajes en su panel de usuario y envie al destinatario "Super Administrador"
</div><!--Cierre del div latder-->
</div><!--Cierre del div contgral--> </section><!--Cierre de la sección contogral-->
De antemano, gracias
YQDIOSLB :-)