[SOLUCIONADO] Mantener estatico un div

Pr0Exp · #1 (**permalink**) 12/01/2014, 12:57

Hola.

Como puedo conseguir el efecto que tiene esta pagina.

Si se reduce la pantalla la parte central (donde esta el contenido ) sigue centrado y se reducen los margenes de la derecha e izquierda, hasta que ya no hay margenes y empieza a reducir la parte central.

http://www.casaspalets.com/es/reparacion-de-palets.html

gracias

pzin · #2 (**permalink**) 12/01/2014, 13:57

Con márgenes laterales automáticos:

Código CSS:

Ver originalmargin: 0 auto;

Lo que no veo es que se reduzca la parte central como dices, pero bueno, eso se consigue especificando un ancho máximo:

Código CSS:

Ver originalmax-width: 1234px;

Pr0Exp · #3 (**permalink**) 13/01/2014, 14:59

Gracias por la respuesta pero donde debo poner el codigo?entiendo que en mi container(parte central), lo que me hace ahora es tirarme toda esa zona a la izq y no se centra, he estado buscando y en teoria haciendo lo que me indicas se deberia centrar automaticamente pero no es asi..no se si por culpa de otra etiqueta que no se esta centrando

Código:

<body>
		<div id="backgroundweb"> <!--Color fondo-->
		
			<div id="container">

				<div id="header">
					<div id="companyname">x</div>
					<div id="companyname1">xS.L</div><br>
					<div id="companyinformation">xxx</div>
				</div>		
				
				<div id="menu">
					<ul>
						<li><a title="Quienes somos" href="empresa.php">Quienes somos</a></li>
						<li><a title="Instalaciones" href="empresa.php">Instalaciones</a></li>
						<li><a title="Donde estamos" href="location.html">Donde estamos</a></li>
						<li><a title="Pedido" href="empresa.php">Pedido</a></li>
						<li><a title="Contacto" href="empresa.php">Contacto</a></li>
					</ul>
				</div>			
				
			
					<div id="bodysection">
					body
					</div>
					<div id="logo">
						<img src="images/nimf-15.gif" width="126px" height="67px" alt="Reciclar">
						<img src="images/anrepa.gif" width="152px" height="31px" alt="Reciclar">			
						<img src="images/rec.gif" width="94px" height="88px" alt="Reciclar">
					</div>
				
				
				<div id="footer">tyrty</div>
			</div>				
		</div>
	</bo

Código:

html,body
{
	width:100%;
	height:100%;
}

#backgroundweb {
width: 100%;
height: 100%;
background-color: #c2db9c;
background: #fff9f9; /* Old browsers */
background: -moz-linear-gradient(top, #c2db9c 30%, #99cc66 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#fff9f9), color-stop(100%,#70a521)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fff9f9 30%,#70a521 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fff9f9 30%,#70a521 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fff9f9 30%,#70a521 100%); /* IE10+ */
background: linear-gradient(to bottom, #fff9f9 30%,#70a521 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff9f9', endColorstr='#70a521',GradientType=0 ); /* IE6-9 */
}

#container
 {
	background-color:white;
    width: 1000px;
    height: 800px;
	margin-left: 0 auto;
	margin-right: 0 auto;
	display:block;
	position:absolute;
	overflow:scroll;
}

#header
{
	height: 100px;
}

#menu
{
	width: 300px;
	height: 600px;
	float:left;
}

#bodysection
{
	width: 600px;
	height: 600px;
	float:left;
}



#footer
{
	height: 100px;
	clear:both;
}

/*Header*/
#companyname
{
	font-family:arial,Verdana,Tahoma;
	color:green;
	font-size:20px;	
	font-weight:bold;
	margin-left: 20px;
}

#companyname1
{
	font-family:arial,Verdana,Tahoma;
	color:red;
	font-size:40px; 
	font-weight:bold;
	text-decoration: none; 
	border-bottom: 5px solid green;
	margin-left: 20px;
	
}

#companyinformation
{
	font-family:arial,Verdana,Tahoma;
	color:green;
	font-size:10px;
	margin-left: 20px;
}

#logo
{
	width: 100px;
	height: 600px;
	float:left;
}

div#logo img {
  margin: 20px 0;
}

/*Footer*/
#footer
{
	font-family:arial,Verdana,Tahoma;
	color:#BDBDBD;
	font-size:10px;
	margin-left: 20px;
}

pzin · #4 (**permalink**) 13/01/2014, 15:04

No funciona porque tiene puesta una posición absoluta, y con eso sacas al elemento del flujo del documento por lo que no interactúa con el resto del documento.

Pr0Exp · #5 (**permalink**) 14/01/2014, 14:21

ese no es el problema, ya que se lo puse por probar porque soy incapaza de ver que esta fallando

Código:

#container
 {
	background-color:white;
    width: 1000px;
    height: 800px;
	margin-left: 0 auto;
	margin-right: 0 auto;
	display:block;
}

pzin · #6 (**permalink**) 15/01/2014, 02:30

Cita:

Iniciado por Pr0Exp

ese no es el problema, ya que se lo puse por probar porque soy incapaza de ver que esta fallando

No sé porque dices que no cuando te están diciendo que si. Otra cosa es que tengas otro problema adicional, que también lo tienes, pero la posición absoluta interfiere también.

El otro problema es que estás pasando varios valores a unas propiedades como si fueran un shorthand, cuando no lo son, luego admiten sólo un valor. Pon el margen como te dije en el primer mensaje.

Pr0Exp · #7 (**permalink**) 16/01/2014, 15:09

Gracias por la ayuda pzin.

Me has orientado,al final lo he conseguido

antes estaba asi y no funcionaba

Código:

#container
 {
	background-color:white;
        width: 1000px;
         height: 800px;
	margin-left: 0 auto;
	margin-right: 0 auto;
}

al final asi me ha funcionado, no sé si será por el navegador o que.

Código:

#container
 {
	background-color:white;
        width: 1000px;
        height: 800px;
	margin: 0 auto;
}

pzin · #8 (**permalink**) 16/01/2014, 15:11

Cita:

Iniciado por Pr0Exp

al final asi me ha funcionado, no sé si será por el navegador o que.

Cita:

Iniciado por pzin

El otro problema es que estás pasando varios valores a unas propiedades como si fueran un shorthand, cuando no lo son, luego admiten sólo un valor. Pon el margen como te dije en el primer mensaje.