Maquetación CSS con 960 Grid System, Parte II

  • Por
Continuamos mostrando un caso real de maquetación con CSS usando el framework CSS 960 Grid System.
Estamos maquetando una web con CSS, para mostrar a todos los lectores de DesarrolloWeb.com el proceso de creación de una página web con el framework CSS 960 Grid System. Esta práctica la estamos haciendo desde cero y explicando paso por paso los detalles, no sólo de la maquetación de la propia web, sino también las técnicas que utilizamos para aplicar estilo a diversos componentes de la página, como cajas de contenido, listas, etc.

El presente artículo forma parte de una serie de artículos que se puede encontrar en el Manual de 960 Grid System . En anteriores entregas ya comenzamos a maquetar este caso real de página web, con un aspecto bastante profesional. Todo el proceso lo estamos grabando en vídeo, para que cualquier lector pueda además ver en su ordenador cómo hemos realizado nosotros esta práctica.

En el presente artículo veremos la maquetación de la parte principal del cuerpo de la página y llegaremos hasta el punto que se puede ver pulsando este enlace. Recordemos que la cabecera de la página ya explicamos cómo se hacía en el artículo anterior .

Así pues, comencemos a ver cómo hemos realizado este trabajo, aunque cabe decir que las explicaciones en texto de este artículo serán bien básicas, puesto que todo el proceso explicado se puede ver en el vídeo que hemos publicado y que se encuentra disponible al final de este artículo.

Maquetación del Cuerpo

Todo lo que vamos a colocar en el cuerpo se tiene que incluir dentro de un contenedor. Cuando hicimos la cabecera se creó ya en un contenedor, pero ahora como el cuerpo tiene otros estilos, por lo que nos conviene crear una nueva capa DIV para el cuerpo, que hará las veces de contenedor y tal como hemos hecho en otras ocasiones utilizaremos la class="container_12". Dentro del contenedor colocaremos, como venimos explicando en este manual, varias divisiones o espacios que se definirán a través de elementos DIV con clases grid_xx, siendo xx el número de columnas que utiliza esa división.

La maquetación principal del cuerpo, con el contenedor y las cajas grid_xx sería la siguiente:

<div class="container_12" id="cuerpo">
   <div class="grid_12" id="navegador">
      Aquí va el navegador
   </div>
   <div class="clear"></div>
   
   <div class="grid_8">
      Aquí va la columna de la izquierda del cuerpo
   </div>
   <div class="grid_4">
      Aquí va la columna de la derecha del cuerpo
   </div>
   <div class="clear"></div>
</div>

Lo primero que hemos realizado en este artículo es la barra de navegación que hay debajo de la cabecera. Lo interesante de esta barra de navegación es que la hemos hecho con listas. Las listas nos vienen muy bien a la hora de maquetar con CSS, porque son muy versátiles para presentar elementos uno detrás de otro.

El navegador lo colocamos en una fila de manera independiente, con una caja grid_12, porque no hay nada más en esta fila.

La parte de la izquierda del cuerpo la hemos definido en un grid_8, porque tiene 8 columnas de anchura. Dentro colocamos varias noticias de portada en unos recuadros bastante sencillos, a los que les hemos asignado un borde y un fondo plano.

La parte de la derecha del cuerpo es la que más detalles tiene. La hemos colocado con un grid_4, para que ocupe 4 columnas de anchura, tal como se diseñó en Photoshop y para completar el espacio disponible en el container_12 (8 columnas de la parte de la izquierda + 4 columnas de la derecha = 12 columnas del container_12). Se ha creado un tipo de caja, con un titular y un cuerpo que tiene un degradado. Dentro los contenidos son diversos y tienen a su vez diversas clases de estilos CSS para conseguir el aspecto que andábamos buscando. Nota: Para las explicaciones, recordar siempre que hay un vídeo al final del artículo donde se ve paso a paso la maquetación y se dan las razones por las que hemos optado por esos estilos CSS y todas las guías para conseguir el resultado final. Un vídeo vale más que mil palabras ;)

Código HTML y CSS del ejemplo

Ahora coloco aquí el código HTML y CSS del ejemplo, tal y como está desarrollado hasta el momento:

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

<html>
<head>
   <title>Diseño desde cero</title>
   <link rel="STYLESHEET" type="text/css" href="960-grid-system/code/css/reset.css">
   <link rel="STYLESHEET" type="text/css" href="960-grid-system/code/css/text.css">
   <link rel="STYLESHEET" type="text/css" href="960-grid-system/code/css/960.css">

<style type="text/css">
BODY{
   background-color: #2b1f1f;
   color: #FFF;
   font-family: verdana, arial, helvetica;
}
A{
   color: #bce7e4;
}
#cabecera{
   background: #fff url(images/fondo-cabecera.gif) repeat-x;
}
#titulogeneral img{
   padding: 28px 0 0 0;
}
#buscador{
   background: transparent url(images/fondo-buscador.gif) no-repeat bottom right;
   text-align: right;
}
#buscador input{
   font-size:8pt;
}
#buscador form{
   padding: 40px 30px 6px 0px;
}
#cuerpo{
   background-color: #000;
}
#navegador{
   font-size: 12pt;
   margin-top: 10px;
   margin-bottom: 10px;
}
#navegador a{
   color: #FFF;
   font-weight: bold;
   text-decoration: none;
}
#navegador ul{
   list-style-type: none;
   margin: 0;
   padding: 0;
}
#navegador li{
   float: left;
   margin: 0 20px 0 0;
   padding: 0;
}
.itemportada{
   border: 3px solid #3b1010;
   background-color: #3c2a2a;
   padding: 10px;
   margin-bottom: 10px;
   overflow:hidden;
}
.imagenitemportada{
   float: right;
   margin-left: 10px;
}
.tituloitemportada{
   font-weight: bold;
   font-size: 120%;
   margin-bottom: 6px;
}
.autoritemportada{
   font-size: 8pt;
   margin-bottom: 4px;
}
.introitemportada{

}
.comentariositemportada{
   font-size: 8pt;
   margin-top: -10px;
}
.titlateral{
   background-color: #4b0d0d;
   padding: 10px;
}
.cuerpolateral{
   background: #612323 url(images/fondo-cuerpo-lateral.gif) repeat-x;
   overflow: hidden;
   padding: 10px 7px 10px 7px;
   margin-bottom: 15px;
}
.imagencuerpolateral{
   float: left;
}
.cuerpolateral form{
   margin: 0px;
}
.cuerpolateral form span{
   display: block;
   margin: 5px 0 5px 0;
}
.textocuerpolateral{
   margin-left: 110px;
}
.cuerpolateral input{
   font-size: 8pt;
}
.cuerpolateral ul{
   list-style-type: none;
   margin: 15px 0 0 0;
   padding: 0;
}
.cuerpolateral li{
   padding: 0 0 0 20px;
   margin: 0 0 6px 0;
   background: transparent url(images/estrellita.png) no-repeat scroll 0 4px;
}
.nube{
   font-size: 10px;
   text-align:center;
}
.nube span.etiqueta1{font-size: 100%}
.nube span.etiqueta2{font-size: 120%}
.nube span.etiqueta3{font-size: 140%}
.nube span.etiqueta4{font-size: 160%}
.nube span.etiqueta5{font-size: 180%}
.nube span.etiqueta6{font-size: 200%}
.nube span.etiqueta7{font-size: 220%}
.nube span.etiqueta8{font-size: 240%}
.nube span.etiqueta9{font-size: 260%}
.nube span.etiqueta10{font-size: 280%}
.nube a{
   color: #fff;
   text-decoration: none;
}
</style>
</head>

<body>
<div id="cabecera" class="container_12">
   <div id="titulogeneral" class="grid_6 suffix_2">
      <img src="images/titulo-general.png" width="443" height="30" alt="Diseño de una web desde cero">
   </div>
   <div id="buscador" class="grid_4">
      <form>
      <input type=text>
      <input type=button value="buscar">
      </form>
   </div>
   <div class="clear"></div>
</div>
<div class="container_12" id="cuerpo">
   <div class="grid_12" id="navegador">
      <ul>
      <li><a href="#">Portada</a></li>
      <li><a href="#">Secciones</a></li>
      <li><a href="#">Tutoriales</a></li>
      <li><a href="#">Recursos</a></li>
      <li><a href="#">Contacto</a></li>
      </ul>
   </div>
   <div class="clear"></div>
   
<div class="grid_8">
   <div class="itemportada">
      <img src="images/foto-desarolloweb.jpg" width="258" height="250" alt="Foto" class="imagenitemportada"/>
      <div class="tituloitemportada"><a href="#">Título de un artículo</a></div>
      <div class="autoritemportada">DesarrolloWeb.com</div>
      <div class="introitemportada">
      <p>
      Lorem ipsum dolor sit amet...
      </p>
      <p>
      Curabitur placerat. Vivamus rhoncus est...
      </p>
      </div>
      <div class="comentariositemportada"><a href="#">3 comentarios</a></div>
   </div>
      
      <div class="itemportada">
         <img src="images/foto-guiarte.jpg" width="256" height="252" alt="foto" class="imagenitemportada" />
         <div class="tituloitemportada"><a href="#">Otro artículo destacado en la portada con titulo mayor</a></div>
         <div class="autoritemportada">DesarrolloWeb.com</div>
         <div class="introitemportada">
         <p>
         Nullam enim nulla...
         </p>
         <p>
         sagittis convallis...
         </p>
         </div>
         <div class="comentariositemportada"><a href="#">8 comentarios</a></div>
      </div>
      
      <div class="tituloitemportada"><a href="#">>> Ver contenidos anteriores</a></div>
   </div>
   
   <div class="grid_4">
      <div class="titlateral">
      <img src="images/tit-usuarios.png" width="91" height="20" alt="Usuarios" />
      </div>
      <div class="cuerpolateral">
         <img src="images/usuarios-grande.png" width="91" height="118" alt="usuarios" class="imagencuerpolateral" />
         <div class="textocuerpolateral">
            <form>
            <span>Nombre:</span>
            <input type="text" name="nombre" size="15" />
            <span>Clave:</span>
            <input type="text" name="clave" size="15" />
            <span><input type="submit" value="Entrar" /></span>
            </form>
         </div>
      </div>
      
      <div class="titlateral">
         <img src="images/tit-rss.png" width="41" height="21" alt="RSS" />
      </div>
      <div class="cuerpolateral">
         <img src="images/RSS-grande.png" width="101" height="101" alt="" class="imagencuerpolateral" />
         <div class="textocuerpolateral">
            <ul>
            <li><a href="#">Todos los contenidos</a></li>
            <li><a href="#">Artículos en RSS</a></li>
            <li><a href="#">Noticias en RSS</a></li>
            </ul>
         </div>
      </div>
      
      <div class="titlateral">
         <img src="images/tit-hablamos.png" width="205" height="26" alt="Hablamos de..." />
      </div>
      <div class="cuerpolateral">
         <div class="nube">
            <span class="etiqueta6"><a href="#">html</a></span>
            <span class="etiqueta8"><a href="#">desarrollo</a></span>
            <span class="etiqueta5"><a href="#">javascript</a></span>
            <span class="etiqueta3"><a href="#">asp</a></span>
            <span class="etiqueta10"><a href="#">php</a></span>
            <span class="etiqueta5"><a href="#">diseño web</a></span>
            <span class="etiqueta4"><a href="#">servidores</a></span>
            <span class="etiqueta1"><a href="#">java</a></span>
            <span class="etiqueta3"><a href="#">apache</a></span>
            <span class="etiqueta6"><a href="#">promoción web</a></span>
            <span class="etiqueta9"><a href="#">ajax</a></span>
            <span class="etiqueta4"><a href="#">recursos</a></span>
            <span class="etiqueta5"><a href="#">dhtml</a></span>
         </div>
      </div>
      
   </div>
   
   <div class="clear"></div>
</div>

</body>
</html>

Podemos ver este código en marcha en una página aparte , para apreciar el resultado de la maquetación CSS creada hasta el momento.

Vídeo de la creación de este ejemplo con CSS y 960 Grid

Ahora os ofrecemos el vídeo que hemos grabado mientras realizábamos esta maquetación CSS. Como veréis, está repleto de explicaciones y detalles que resultarán interesantes para aquellos que quieran saber cómo, partiendo de una imagen de Photoshop, crear una página web, maquetada con CSS. Por supuesto, aprenderás también a usar el framework 960 Grid System, que es de lo que se trata en este manual.

También puedes ver este mismo videotutorial desde Youtube, para las personas que lo prefieran.

Para continuar este videotutorial, puedes aceder a la tercera parte del proceso de maquetación HTML/CSS.

Autor

Miguel Angel Alvarez

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

Benjamin

02/6/2009
grid 960 e IE6
Hola

Gracias por tan magníficos tutoriales.
En realidad soy nuevo en esto de css. Realice una pagina usando justamente
el grid 960 y la explicación de la primera parte.

Todo bien, excepto con Internet Explorer 6.
Despues de los <div class="clear"></div>
crea un espacio en blanco y no ajusta las imágenes que use.

Alguna idea para remediar esto ?

Saludos

elias

02/6/2009
Felicitaciones
Muchachos gracias por compartir sus conocimientos, muy bueno artículo.
Felicitaciones!!!!.

midesweb

18/6/2009
Respondiendo sobre el class=clear a Benjamin
Hola Benjamin,

Yo no he visto qué tal funciona en IExplorer 6. La verdad es que ese navegador es altamente problemático, porque hay muchas cosas que no las entiende o las interpreta mal. Yo la verdad estoy un poco a favor de olvidarme de ese navegador, pues ya no representa más que un 15% de los usuarios, que es bastante, pero para mi no justifica perder el tiempo.

Lo que se me ocurre, que es un error típico, es que no hayas colocado el doctype adecuado al principio del código HTML.

Si no es eso, se me ocurre que con el <div class="clear"> podrías hacer algo como darle estilos propios para que ese elemento no te moleste. Por ejemplo, aplicarle otra clase para darle estilos <div class="clear ie6"> con la clase "ie6" podrías definir cosas para que esa capa DIV no diera problemas.

Esto es una idea, no he probado nada ni he consultado.

Puede que utilizando las hojas de estilo que vienen con el framework 960 grid, como reset.css, te solicione el problema. Prueba también.

prueba a quitar espacios en blanco que tengas dentro del div class=clear o de antes de este o después....

Saludos!

Carlos

23/6/2009
Pregunta sobre fichero de estilos
he seguido el ejemplo y veo que hay un montón de estilos en el fichero html creado, ¿puedo crear un nuevo fichero de estilos para meterlos todos?, en caso negativo, ¿podrìa meter esos estilos en uno de los tres ficheros .css ya existentes (reset, text, 960)?

Un saludo y muchas gracias por el trabajo realizado.

midesweb

26/6/2009
meter los estilos css en otro fichero
Por supuesto que puedes organizar el código de las CSS como más te convenga!!

Yo lo he metido en el mismo archivo, junto con el código HTML, por comodidad para este ejemplo. Para editar todo en el mismo fichero, pero en un sitio con varias páginas, lo suyo es que lo metas en un fichero externo y lo incluyas desde todas las páginas.

Lo que no haría sería meter los estilos en ninguno de los ficheros del framework, por no mezclar tus cosas personales con el propio código de 960 Grid System.

oviedo93

30/6/2009
fichero externo de estilos
Lo he hecho, pero en el fichero de de estilos, todo lo que tiene que ver con imágenes no rula, o sea, que no me saca ninguna imagen de las que tengo en el fichero de estilos, el resto de maquetación funciona bien. ¿¿¿¿???

friedl_08

05/7/2009
Excelente !!!!!!!!!! Excelentisimo!!!!!!
Espectacular el tutorial y Bendiciones por estar en Castellano entendible Muy !! Didáctico ...Gracias a este maravilloso tuto esto perfeccionando los conocimientos que tengo sobre maquetacion.....Son de grandisima ayuda ... sigan así con los tutoriales y que Dios los siga iluminando con mas conocimiento ...!!!!


Mis respetos...y congratulaciones !!!!

laura

20/7/2009
menus css y 960-grid
Perfectos los videos y los manuales, pero en mis páginas me he acostumbrado a poner menus con css y resulta que al maquetar con 960-grid descuadran.
Tendria algo que ver con compatibilidad de estilos del framework?

Carlos Alberto Pedraza

04/8/2009
Máximo
Que cosa tan bien hecha y tan bien explicada, mil gracias por compartirnos su absoluto conocimiento

midesweb

19/8/2009
Hemos restaurado el vídeo!
Pues eso, que el vídeo está de nuevo disponible en DailyMotion.

FerCbaArg

28/8/2009
Excelente Artículo
Hola, hasta ahora yo era de los que maquetaba todo con tablas, pero vengo siguiendo estos artículos y ya he empezado a usar 960 Grid para maquetar mis páginas, los artículos son excelentes y muy fáciles de comprender, muchas gracias por vuestra ayuda.

Otra cosa que quería sugerir a Oviedo que hace una pregunta más arriba, acerca de que no se le ven las imágenes cuando separa los estilos en un fichero css aparte, a mi me sucedió algo parecido y era que en la estructura de mi web tenía una carpeta images y otra que era css, al ir haciendo los estilos en el html yo hacía referencia a la carpeta images, pero al separarla y ponerla en el fichero css y dentro de la carpeta css la referencia a la carpeta images se perdía porque buscaba que la misma estuviera dentro de la carpeta css, modifique las rutas de las imágenes dentro del css para que hicieran referencia a la carpeta ../images ya que hay que indicar la ruta de las imágenes en relación a la carpeta donde se encuentra el fichero css y no a la carpeta en donde esta el fichero html, con eso se me soluciono el problema, quizás eso puede ser lo que le está pasando a él y con esto lo ayude a resolverlo.
Espero se entienda y no haya hecho mucho rollo con esto.

Saludos a todo el equipo de DesarrolloWeb.com

leandropio

02/9/2009
Felicitaciones
Hola! Hace unas semanas me topé con desarrolloweb.com gracias a google, estaba budcando como hacer un formulario ya que estoy empezando a chapucear esto del diseño web por hobbie. En ese momento me pegó el flechazo con esta página y hasta el día de hoy no paro de asombrarme por lo buenos y claros que son los ejemplos que están dando! Y lo mejor, gratis! Sigan así, yo como instructor SolidWorks -aunque mucho no tenga que ver con vuestro tema- les ofrezco cualquier ayuda que necesiten en mi área. Saludos!

EPE

11/9/2009
EXCELENTE...
Muchas Gracias...

Ha sido de gran ayuda la explicacion que se da en este manual.

Pero tengo una duda... he seguido paso a paso la explicacion y he realizado basicamente la misma web del ejemplo, pero al subirla a un servidor (iespana.es) las imagenes se salen de las cajas y no se como resolverlo. Aclaro que al verla en mi pc con un servidor local (localhost) no pasa nada con las imagenes, estan bien, ademas solo pasa con IE 6 en firefox se ven bien.

Como podria solucionar este problema?

Muchas Gracias de nuevo por su Maravilloso Trabajo.

cokocool

13/3/2010
Excelente
Hola, esta muy bueno el demo y desarrollo del ejemplo.

andromeda

16/4/2010
Problemas con el grid_4
Hola. Estoy siguiendo el tutorial y tengo un problemilla: el título lateral de usuarios y todo lo demás me sale alineado con el segundo artículo, no arriba con el primero y tampoco se ve el fondo del cuerpo lateral (ni el color ni la imagen del degradado)... he puesto el class clear donde toca pero nada, no hay manera. He repasado el código cien veces, está todo bien. A ver si alguien puede echarme un cablecillo.

Saludos.

andromeda

17/4/2010
Solucionado
Bueno jeje, parece que había que reordenar un poco los divs, con el código tal como se muestra en el videotutorial no me salía bien.

Un saludo :)

maprezd

17/5/2010
Problemas con el vídeo
Hola, primero que todo un saludo y felicitaciones por excelente sitio web. Quiero reportarles que no he podido ver ningunos de los vídeos subidos a Daylimotion. La presentación no se inicia y queda en negro el videoplayer. No creo que el problema sea de mi equipo, ya que tengo Windows-XP y todo los software para correr presentaciones en flash, mp4, QuickTime,etc. Los vídeos de Youtube se ven perfectamente. Gracias

rafa_ll

21/9/2010
Espacio en blanco después de la cabecera
Hola, primero quiero agradecer el gran trabajo que hacéis en desarrolloweb.
Mi problema es el mismo que tiene otra gente con los espacios al cambiar de fila en el grid. Estoy trabajando en Mac y he probado con los navegadores safari, google chrome y firefox y en todos ocurre lo mismo. Tengo el mismo doctype que aparece en el artículo y no se que hacer para quitar el espacio. Alguna sugerencia???.
Gracias y un saludo.

Daniel

31/5/2011
Tengo un problemilla
No se porque es yo es seguido vuestro ejemplo pero con pequeñas modificaciones, por ejemplo e metido un menu hecho con CSS y los <div class="grid_x"> que uso son de 9 y de 3 respectivamente el problema vien en este punto si pongo ls recuadros de la derecha que segun el video serian el de usuarios, el que tiene las RSS y la nube de links si las pongo con <div class="grid_3"> me lo baja y me lo pone debajo de los que en el video serian los articulos ya que los <div class="grid_9> son los que e empleado yo en mi diseñoson de 9 podria estarme pasando esto por no hacer como vosotros y trabajar con "id" en vez de "class" en ls posteriores etiquetas div que empleo o por estar usando Dreamweaver CS5 en vez de otro como por ejemplo Notepad++ o similares que hay?

Un saludo y que el torrente del saber que probocais no se corte.