Diferentes diseños de estructura de una página a tres columnas con CSS

Por Toni | Comentarios ( 0 ) | Trackbacks ( 0 )

En NOUPE encuentro un artículo donde trazan diferentes distribución o estructura del esqueleto del diseño de una página, con flexibilidad, con igual altura de las columnas y que funcione bien.

Nos dan una lista de recursos donde nos ofrecen diferentes diseños de la estructura completa todos ellos magníficos y en tres columnas mediante CSS, con cabeceras, barras de navegación, contenido de los contenedores, barras laterales y pies de página.

En cada uno de los enlaces te encuentras los códigos empleados, ejemplos, etc.:

3 Columns, The Holy Grail - Bonita y sencilla distribución de columnas con CSS para adaptar el diseño de la página.

3 Column Fluid CSS Layout - Las columnas fluyen con CSS que imitan las columnas y altura 100%

3-col Layout Via CSS - No hay tablas, no hay posición absoluta, con la misma altura de todas las columnas.

3 Columns - Flanking Menus - Tres columnas, con un orden muy acertado de todos sus elementos.

Multi-Column Layouts Climb Out of the Box - Esto es parte de un artículo en List Apart, con un enfoque ligeramente diferente: las fronteras se aplican directamente en el contenedor div.

LayoutGala’s 3 Fixed Columns - Distribución muy conseguida.

3 Col Fixed SEO - Una distribución muy lograda.

One True Layout

Max Design- Liquid insanity - Una distribución muy fluida que nos recuerda al diseño de la estructura de un periódico.

Otros tipos de estructuras interesantes:

CSS Layouts - 950 pixels- Puedes simplificar sus diseños CSS con estos sencillos diseños con CSS.

ThreeColumnLayouts- Mediante CSS en este lugar han reunido un montón de diseños de 3 columnas y al pulsar sobre ellos, nos proporciona un resumen de como están hechos de cada uno de ellos.

Little Boxes- 16 ejemplos de diferentes estructuras.

Layout Gala - Un conjunto de 40 maquetas que valen la pena compartir, en cada una de ellas encontrará tambión un enlace de descarga (si lo desea, puede descargar toda la colección, 40 páginas HTML en un solo archivo zip).

Algunos tutoriales y buenas prácticas:

The Perfect 3 Column Liquid Layout - Muy buena explicación de la estructura del CSS.

Position Is Everything- Explica algunos errores que se comenten con el CSS en los navegadores modernos, y proporciona ejemplos del comportamiento del CSS interesantes y muestra cómo se puede hacer la maqueta sin usar tablas.

Creating a CSS layout from scratch- Lastima que estó en inglós, nos explica la creación de un diseño CSS desde cero, mediante una guía paso a paso (12 páginas), para la elaboración de un sitio web mediante CSS.

Puedes dejar un comentario, o suscribirte al feed.