You are on page 1of 12

Portada

Monotematicos
Secciones
Bloging
Comunidad
Wiki
RSS

Usuarios: Login | Registro
DesarrolloWeb.com > Manuales > Maquetación CSS con 960 Grid System

Clases definidas en el framework CSS 960
Grid System
27 de abril de 2009

Además.com en el Manual de 960 Grid System. en los que veremos un ejemplo de diseño. Copyright. Por Miguel Angel Alvarez Atención: Contenido exclusivo de DesarrolloWeb. No reproducir. pero de cualquier forma vamos a explicar todas las clases disponibles para que ofrecer una documentación completa. no tendremos problemas en dominarlas todas y utilizarlas con soltura. En este artículo queremos ofrecer unas explicaciones detalladas sobre las distintas clases que incorpora 960 Grid System. dado que son realmente pocas. Convendría sin duda leer desde el principio este manual. En los anteriores capítulos publicados en DesarrolloWeb. que incluían la descripción de las clases más importantes como container_xx y grid_xx. Las clases CSS que define este framework CSS son bastante sencillas de entender y de utilizar en nuestros diseños. Compartir en redes sociales Valoración del artículo: 0 votos Enviar un comentario Conociendo y explotando las distintas clases (class de CSS) disponibles para la maquetación CSS con 960 Grid System. para que podamos utilizar el framework sin problemas y podamos entender también los próximos artículos. .com. ya explicamos qué es un framework CSS y ofrecimos unas primeras notas sobre éste.

que ya explicamos con mayor detalle en el artículo Lo básico sobre el uso de 960 grid Ahora veamos otras clases que sin lugar a dudas también nos vendrán bien y tendremos que saber utilizar para implementar diseños medianamente avanzados con el framework CSS. desde grid_1 hasta grid_16. Por ejemplo. de grid_xx. con grid_8.. las clases grid_xx tienen un margen de 10 píxeles a la izquierda y la . Class grid_xx: La clase grid_xx define un elemento del diseño que será colocado en un contenedor y ajustado a la rejilla que forma 960 Grid System. donde colocaremos luego todos los contenidos de nuestro diseño. El valor "xx". En el caso del container_16 tendríamos hasta 16 tipos de elementos con distintas anchuras. porque se dijo en el primer artículo de este manual. más anchura se dedicará a este elemento. En los diseños con el container_12 se tienen doce columnas y con grid_xx conseguiremos también doce distintos anchos de columnas. Class alpha y class omega: Estas dos clases sirven cuando estamos anidando unos grid dentro de otros. con grid_1 se obtendrá un elemento con una anchura igual a un doceavo del espacio total de la página. de 12 y 16 columnas.Class container_xx: Esta clase sirve para definir un contenedor. A un número mayor. que se forman con las clases container_12 y container_16. obtendríamos un elemento de anchura igual a 8 doceavos del espacio y así. Como deberíamos saber ya. expresa el tamaño de la rejilla que se está definiendo. Existen dos tipos de contenedores. Estas son las clases principales. para ajustar los márgenes de los distintos elementos anidados.

los márgenes de los grid_xx anidados van incrementándose y esto nos haría que los espacios disponibles no fueran suficientes para contener todos los elementos. arriba del todo con fondo rosa es la cabecera. a las que les hemos puesto un color de fondo para saber dónde están. Quizás logre explicarlo mejor a la vista de una imagen. Por ejemplo grid_12 que utiliza todo el ancho de la página. Con las clases alpha y omega lo podremos solucionar. La primera.derecha. en realidad tiene 940 píxeles. que es el resultado de a 960 restarle 10 píxeles de margen a la izquierda y otros 10 a la derecha. Si metemos unos grid_xx dentro de otros. En la imagen anterior vemos 4 capas. que no nos interesa mucho .

En fin. sino que podría ocurrir que las distintas grid que hemos colocado en el diseño no tengan el espacio suficiente para posicionarse correctamente. pero nos viene bien verla para hacernos una idea de los espacios. con color azul.para la explicación. se deben colocar las clases alpha y omega. Estas dos clases debemos utilizarlas siempre que tengamos un grid_xx que tenga a su vez otros grid_xx anidados. con color de fondo gris. puede que no quepan todas las cajas colocadas en el diseño con las clases grid_xx. que para solucionar este problema. se deja ver un espacio vacío que tiene los fondos de las capas que se están por debajo de la Capa 3. Class prefix_xx: Esta clase sirve para anclar una grid_xx dejando un espacio vacío a la izquierda. La clase alpha sirve para eliminar el margen de 10 píxeles a la izquierda y la clase omega para eliminar el margen de 10 píxel de la derecha. pero realmente debido a los márgenes de las capas 2 y 3. que a su vez contiene a la Capa3. Esto nos sirve en el momento que queramos dejar un espacio antes de meter una capa con grid_xx que no queremos que empiece a la izquierda del todo. Al perder 10 + 10 píxeles por esos márgenes. Veamos esta imagen: . Estos espacios vacíos seguramente no nos molesten sólo estéticamente. El primer grid_xx hijo debería tener también la clase alpha y el que coloquemos como último debe tener también la clase omega. Luego tenemos la Capa1. Por ejemplo. prefix_1 haría que la grid tuviera el espacio libre de la anchura de 1 columna a la izquierda. que contiene a la Capa2. Quizás en mi maquetación desearía que la Capa3 estuviera alineada en la vertical con la capa de cabecera. con color verde.

(En mi diseño con container_12. la clase sufix_xx sirve para colocar un espacio vacío a la derecha de la capa. como aparece en esta imagen: Esta capa que hemos visto en la imagen tiene definidas las clases grid_7. porque el área donde meteremos los contenidos ocupa sólo el espacio de 7 columnas. Ahora bien. para que deje 5 columnas de espacio vacío a la izquierda. este espacio vacío también se cuenta como espacio de la capa. llego a las 12 columnas entre la anchura del elemento grid_7 y el espacio vacío que he colocado con prefix_5) Class suffix_xx: De una manera similar a prefix_xx. . La capa tendrá una anchura definida con la clase grid_xx y luego con suffix_xx podremos hacer que tenga espacio adicional vacío a la derecha. Lo veremos mejor con una imagen.Observamos el espacio vacío a la izquierda de la capa que aparece abajo con fondo blanco y borde gris. lo que veremos mejor si colocamos un color de fondo a la capa sobre la que hemos aplicado el prefix_5. antes de poner los contenidos. y prefix_5. Ese espacio vacío lo hemos conseguido metiendo la clase prefix_5 a la capa.

el espacio total que estoy ocupando es 9 columnas (8 por definir grid_8 mas 1 por definir suffix_1). tendrá una anchura de 3 columnas. Al definir la capa hemos colocado una clase grid_8. Esto para mi diseño de container_12. para un espacio en blanco a la derecha de 1 columna. . Esperamos que hayáis podido entenderlas bien y que ahora no resulte difícil aplicarlas para la consecución de vuestros objetivos de diseño. En la práctica. pero suficiente para que podamos ver las aplicaciones prácticas de lo aprendido hasta ahora. luego la siguiente capa. donde he puesto la palabra "buscador" tal como se ve en la imagen.En la imagen anterior podemos ver como el contenido de la capa de fondo rosa se coloca dejando un espacio vacío a la derecha. para una anchura de 8 columnas y luego una clase suffix_1. que estará ocupando la anchura completa. Ahora ya conoces todas las class CSS del framework 960 Grid Con esto ya hemos visto todas las distintas clases CSS que tiene 960 Grid System. Aun será un ejemplo simplificado. No obstante. en el siguiente artículo veremos un ejemplo de maquetación CSS en el que utilizaremos todos los tipos de class CSS disponibles. sumando el grid_8 + suffix 1 de la primera capa. mas el grid_3 de la segunda.

Enviar un comentario al artículo MANUAL: Maquetación CSS con 960 Grid System Primeras notas de uso de 960 Grid System Aplicación de clases CSS de 960 Grid System Manuales relacionados Maquetación CSS con 960 Grid System (8 artículos) Ver el índice del manual .

búsquedasLas más de 12. ¿Nuevo Acrobat Reader 10?Algunas informaciones apuntan el lanzamiento de una nueva versión de la familia de. actualización de seguridadLa nueva versión del popular sistema de gestión de base evita ataques de denegación de.. Diseña tu web con Fresh HTMLDisponible la última versión del editor gratuito de HTML para la creación de páginas web.... añade un motor de 1000 millones de.desarrolloweb...La red social líder de Internet incluirá novedades en seguridad con la que mejorar el..com Últimas noticias Twitter. Descargar el manual Categorias relacionadas CSS Frameworks CSS El autor Miguel Angel Alvarez Director de DesarrolloWeb.2. MySQL 5.... VirtualBox 3.com http://www.10 disponibleAccede a la última versión de esta aplicación gratuita para la virtualización de sistemas. .51.. contraseñas de 20 minutos y cierre de sesión...1. Chrome OS : próximo lanzamientoGoogle prepara el lanzamiento de su sistema operativo para finales de este año. Facebook..000 búsquedas por segundo provoca que la popular red de microblogging añada..

Mythbuntu y Edubuntu. La familia Ubuntu 10. CSS.. Ganar dinero Bloging Actualidad Recursos interesantes Agenda . Notepad++ 5. Alojados en el grupo Secciones principales Manuales FAQs Programas Directorio Scripts Videos Monotemáticos Desde cero HTML.2 disponibleLista para descarga la última actualización del popular editor gratuito de código fuente. Dudas sobre HTML 5La quinta versión del lenguaje de marcación HTML plantea determinadas incertidumbres. Ajax ASP.. Diseño Javascript. PHP Promocion. Xubuntu.8.10 Final lista para descargaDisponibles las derivaciones oficiales kubuntu.

Comunidad Perfiles públicos Desarrolladores Vuestras páginas Registro Encuestas Copyright | Publicidad | Acerca de | Datos legales | Contacta Perfiles Públicos Vuestras páginas Boletin de novedades Registro Lista de correo Encuestas Actualidad De interés Agenda Manuales Programas FAQS .

Directorio Scripts Videos Articulos Copyleft La cosecha Colabora Desde 0 HTML CSS Javascript ASP PHP AJAX Diseño web Promoción de webs Ganar dinero .