Diseño fijo que parece líquido.

pur · #1 (**permalink**) 24/02/2011, 18:57

Hola he visto en muchas webs que tienen diseños fijos pero que los colores de fondo llegan al borde de la pantalla sea cual sea la resolución.
O sea si la cabecera es color naranja, esta llega hasta el borde siempre, lo mismo con el cuerpo y el pie.
Seguramente esta sea una técnica que incluye el fondo, css, etc.

Si me pueden dar una punta de como se hace les agradezco.
Saludos.

sanxuan · #2 (**permalink**) 24/02/2011, 19:22

Si ya sabes algo de HTML y CSS, creo que la mejor idea es usar tu navegador habitual, sus herramientas de desarrollador, Firebug si usas Firefox, y empezar a investigar cómo están hechas tus páginas favoritas.
Se suelen usar divs que ocupan el ancho del navegador, dentro de los cuales se centra otro div de ancho fijo centrado respecto al anterior.
Se puede usar la propiedad background-repeat para el fondo si es un degradado o algo similar.

cristian_cena · #3 (**permalink**) 24/02/2011, 23:03

Para lograr ese efecto puede que te sea útil trabajar en bloques. uno debajo del otro ;)

Prueba este código:

Código HTML:

Ver original<body>
<div class="liquido"><div class="centrado"> ...cabeza... </div></div>
<div class="centrado"> ...cuerpo... </div>
<div class="liquido"><div class="centrado"> ...pie... </div></div>
</body>

Código CSS:

Ver original.liquido{
width:100&#37;;
height:50px;
background:#707070;
/*si necesitas repetir una imagen de fondo puedes hacer...
background:#707070 url('directorio/archivo.xxx') 0 0 repeat-x;
*/
}
.centrado{
width:960px;
height:50px;
margin:0 auto;
background:gray;
}

Saludos.