Layout Fijo: resucitando los frames

29/ago/2006 25

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).

Ver Layout Básico 1

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; }

Ver Resultado Final

Ver Hojas de Estilos

Comentarios

  1. links for 2006-09-02 en newdisco [#]

    […] CSS Lab » Layout Fijo: resucitando los frames Como hacer que las paginas se comporten como si tuvieran frames pero con CSS. (tags: layout css frames webdesign design web2.0 layouts) […]

  2. Alvaro [#]

    justo lo que buscaba… nice work

    :)

  3. Javier Quirós [#]

    Es mi impresión, o en IE no funciona?
    Saludos.

  4. CSSLab Admin [#]

    mmm si nose q paso en su momento lo probe y funcionaba bien en IE6. vere cual es el detalle, gracias por hacermelo ver. salu2

  5. juan [#]

    Adivina donde no se ve ????

    exacto.

    IE

    en fin ,buena la idea igual.

  6. talí [#]

    qué tal!
    si quiero empezar a crear un layout para blogger desde cero que me recomiendas?…en para mi blog yo modifiqué uno ya existente sin embargo hay cosas que quisiera hacer y no he podido, pero más bien quisiera escribir el código desde cero y más limpio pues el que tengo creo tiene cosas que ni siquiera necesita…gracias y felicidades, muy buen blog!

  7. CSSLab Admin [#]

    tali, creo q lo mejor es hacerlo a mano o con la ayuda de dreamweaver. blogger debe de ser igual q cualquier cms o gestor de contenidos, debe trabajar con includes. averigua cuales son los que suelen ser llamados desde el mecanismo interno de blogger, y no deberia de limitarte en cuando al diseño. suerte.

  8. Mauricio [#]

    Funciona super en Firefox pero en IE no pasa nada
    hay alguna forma de que funcione???

  9. Jorlo [#]

    Brr.. tengo el mismo problema…
    y que pasa con Explore.. no lo soluciona :(

  10. CSSLab Admin [#]

    Estoy trabajando en un ejemplo gráfico crossbrowser, por mientras vean uno q funciona super en 456bereastreet.

  11. victor [#]

    como puedo hacer un menu asi como el de csslabb con ese ganchito que habre el menu, buenisimo esta….

  12. CSSLab Admin [#]

    Victor, eso es hecho con javascript. mira este articulo.

  13. oscar [#]

    no funciona en internet explorer 6. lo siento.

  14. David Cevallos [#]

    Hola estoy utilizando css frames para un proyecto web funcionan perfecto en todos los browsers bajo windows pero si lo utilizo en opera o firefox para mac os tiene un problema que el contenido flash del cuerpo se monta sobre la cabecera la cual se supone que deberia estar siempre visible la direccion es la siguiente http://www.mantilladesign.com/royalpalm/pantallas/index.html les agradeceria mucho si me pueden ayudar

  15. David Cevallos [#]

    Lo siento la direccion esta aqui
    http://www.mantilladesign.com/royalpalm/galapagos.php

  16. CSSLab Admin [#]

    David, al #framecontent dale un z-index: 99; y se solucionara. lo q te sucedio es similar a lo q puedes leer en Lightbox + SWF

  17. David Cevallos [#]

    Gracias tu solucion ha sido muy eficaz y ya resolvi el problema de los contenidos flash, queria comentarte algo para que funcionen los frmaes en IE debes tener un archivo css aparte solo para el IE por lo menos asi esta echo en http://www.456bereastreet.com/lab/cssframes/ yo me baje la misma pagina de ejemplo con firefox y otra con IE para que fuincione en todos los browsers y no da problemas

    Saludos y gracias
    David

  18. David Cevallos [#]

    Hola de nuevo tengo un nuevo problema con los marcos css no se si me puden ayudar de nuevo al hacer click sobre los botones del menu principal aparecen barras de scroll en la cabecera me podrian ayudar para que estas no aparezcan la direccion es http://72.167.43.231/galapagos.php

  19. CSSLab Admin [#]

    David, es un tema de estilos con alguna class selected q hiciste. trata de darle al header overflow: hidden; suerte

  20. David Cevallos [#]

    Gracias se ha solucionado el problema con tu guia, un favor mas tu sabes la direccion web de algun menu desplegable hecho con css o javascript que sea posible hacerlo dinamico mediante una base de datos mysql

    Saludos y gracias nuevamente

    David

  21. CSSLab Admin [#]

    David, cualquier menu puedes hacerlo dinamico. Puedes construir el tuyo o sacar uno de Listamatic por ejemplo. Suerte.

  22. David Cevallos [#]

    Hola gracias por toda la ayuda realmente me han ayudado mucho en el manejo de CSS que lo hacia de manera muy basica tengo una nueva inquietud implante unas pestañas que toman su informacion de la base de datos estan echas con motools y funcionan perfectamente en Firefox, Safari y Opera pero en el Internet Explorer la capa que contiene las pestañas se queda como colgando la direccion es la siguiente http://72.167.43.231/galapagos.php?cat=1
    Les agradezcon de antemano su valiosa ayuda

    David

  23. David Cevallos [#]

    Hola le saluda nuevamente David Cevallos cambie mi script de pestañas por uno de lista y que saca la consulta con ajax pero me he topado con el mismo problema que en todos los browsers excepto el Internet explorer se ve bien, en el IE el contenido al hacer click sobre alguno de los items seleccionados se va a un lado no se si me pueden ayudar la direccion es
    http://localhost:81/palm/galapagos.php?cat=1&opc=travel

  24. David Cevallos [#]

    LO siento te mande la direccion local la direccion es http://72.167.43.231/galapagos.php?cat=1&opc=travel

  25. Juglar : CSS Layouts - Agosto - 2005 [#]

    […] Componer un diseño de 3 columnas en XHTML y CSS + Cristalab Learn CSS Positioning in Ten Steps CSSLab » Layout Fijo: resucitando los frames CSSLab » Layout fijo a elástico en sólo 4 caracteres Create a simple liquid layout – .net […]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab