Header & Footer Quietos

[juanpablosolari]

Hola muchachos, estoy maquetando una web, el problema es el siguiente:

Quiero que el Header quede en el alto del navegador con "width:100%" lo mismo con el footer pero quiero que quede en lo bajo.

Ahora: el CSS que estoy utilizando es:

Código:

*{
	margin: 0;
	padding: 0; 
}

#header{
	background:#26221E;
	width:100%;
	height:100px;
	position:fixed;
	margin-bottom:20px;
}

#content{
	background: #666;
	width:900px;
	height:600px;
	margin:auto;
	position: absolute;
	top: 140px
}

#footer{
	background: #060;
	width:100%;
	height:100px;
	position:fixed;
	margin-top:20px;

}

Pero no queda... osea quiero que el contenido central quede en el medio, se adapte a los monitores... el tamaño del div donde va estar el contenido va ser fijo, pero quiero que se centre...

Abrazo

[Oscar_Hidro]

Para centrar el contenido del div content, tendras que eliminar la posicion absoluta, ya que esta instruccion sirve para posicionar en pantalla algun elemento, y siempre te tomará esa posicion independientemente de la resolucion de pantalla que tengas. Es decir, si das una posicion absoluta a un elemento, y a su vez le das un margin-left:20px; siempre te va a mostrar ese elemento con un margen a la izquierda de 20px, sea la resolucion que sea.

Asi que simplemente la eliminas y tendras que incluir el margin-left:auto; y margin-right:auto; para que te centre en la pantalla el div "content".

Con la posicion absoluta podrias hacerlo dando un posicionamiento en porcentaje, en vez de pixeles, generando asi, un espacio a la izquierda dependiendo del porcentaje asignado.
=)

[comablck]

para lograr esto, no deberias ponerle un alto al header y footer del 100% sino uno especifico, para poder centrar el content y te deje los margenes respectivos, algo asi:

*{padding:0; margin:0}
body{background:#ccc}
.header{position:fixed; top:0; width:100%; background:#fff; height:90px}
.footer{position:fixed; bottom:0; width:100%; background:#fff; height:30px}
.content{width:900px; margin:100px auto;}

<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>

[juanpablosolari]

Estimados me sirvio un monton lo que me facilitaron la verdad que estoy sumamente agradecido.

Una consulta más... la idea de la web es la siguiente:



Se tendria que adaptar a todas las resoluciones ya que cuando el monitor es mas chico del que yo uso el navegador hace scroll, la idea es que se aumente o se achique el espacio en blanco que queda arriba y abajo del content que no haga el scroll. Tendria que acercarse o alejarse del footer y del header en forma proporcionada...

¿Es posible? Que me recomiendan hacer?

Saludos! y Muchas gracias


El codigo quedo de la siguiente manera:

Código:

*{
	margin: 0;
	padding: 0; 
}

#header{
	background:#26221E;
	width:100%;
	height:100px;
	position:fixed;
	top: 0px;
}

#content{
	background: #26221E;
	width:900px;
	height:575px;
	margin:110px auto;
	top: 140px
}

#footer{
	background:#26221E;
	width:100%;
	height:100px;
	position:fixed;
	bottom:0px;
}

[Oscar_Hidro]

Para esto tendrias que darle al header, content y footer una altura en porcentajes de igual manera que has definido el ancho de 100% en header y footer.

Es decir, que puedes darle al header y footer un height de 10% a cada uno, por lo que ya tendrias un 20% de espacio en pantalla ocupado. Podrias poner una altura al content de un 76% para que te sobre de espacio 2% arriba del content, y 2% abajo del content. Claro que ya depende de como se vea, tu podras asignarle la altura en porcentajes que mejor te paresca a cada elemento.

Existe la metodologia llamada "Web responsive design", es bastante interesante y se trata en pocas palabras, armar tu pagina web y que sea ajustable a cualquier resolucion de pantalla. Es facil de aprender, y ayuda mucho a aprender el css de manera limpia.

Haz la prueba con lo que te comente y nos avisas si te sirvio. Saludos

[juanpablosolari]

Estimados les agradezco, lo pude solucionar...
Ahora el logo del sitio va ser un jpg y el contenedor tiene porcentaje
de que tamaño lo hago?

Muchas gracias!

[comablck]

tambien podes adaptar la imagen del logo con porcentaje.. basado en ancho o alto dependiendo como te parezca.. siempre por medio del css, lo ideal para este caso, seria hacer el logo algo grande ya q se va a estar cambiando de tamaño segun la resolucion como mencionas.. el porcentaje ajustalo a tu conveniencia, como te digo puede ser en base al alto o ancho de la imagen