Layout Fijo: resucitando los frames
Buenos tiempos eran esos donde reinaban los frames… no había que pensar en semántica, preocuparse por compatibilidad… todo se veía en Netscape y Explorer. Eran, como quien dice, browsers carne de perro. Pero ahora son otros tiempos, hay más conciencia de respetar las reglas para una mejor compatibilidad entre navegadores y plataformas, como se dice: mayor accesibilidad. Bueno, a lo que voy con todo este blablabla es que mostraré ahora una manera de construir un layout similar a los viejos frames, tan mal mirados actualmente. Puede ser verdaderamente útil, dependiendo del uso que el diseñador / desarrollador estime darle. La clave: position y overflow .
Comenzaremos por diagramar básicamente el sitio, con un encabezado (header), cuerpo del contenido (container) y un pie de página (footer).
Aquí está la hoja de estilos, nada fuera de lo normal
Bien, la clave ahora está en reordenar nuestro layout y aplicar los position de acuerdo a cada parte de nuestro sitio. La lógica es la siguiente: primero en nuestro HTML estará el #container, el DIV que soporta nuestro contenido. Luego, estarán los dos siguientes DIV’s: #header y #footer. Estos dos tienen position: absolute, donde se marcarán sus posiciones a través de top y bottom y no se moverán de ahí. El contenido pasará por detrás de estos dos DIV’s absolutos, y el #container tiene un position: fixed, además de overflow: auto para que su contenido pueda fluir, comportándose como un FRAMESET (incluso con barra de scroll).
Entonces, los cambios principales en la hoja de estilos fueron:
#header {
top: 0;>
left: 0;
width: 100%;
height: 100px;
position: absolute;
overflow: auto;
background-color: #C00;
border-bottom: 5px solid #900;
}
#container {
top: 105px;
left: 0;
bottom: 50px;
right: 0;
position: fixed;
overflow: auto;
background-color: #FFF;
padding: 20px;
}
#footer {
bottom: 0;
left: 0;
width: 100%;
height: 45px;
overflow: auto;
position: absolute;
background-color: #C00;
border-top: 5px solid #900;
}