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;
}
¿Quedó claro o no?
justo lo que buscaba… nice work
Es mi impresión, o en IE no funciona?
Saludos.
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
Adivina donde no se ve ????
exacto.
IE
en fin ,buena la idea igual.
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!
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.
Funciona super en Firefox pero en IE no pasa nada
hay alguna forma de que funcione???
Brr.. tengo el mismo problema…
y que pasa con Explore.. no lo soluciona
Estoy trabajando en un ejemplo gráfico crossbrowser, por mientras vean uno q funciona super en 456bereastreet.
como puedo hacer un menu asi como el de csslabb con ese ganchito que habre el menu, buenisimo esta….
Victor, eso es hecho con javascript. mira este articulo.
no funciona en internet explorer 6. lo siento.
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
Lo siento la direccion esta aqui
http://www.mantilladesign.com/royalpalm/galapagos.php
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
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
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
David, es un tema de estilos con alguna class selected q hiciste. trata de darle al header overflow: hidden; suerte
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
David, cualquier menu puedes hacerlo dinamico. Puedes construir el tuyo o sacar uno de Listamatic por ejemplo. Suerte.
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
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
LO siento te mande la direccion local la direccion es http://72.167.43.231/galapagos.php?cat=1&opc=travel