Aplicación de clases CSS de 960 Grid System

  • Por
Veremos un ejemplo de maquetación CSS utilizando las clases disponibles en 960 Grid System, para que nos sirva de práctica.
Con el objetivo de mejorar la comprensión de las distintas clases del framework CSS 960 Grid System, que ya explicamos en el artículo anterior del manual de 960 Grid System, vamos a mostrar en este artículo de DesarrolloWeb.com un sencillo ejemplo de maquetación web utilizando hojas de estilo en cascada.

El presente ejemplo no tiene otro objetivo que entender las clases disponibles en el framework CSS y practicar con ellas. Para ello no nos hemos preocupado en el diseño, sino simplemente en la maquetación en filas y columnas. Así pues fijémonos en el verdadero valor de esta práctica y no en su aspecto estético, que hay que aceptar que es bastante feo. En el futuro vamos a realizar un diseño paso a paso, con bastante más creatividad y componente gráfico, para que se vea cómo maquetar un caso más complejo y con más elementos.

Vendría bien echar un vistazo a la página con el ejemplo que vamos a explicar en este artículo.

Doctype de XHTML

Para comenzar, es importante decir que este diseño lo tenemos que hacer en XHTML y utilizar un doctype adecuado para que todos los navegadores lo entiendan igual. Podríamos poner diversos doctype, pero por ejemplo nos valdría este:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Eso si estamos utilizando XHTML transicional, pero podríamos utilizar XHTML estricto, con este otro doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Nota: la declaración doctype debe colocarse como primera línea del código de nuestro archivo HTML.

Enlazamos las hojas de estilos del framework CSS

Como segundo paso, debemos enlazar las hojas de estilos (archivos CSS) que vienen con 960 Grid System. Estos archivos los obtenemos desde la página del propio framework, donde los tienen para descarga libre. Veremos que nos proporcionan varios CSS, uno con las clases definidas en 960 Grid System y otro par de archivos CSS que se pueden utilizar opcionalmente, que sirven para resetear los estilos del navegador y para aplicar ciertos estilos fijos a las etiquetas de texto.

<link rel="STYLESHEET" type="text/css" href="code/css/960.css">
<link rel="STYLESHEET" type="text/css" href="code/css/reset.css">
<link rel="STYLESHEET" type="text/css" href="code/css/text.css">

Estructura de etiquetas del diseño en XHTML

Ahora podemos pasar a codificar el XHTML que tenemos que hacer para crear la estructura de filas y columnas de este ejemplo. En este paso, para maquetar los contenidos como deseamos, tendremos que utilizar las clases que nos proporciona 960 Grid System, explicadas en el artículo anterior.

Vamos creando esta estructura por partes, comenzando por la cabecera. Pero antes quiero insistir en que este ejemplo simplemente nos sirve para aprender el manejo de las clases del framework, incorporando ejemplos de uso de todos los tipos de clases disponibles, aunque a veces no tenga mucho sentido haber hecho las cosas tal cual aparecen.

He colocado en todas las capas del diseño un identificador (atributo id), para luego poder aplicarle estilos con CSS.

Para que se vea la estructura de contenidos que vamos a tener, muestro una imagen donde está la maquetación de la página, donde cada capa la hemos colocado con un color distinto y donde en el texto de la capa hemos colocado el identificador (atributo id) de esa capa.


Como se debe hacer con el framework 960 Grid System, todo el contenido del sitio se tiene que colocar dentro de una capa con clase container_xx. En nuestro diseño utilizaremos el formato de 12 columnas, por lo que utilizaremos la class CSS container_12.

<div class="container_12">
...
</div>

Colocamos ahora los contenidos en el contenedor, empezando por la cabecera de la página, que tiene dos capas, una con un texto a la izquierda y otra con otro texto a la derecha. La capa de la izquierda (id=cabecera) tiene una anchura de 8 columnas y un espacio vacío a la derecha de 1 columna. Para definir la anchura colocamos la class CSS grid_8 y para definir el espacio en blanco a la derecha, de una columna de anchura, se coloca la clase suffix_1.

<div id="cabecera" class="grid_8 suffix_1">
   ...
</div>
<div id="buscador" class="grid_3">
   ...
</div>

A continuación de la cabecera, como hemos visto en el código anterior hemos colocado el DIV con id "buscador", que tiene una anchura de tres columnas.

En total, en esta fila donde aparece la cabecera y el buscador, hemos utilizado 8 espacios en la cabecera por grid_8 y 1 de espacio en vacío a la derecha de la cabecera con suffix_1. Luego hemos colocado el buscador, ocupando un espacio de 3 columnas. En total 8 + 1 + 3 = 12, que es el total de espacio que tenemos disponible en un container_12.

Para continuar vamos a colocar un DIV con la class "clear". Esto se tiene que hacer justo después de cada una de las filas del diseño y la razón de ello es que las clases grid_xx tienen un float left y con este clear se consigue romper este estilo, de modo que la siguiente fila comience desde la izquierda.

<div class="clear"></div>

La siguiente parte del diseño tenemos dos columnas principales. En la primera columna tenemos a su vez otras tres columnas anidadas. Esto lo hacemos así a propósito para poner en marcha las clases alpha y omega explicadas en el artículo anterior.

Como habíamos explicado, para gestionar los márgenes de las distintas capas grid_xx, cuando están anidadas como en este caso, tenemos que poner la clase alpha en la primera capa anidada y la clase omega en la última capa anidada.

Así pues, tendremos una capa con id "izq", con espacio de 9 columnas y dentro de ésta, otras tres capas anidadas con espacios de 4, 3 y 2 columnas, donde tendremos que utilizar las clases omega y alpha comentadas antes. Tendremos que colocar después de estas tres columnas anidadas un DIV con class="clear", para que podamos seguir metiendo contenidos en la dentro de la capa id "izq", que aparezcan después de las tres columnas anidadas.

<div class="grid_9" id="izq">

   <div class="grid_4 alpha" id="izq1">
      ...
   </div>
   <div class="grid_3" id="izq2">
      ...
   </div>
   <div class="grid_2 omega" id="izq3">
      ...
   </div>
   <div class="clear"></div>
   ...
</div>

<div class="grid_3" id="der">
   ...
</div>

<div class="clear"></div>

Después de la capa de 9 columnas de anchura con id "izq", hemos colocado para completar el espacio una capa lateral de anchura de 3 columnas. Entre todas las capas de esta fila tenemos pues, una de 9 columnas a la izquierda y otra de 3 columnas a la derecha, que hace un total de 12 columnas de anchura.

Como se ha visto en el anterior código, después de esta fila hemos colocado otro DIV con class="clear", para poder comenzar la siguiente columna desde el principio.

Para acabar tenemos el pie de página. El pie lo hemos hecho con una única capa de 7 columnas de anchura, con la particularidad que hemos dejado un espacio vacío a la izquierda de 5 columnas, que se consigue con la clase prefix_5. En total tenemos 7 columnas de espacio + 5 columnas vacías = 12 columnas del container_12.

Esto se consigue con el siguiente código:

<div class="prefix_5 grid_7" id="pie">
pie
</div>

Acabamos con un nuevo DIV class="clear", para colocar antes del cierre del cuerpo de la página.

Para que se vea más fácilmente el esquema creado para hacer la estructura de filas y columnas de este ejemplo, pongo a continuación el código completo del cuerpo de esta página:

<div class="container_12">
   <div id="cabecera" class="grid_8 suffix_1">
      <p>Cabecera</p>
   </div>
   <div id="buscador" class="grid_3">
      <p>Buscador</p>
   </div>
   <div class="clear"></div>
   
   <div class="grid_9" id="izq">
      <div class="grid_4 alpha" id="izq1">
         <p>izq1</p>
      </div>
      <div class="grid_3" id="izq2">
         <p>izq2</p>
      </div>
      <div class="grid_2 omega" id="izq3">
         <p>izq3</p>
      </div>
      <div class="clear"></div>
      
      <p>
      Contenido de la capa izq, que aparecerá debajo de las 3 columnas anidadas.
      </p>
   </div>
   
   <div class="grid_3" id="der">
      <p>der</p>
   </div>
   
   <div class="clear"></div>
      
   <div class="prefix_5 grid_7" id="pie">
      <p>pie</p>
   </div>

   <div class="clear"></div>
</div>

Podríamos ver en una página aparte el resultado obtenido, una vez colocado algo de texto dentro de las capas.

Para conseguir los colores de fondo y los bordes en las capas lo hemos hecho aplicando estilos CSS a través de los identificadores (atributo id) configurados en las distintas capas y aplicando estilos a la etiqueta P, como se puede ver a continuación.

<style type="text/css">
p{
   border: 1px solid #999;
   padding: 5px;
   margin: 0px;
}
#cabecera{
   background-color: #ffcccc;
}
#buscador{
   background-color: #ccffcc;
}
#izq{
   background-color: #e0e0ff;
}
#izq1{
   background-color: #ccccff;
}
#izq2{
   background-color: #9999ff;
}
#izq3{
   background-color: #6666ff;
}
#der{
   background-color: #dedede;
}
#pie{
   background-color: #ff8800;
}
</style>

Con esto ya hemos visto un primer ejemplo completo de maquetación CSS a través del framework 960 Grid System. En artículos sucesivos que publicaremos en desarrollo web .com vamos a realizar un ejemplo de maquetación más complejo y con mayor componente gráfica, para que se vea un caso práctico real de uso de este framework CSS.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

puchitol

28/4/2009
en Internet Explorer
Hola,

me encanta el artículo sobre este framework para CSS, pero me gustaría preguntar sobre un problema que no sé si será por que es así o estoy haciendo algo mal yo ...

El colocar la capa de "división" entre filas (indicada en el asunto de este mensaje) el IE8 deja un hueco entre filas excesivamente grande, cosa que en Firefox no se aprecia ... Sería un problema de IE8 o posiblemente sea un problema mío ?

saludos y muchas gracias de antemano.
Y lo dicho, muy bueno el artículo

puchitol

28/4/2009
arreglado problema de comentario anterior
Hola de nuevo,

disculpad, pero no me di cuenta de que era importante colocar el DOCTYPE al inicio de la pagina. Ya está solucionado.

Muchas gracias de todas formas.

Excelente trabajo !!! :)

midesweb

28/4/2009
Doctype para que funcione!
Hola!
Efectivamente, si no colocas el doctype tendrás problemas al verlo en Internet Explorer, o mejor dicho, explorer interpretará la página de diferente manera que Firefox.
Yo también tuve ese problema en mis primeras pruebas con el framework css 960 grid, por eso lo destaqué como un punto importante a seguir en este artículo.
Me alegro que te dieras cuenta por ti mismo, puchitol.
Saludos!

gara501

26/5/2009
960 CSS
Como puedo generar un pie de pagina 100% horizontal en este framework?? la verdad intente pero no pude, solo lo genera a max 960px...me gustaria colocar una imagen que abarque todo en horizontal..

midesweb

26/6/2009
Pie de página a todo el ancho disponible
Hola gara501,

Para lo del pie de página a toda la anchura coloca ese pie en un container_12 o container_16 independiente.

Luego, al container le metes los estilos que desees, que se adaptarán para toda la anchura disponible.

Luego metes las cajas que desees en el container, que ya estarán dentro de los 960 de anchura del framework y se situarán en el lugar correcto. Pero como los estilos de fondo del pie los has colocado al container, pues se aplicarán como tú quieres.

Espero haberme explicado

Yerson

28/7/2009
Conflicto
Hola me parece muy util la herramienta y estoy haciendo algunas pruebas, pero no me ha estado funcionando, ya que al poner un div dentro de otro div el primero (que la herramiento lo llama container) no crece de tamaño con el segundo.
Estoy utilizando Firefox 3.5 no se si esta version tenga algun problema con el framework espero y me puedan ayudar
Gracias

JONOR

08/2/2010
Impresisión en
Hola!

Tengo creado el siguiente contenedor con 960 grid system (el de 16) con 3 columnas en el cual la primera columna contiene una imagen de 160px, la segunda muestra texto por medio de un iframe de 520px y en la tercera columna tengo otro iframe que muestra banners de un ancho de 220px, en este último el problema es que al medir los banners me da un ancho de 210px perdiendo entonces 10px que no sé donde quedan.

Agrego el código haber si me pueden ayudar a encontrar el problema o error si es posible, desde ya muchas gracias, excelente web!

<div id="cuerpo-principal" class="container_16">
<div id="contenedor-cajas" class="grid_12">
<div id="mapa" class="grid_3 alpha">
<img src="imgs/mapa.png" usemap="#mapa.png" alt="Mapa Chile" width="160px" border="0" height="752px">
<map name="mapa.png">
</div>
<div id="resultados" class="grid_9 omega">
<iframe name="iframe_resultados" id="iframe_resultados" src="" width="520px" height="752px" frameborder="0" scrolling="no"></iframe>
</div>
</div>
<div id="contenedor-banners" class="grid_4">
<!-- banners -->
<iframe name="iframe_banner" id="iframe_banner" src="" width="220px" height="752px" frameborder="0" scrolling="no"></iframe>
</div>
<!-- fin contenedor-banners -->
<div class="clear"></div>
</div>

JONOR

15/2/2010
Solución a "Impresisión en iframe"
Hola a todos,

Respecto a la pregunta del post anterior, puedo contarles que encontre la solución al problema que se me presentaba con los 10px restantes, y la solución fue colocar el atributo marginwidth="0" y marginheight="0" al iframe de 220px y con ello conseguí mostrar el ancho completo. En conclusión, el problema era la falta de un atributo de la etiqueta del iframe y no del 960 grid system!

Espero le sirva a alguien más mi solución, un saludo desde Chile.

Andres S.

16/3/2010
Pie de página a todo el ancho disponible
Hola
no logro dar con el pie al 100%
hice una tabla con css pero no cubre todo el ancho

alguien me podria explicar con algun pedazo de codigo por favor
soy algo nuevo en esto de css
desde ya muchas gracias

midesweb

16/3/2010
Pie ancho 100%
Hola Andrés!

El tema del pie al 100% lo puedes hacer perfectamente... aunque el contenido se ajuste a los 960 pixeles. En realidad, si sigues leyendo este manual, podrás ver una práctica completa de una maquetación de web con este framework CSS. En ese ejemplo, podrás ver más cosas sobre cómo maquetar...

No obstante ahora tengo dudas sobre si explicamos algo para que el ancho de las cosas sea el 100%.

Yo hace tiempo que escribí estos artículos y ya no me acuerdo de todos los detalles del trabajo con 960 grid system. No sé si hay algo específico para conseguir ese efecto, pero se me ocurre que podrías meter tu pie dentro de una capa a la que no le metes clase alguna del framewrok, sino tus propios estilos.

<div style="background-color: rgb(255, 120, 50);">
<div class="container_12">
<div class="grid_6">pie... </div>
</div>
</div>

El pie entonces tendrías que meterlo en un container aislado de otras partes de la web.

Andres S.

17/3/2010
Pie ancho 100%
Muchas gracias eugim por tu tiempo
la verdad no he podido conseguir que unas tablas que tengo como pie de pagina se vean al 100%.

hice esto:

<div class="container_12">
<div class="grid_6">
<table class="tabla2"...>
...
</div>
</div>

la clase tabla2 la tengo en un archivo .css tiene como propiedad 100% de ancho y otros diseños de tabla.
no se si tengo que agregar lineas al archivo grid.css
he puesto el codigo que te envio en varias partes de la pagina para ver si sale pero nada.
he estado leyendo su tutorial y esta muy interesante.
desde ya soy un agradecido.
saludos

midesweb

27/3/2010
Código para hacer un pie al 100%
Este código lo he creado rápidamente para mostrar el tema que se solicita, del pie con anchura del 100% del espacio disponible.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="es">
<head>
<title>Plantilla EstiloyModa</title>
<link rel="STYLESHEET" type="text/css" href="css/960.css">
<link rel="STYLESHEET" type="text/css" href="css/reset.css">
<link rel="STYLESHEET" type="text/css" href="css/text.css">
<style type="text/css">
body{
background: #faf0ce url(images/fondo-global.jpg);
}
#cuerpo{
height:500px;
}
#pie{
background: #3c0970 url(images/fondo-pie.jpg) center;
}

#piedentro{
height: 37px;
padding-top: 10px;
}
</style>
</head>
<body>
<div class="container_12">
<div class="grid_9">
<div id="cuerpo">
Cuerpo....
</div>
</div>
<div class="grid_3">
<div id="lateral">
lateral...
</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div id="pie">
<div class="container_12">
<div id="grid_12">
<div id="piedentro">Esto es el pie</div>
</div>
</div>
</div>
</body>
</html>

Jose

25/4/2010
Un error extraño con prefix
Hola, muy buen material. Pero he encontrado algo que no me funciona bien en IE.

El tema del Prefix, en el caso de IE, cuando lo aplico en una sección que tiene 3 columnas, la columna nro.2 me aparece mas angosta que en otros navegadores, truncando los textos. Es como si interpretara mal el Prefix. Para corregirlo mientras simule la columna 1 con un grid_2 vacio, solo con un salto de espacio por que sino se re dimensiona. Aquí el código del error:



<div class="container_12">
<div class="grid_12" id="header">
</div>
<div class="clear"></div>

<div class="grid_12" id="personal">
<div class="grid_3 alpha">xxx</div>
<div class="grid_3"></div>
<div class="grid_3"></div>
<div class="grid_3 omega"></div>
</div>
<div class="grid_2">&nbsp</div>
<!--<div class="grid_6 prefix_2">-->
<div class="grid_6">
<h1>Cineforum: The Wrestler, de Darren Aronofsky</h1>
<div class="grid_3 alpha">
<img src="logo.jpg" width="220" />
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis quam sit amet metus aliquet venenatis et nec orci. Proin fermentum lorem magna. Maecenas non nulla orci. Curabitur elit diam, sollicitudin ac posuere mattis, varius elementum augue. Maecenas ac urna lorem, non condimentum orci. Sed vitae risus vel tortor tincidunt pharetra. Pellentesque volutpat placerat sollicitudin. Nullam convallis pellentesque placerat. Fusce rhoncus scelerisque lobortis. Donec ornare laoreet gravida. Ut sit amet diam quis massa tristique porta.
<div class="grid_3 omega"></div>

</div>

<div class="grid_4">xxx</div>
<div class="clear"></div>

</body>



---- Gracias de antemano.

Jose

25/4/2010
Sobre error de Prefix.
De nuevo yo, me di cuenta que me falto declarar el DOCTYPE en la cabecera.

ripichipi

09/8/2010
Es correcto?
Hola gente de desarrollo web primeramente felicidades por su página
Mi consulta es debido a que mi código no funciona, es correcto?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head><title>Make Money Easy Way</title>


<link rel="STYLESHEET" type="text/css" href="code/css/960.css">
<link rel="STYLESHEET" type="text/css" href="code/css/reset.css">
<link rel="STYLESHEET" type="text/css" href="code/css/text.css">



<style type="text/css">
BODY{
background: url('back7.gif') center repeat-y;
}

#header{
url(header.PNG);
}

</style>
</head>
<body>
<div class="container_12">
<div id="header" class="grid_12">

</div>
<div class="clear"></div>
</body>
</html>

bemitoreya

31/10/2010
Re:Es correcto?
ripichi... La estroctura es la sigiente:

<body>
<div class="container_12"> <----Contenedor de 12 columnas
<div id="header" class="grid_12"> <----Linea de 12 columnas
Blalalalalalala <----Tu contenido
</div> <----Cierre de linea de 12 columnas
<div class="clear"></div> <----Cierre para cerrar el contenedor
</div> <----Cierre de Contenedor de 12 columnas
</body>

Gaston

15/2/2011
Posibilidad de usar Alpha y Omega juntos
Hola, estoy haciendo un sitio el cual tiene un header de 960px; como bien explica este articulo el grid960 come 10px por lado quedando el grid_12 de 940px;
Lo que estoy necesitando es que este grid_12 tenga los 960px por lo que intente con el Alpha y Omega (grid_12 alpha omega) pero solo me toma el primero (alpha) logrando 950px;
Mi pregunta: Existe alguna posibilidad de combinar el alpha y omega? Asi poder usar los 960px.
gracias

pd: Excelente su sitio! Sigan Así!!!!!!!!

Gastón - Córdoba - Argentina

galizer

27/5/2011
Excelente el 960!
Realmente me pareció muy util esto del 960, realmente aplaudo a quien/quienes lo idearon! y a ustedes por el tuto!

Sam

21/6/2011
Problemas con los navegadores
Hola, mi problema es con google chrome y IE no logro visualizar en ninguno de ellos
solamente en Firefox, ya use los doctype del ejemplo y aun sigo sin visualizarlo en esos
navegadores ¿estare haciendo algo mal a parte del doctype?

Rodrigo

16/3/2012
Pregunta!!!
Saludos. muy bueno esos tutoriales, pero en niguno encuentro como darle altura a las columnas que uno crea no solo el ancho. ??

Mil gracias.

Hector

28/7/2012
Problema con fondo
Tengo un problema. Copiando y pegando todo vuestro codigo con el CSS no obtengo el mismo resultado. El problema me viene cuando pongo un color de fondo a un div que tiene una clase prefix... El color se aplica tambien al prefix!!! Porque? En vuestro ejemplo, en el div con id "pie" solo tiene el color de fondo naranja en la parte del grid, es decir, en la derecha, pero este color no se aplica en la anchura que corresponde al prefix que aparece en blanco... No logro conseguir esto!!! En la parte final en la que dejais un link con el ejercicio hecho, el mismo problema aparece, el background-color se aplica a todo, incluido el prefix cuando entiendo que no debería... Una ayudita!!!!!