You are on page 1of 31

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.

com

Manual de Maquetacin CSS

Autores del manual Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com: Miguel Angel Alvarez Serviweb
Director de DesarrolloWeb.com http://www.desarrolloweb.com (12 captulos) Diseo web Murcia http://www.serviweb.es/ (1 captulo)

Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Introduccin a la maquetacin con CSS


La maquetacin con CSS es algo que ya forma parte de nuestro da a da. Es as? Si tu respuesta es que s, felicidades!! ests ahorrndote muchos quebraderos de cabeza y enfocando tus esfuerzos en la va correcta, que te permitir crecer y evolucionar como diseador web y desarrollador en general. Puedes incluso ahorrarte la lectura de este artculo y pasar directamente a otros temas ms avanzados del manual de Maquetacin CSS de DesarrolloWeb.com. Si respondiste que la maquetacin CSS no forma parte de tus tcnicas habituales, o si piensas que no la necesitas, ests en el lugar correcto, donde intentaremos hacerte cambiar de idea y sobre todo, ensearte a hacer las cosas tal como dicen los estndares, que a la postre comprobars que es la manera ms sencilla y ms potente. En DesarrolloWeb.com tenemos diversos artculos ya publicados sobre la maquetacin web y segn escribimos estas lneas, los estamos agrupando todos en el Manual de Maquetacin CSS. Estamos creando este artculo como una mera introduccin al mundo de la maquetacin web basada en estndares, con CSS, o si lo preferimos, el diseo web sin tablas, o "tableless", como se conoce en ingls.

Qu haba antes de la maquetacin CSS


Antes de la llegada de CSS disponamos nicamente del HTML, que tena mltiples carencias a la hora de posicionar elementos en la pgina, porque cuando fue creado no se esperaba que la web se convirtiera en un multi-medio, donde los profesionales aportaran caudales de creatividad y diseos caprichosos. HTML en principio nicamente permita organizar el texto en prrafos, acompaado de enlaces, listas, imgenes, tablas y poco ms. Como slo haba HTML, los diseadores utilizaron el nico recurso que tenan a mano para posicionar elementos en la pgina: las tablas, que estaban pensadas para presentar informacin tabulada (en celdas formadas por filas y columnas), pero no para maquetar una web entera. Anidando tablas (colocando unas tablas dentro de otras) y con el recurso de imgenes de un pxel transparente, se poda obtener una estructura de diseo para luego llenarla con los contenidos que se desease. Las tablas solucionaron por un buen tiempo las necesidades de los diseadores de webs, pero tenan diversos problemas, aparte de no facilitar mucho la estructura de sitios con un diseo complejo. El contenido se mezcla con las reglas de presentacin o formato. Lo que hace que el cdigo de tu pgina web sea innecesariamente grande y ello deriva en pginas ms pesadas. Al final, con tablas tenemos una web ms lenta y la transferencia de datos de nuestro servidor tambin aumenta, con lo que tu servidor podra atender a menos usuarios al mismo tiempo y te saldr ms caro de mantener. El rediseo de una web se hace mucho ms complicado, porque para cambiar la forma con la que se ve tu pgina tendrs que actualizar todo el cdigo. Si maquetas utilizando CSS slo tendrs que cambiar el cdigo CSS para que el aspecto de tu pgina sea tan distinto como desees. Tu pgina tendr problemas serios al verse en otros dispositivos, como Palms o telfonos mviles, que tienen pantallas menores.
2

Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tendrs que remar contra corriente para intentar que tu pgina se vea como quieres, porque ests utilizando unas herramientas, las tablas, que no te ofrecen las posibilidades necesarias para maquetar a voluntad. Tendrs que aprender mil truqillos para saltarte las limitaciones de las tablas y a medida que los apliques, tu cdigo se har ms y ms pesado, menos entendible y su mantenimiento ser cada da ms complicado.

Por qu maquetar con CSS


Cuando apareci CSS tuvimos que aprender un lenguaje nuevo, lo que siempre es, al menos, un poco pesado. Pero es que los navegadores al principio tampoco lo soportaban completamente y lo peor de todo, no sabamos cmo utilizarlo para librarnos de las tablas, o incluso no sabamos que CSS nos iba a servir para eso. En definitiva, que durante un buen tiempo estaba la solucin a todos los problemas (las hojas de estilo en cascada: CSS) delante de nosotros, pero ya sea por pereza, por falta de soporte de los browsers, o porque no sabamos cmo valernos de ese nuevo lenguaje, muchos de nosotros retrasamos todo lo posible la incorporacin de esta nueva herramienta para maquetar toda una web. Afortunadamente, todas las razones por las que podamos estar dejando de maquetar una web con CSS han pasado a la historia. Los navegadores las soportan por completo y existe una extensa documentacin sobre la maquetacin con hojas de estilo en cascada, que podemos leer en DesarrolloWeb.com y en otros muchos sitios, aparte de infinidad de libros. Sobre la pereza, estoy seguro que la opinin de muchos webmasters en artculos como este y la evolucin de sitios web de referencia, han hecho que poco a poco nos haya resultado menos pesado empezar a trabajar intensivamente con CSS. Por otra parte, la profesionalizacin de los diseadores de webs y la competencia, hace necesario que, las personas que nos pretendemos dedicar a trabajar en este mundo del desarrollo, tengamos que aumentar la calidad de nuestro trabajo, as como mejorar la productividad y la facilidad de mantenimiento. Incluso si no pretendemos convertirnos en diseadores profesionales y tan slo queremos tener una web bonita y prctica, las CSS sern nuestro mejor aliado. Y todo esto por qu? Slo porque con CSS se separa el contenido del aspecto o presentacin? Entiendo que muchas personas no encuentren de entrada ventajas en separar el contenido de la presentacin. Yo mismo tard bastante en entender cmo esta prctica iba a ayudar en mi trabajo, pero os comentar un par de casos de mi experiencia: Hace ya bastantes aos, DesarrolloWeb.com estaba alojado en un servicio de hosting donde me cobraban un extra por la transferencia. Es decir, tena contratado con el servidor un plan de alojamiento (que por aquel entonces era el plano mayor que exista en ese alojador), que me asignaba una tasa de transferencia mensual que siempre acababa superando. Entonces la empresa de hosting me pasaba una factura mensual por el extra de transferencia que haba consumido el sitio. Ahora ya no recuerdo bien las tasas de transferencia que estaban contratadas y las que utilizbamos, pero lo que s recuerdo fue que hicimos un cambio rpido a CSS (por aquel entonces no utilizaba las hojas de estilo para nada en la pgina), de manera que el estilo qued separado (en buena parte) del contenido de la web y no se repetan infinidad de veces etiquetas del estilo de FONT, tablas con estilos repetitivos, etc. Todo eso hizo que el peso de cada pgina se redujera bastante y tambin la transferencia del servidor y recuerdo me ahorr alrededor de 20.000 de las antiguas pesetas (unos 120 euros) al mes en factura por el extra de transferencia. He de reconocer que en esta actualizacin ni siquiera nos libramos de las tablas, pero fue un primer paso en la adecuacin del sitio a las CSS, hoy s
Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 3

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

que si hubiramos suprimido las tablas todava habra ahorrado ms dinero. Os cuento otro caso representativo, que ocurri con otro sitio web que realizamos tambin nosotros: Guiarte.com, que estaba diseado con tablas y llevamos unos 4 aos en redisearlo con maquetacin CSS, desde que me nos lo propusimos hasta que lo terminamos. Ya s, es vergonzoso, pero por falta de tiempo ocurri as. El rediseo, de tablas a maquetacin CSS, se hizo a la vez que un cambio de tecnologa de servidor y haba que rehacer el sitio por completo. Pero sirva de prueba que en el ltimo ao se redise otra vez y slo tuvo que intervenir una persona de nuestro equipo durante un par de semanas para conseguirlo. Uno de los sitios web que ms me impactaron a la hora de entender cmo CSS podra ayudar en la maquetacin de webs, fue el CSS Zend Garden, en el que podemos ver una web a la que se le cambia el diseo radicalmente, slo alterando la hoja de estilo en cascada. Podemos acceder a ese sitio y ver el diseo principal, pero adems, en la barra de la derecha, encontrars un listado de alternativas de aspecto creadas por otras personas que resultan sin duda impactantes, por lo mucho que cambian con respecto a diseo original con slo alterar el archivo CSS con los estilos. Sin duda, una demostracin como la de CSS Zend Garden es realmente ilustradora sobre las posibilidades que tendremos a nuestro alcance, si maquetamos nicamente con hojas de estilos. Sobre las ventajas de maquetar con CSS frente a la maquetacin con tablas ya hemos hablado en otros artculos en DesarrolloWeb.com, por lo que no voy a repetir de nuevo las mismas ideas. En este artculo he querido hablar sobre las desventajas de las tablas y compartir con vosotros algunas de mis experiencias, con intencin de motivar a las personas en el aprendizaje de la maquetacin CSS. As pues, espero que os animis a leer este manual de Maquetacin CSS, donde aprenderis diversas tcnicas con las que empezar a utilizar posicionamiento CSS en lugar de las poco recomendables tablas. Una vez adquiridos unos conocimientos bsicos, con la lectura de los siguientes artculos, os sugiero completar las explicaciones y de paso aprender un poco sobre las prcticas habituales sobre maquetacin CSS en los vdeos: Videotutorial de introduccin a la maquetacin con CSS y en el Vdeo Prctico de Maquetacin CSS. Os sugiero tambin de paso otro manual interesante que tambin trata sobre la maquetacin de webs con CSS, que tiene adems una serie de vdeos donde podris ver las tcnicas que utilizamos de primera mano: Maquetacin CSS con 960 Grid System . Artculo por Miguel Angel Alvarez

Por qu disear con CSS


Las tablas existen y existieron desde el comienzo en HTML, pero no se crearon para disear un sitio, sino para la presentacin de datos tabulares. La utilizacin del border=0 y las imgenes transparentes hicieron posible crear una rejilla que permiti a los diseadores organizar textos e imgenes, establecer tamaos y ubicar objetos. Pero sto es sencillamente incorrecto. Las tablas no se crearon para maquetar y no deben utilizarse para eso, porque de esta forma se mezclan presentacin y contenido. La solucin es clara: CSS+HTML/XHTML. Afortunadamente, cada vez son ms las empresas que deciden dejar atrs las tediosas tablas y evolucionar desarrollando sus sitios respetando los estndares establecidos por la W3C (organizacin internacional que desde hace unos 12
Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 4

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

aos se dedica al desarrollo de pautas y estndares web), lo que facilita la accesibilidad y la correcta visualizacin de las pginas en los navegadores que respeten dichos estndares. Algunas de las ventajas de la maquetacin con CSS: Separacin de forma y contenido. Generalmente CSS y HTML se encuentran en archivos separados, lo que facilita el trabajo en equipo porque diseador y programador pueden trabajar independientemente. Por otro lado, permite el acceso a distintos navegadores y dispositivos. Trfico en el servidor. Las pginas pueden reducir su tamao entre un 40% y un 60%, y los navegadores guardan la hoja de estilos en la cach, sto reduce los costos de envo de informacin. Tiempos de carga. Por la gran reduccin en el peso de las pginas, mejora la experiencia del usuario, que valora de un sitio el menor tiempo en la descarga. Precisin. La utilizacin de CSS permite un control mucho mayor sobre el diseo, especificando exactamente la ubicacin y tamao de los elementos en la pgina. Tambin se pueden emplear medidas relativas o variables para que la pantalla o la caja contenedora se acomode a su contenido. Mantenimiento. Reduce notablemente el tiempo de mantenimiento cuando es necesario introducir un cambio porque se modifica un solo archivo, el de la presentacin, sin tener que tocar las pginas que contienen la estructura con el contenido. Diseo unificado y flexibilidad. Es posible cambiar completa o parcialmente el aspecto de un sitio con slo modificar la hoja de estilos. Por otro lado, el tener el estilo de una web en un solo archivo permite mantener la misma apariencia en todas las pginas. Posicionamiento. Las pginas diseadas con CSS tienen un cdigo ms limpio porque no llevan diseo, slo contenido. Esto es semnticamente ms correcto y la pgina aparecer mejor posicionada en los buscadores. Google navega obviando el diseo.

Recomiendo un sitio simptico y didctico sobre el tema: http://www.hotdesign.com/seybold/spanish/ Artculo por Serviweb

Maquetar una pgina con CSS


Vamos a realizar un ejercicio de maquetacin de una pgina web utilizando nicamente hojas de estilo en cascada (CSS), separando completamente el contenido del archivo HTML de las definiciones del aspecto, que se guardarn en un archivo .css. El ejercicio lo realizaremos paso a paso, partiendo de una imagen diseada previamente con un programa de edicin grfica como Photoshop.
Referencia: Tenemos un manual para aprender CSS en DesarrolloWeb.com, donde adems se explican las primeras nociones y conceptos que hay que conocer sobre la maquetacin.

Imgenes de partida Podemos ver la imagen que hemos creado y que vamos a intentar maquetar lo ms parecido posible. No es el objetivo de este manual ofrecer las tcnicas para realizar esta imagen, aunque en otros manuales de DesarrolloWeb.com podemos ver tutoriales para aprender algunos de los trucos de diseo utilizados.

Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Se trata de un diseo sencillo, pero en el que se encuentran elementos distintos y variados con los que trabajar. De esta imagen hemos extrado algunos grficos, que utilizaremos a la hora de maquetar el diseo. Sera interesante descargarlo para poder realizar el ejercicio por vuestra cuenta. Para los impacientes, tenemos un enlace a la pgina resultado que vamos a conseguir realizar al final del artculo. Puede ser bueno verla para hacerse una idea de donde queremos llegar. Desarrollo de la pgina y la hoja de estilos Vamos a generar los archivos HTML y CSS a la vez, pero paso a paso, de modo que podamos explicar las etiquetas y estilos que hemos utilizado para cada parte de la pgina. Como primer paso, en la cabecera <head> del documento HTML, enlazaremos con una hoja de estilos externa.
<head> <title>La web del invierno</title> <link rel="STYLESHEET" type="text/css" href="estilo.css"> </head>

El cuerpo de la pgina <body> En la declaracin de estilos CSS, para el cuerpo de la pgina, hemos definido una imagen de fondo "fondo.gif", que se repetir por toda la pgina en un mosaico. Tambin se definen unos mrgenes y el alineamiento del texto, en este caso centrado, para que el contenido de la pgina aparezca en el centro (esto es necesario para Internet Explorer, el centrado en Mozilla y otros navegadores se realiza en la capa principal con el atributo "margin" definido como "auto"). Adems se definen otros atributos para el cuerpo de la pgina, que luego heredarn otros elementos, como el tipo de letra o el color del texto.
BODY { background : #C0D9D9 url(images/fondo.gif) repeat; font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; color : #666666; margin : 20px 0px 20px 0px; text-align: center; }

La capa contenedor Generalmente, se utiliza una capa principal, a la que hemos llamado contenedor. Dentro de esta capa se colocan todos los elementos que va a tener la pgina.
<div id="contenedor"> </div>

En esta capa definimos el alineamiento del texto a la izquierda (porque en el cuerpo habamos centrado el texto, para que Internet Explorer centre la capa contenedor y deseamos que la alineacin por defecto sea a izquierda). Tambin definimos una anchura de 700px, un color de fondo blanco y el margen, con el atributo "margin", lo definimos como "auto", para que Mozilla
Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 6

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

y otros navegadores centren la capa.


#contenedor{ text-align: left; width: 700px; background-color : #ffffff; margin: auto; }

Por cierto, nos hemos dejado deliberadamente el borde de la capa, que habamos definido en el diseo original. Se podra haber definido el atributo "border", pero eso nos repercute negativamente en la maquetacin en Explorer. Veremos ms adelante cmo colocarlo para que se vea correctamente en todos los navegadores. Este ejercicio lo vamos a ver en varios pasos. En el siguiente bloque mostraremos cmo se maqueta la cabecera y la barra de navegacin. Artculo por Miguel Angel Alvarez

Maquetar una pgina con CSS II


Continuamos el ejercicio prctico para realizar la maquetacin de una pgina paso a paso con capas y hojas de estilo en cascada. Se puede ver el artculo anterior de esta serie en Maquetar una pgina con CSS. La cabecera de la pgina La imagen de la parte de arriba de la pgina la vamos a colocar en un nico archivo grfico. Es lo ms cmodo para este diseo, pues la cabecera no tiene otro motivo que decoracin.
<div id="cabecera"><img src="images/cabecera.jpg" width="700" height="106" alt="La Web del Invierno" border="0"></div>

Vemos que es una simple imagen, pero atencin, que tenemos que colocar el </div> a continuacin de <img> sin ningn espacio ni salto de lnea, porque si no, Internet Explorer, nos introducir un pequeo mrgen debajo de la imagen, que queremos evitar. Los atributos de estilo definidos para la cabecera son las dimensiones de la capa, que queremos que sean las mismas que las de la imagen. Aunque en este caso podramos habernos ahorrado definir esos valores porque son los que se tomaran por defecto.
#cabecera{ height : 106px; width: 700px; }

Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

La barra de navegacin Vamos con la capa utilizada para definir la barra de navegacin horizontal que hay debajo de la cabecera.
<div id="navegador"> <a href="#" class="enlacenav">Portada</a> | <a href="#" class="enlacenav">Invierno</a> | <a href="#" class="enlacenav">Diciembre a marzo</a> | <a href="#" class="enlacenav">La chimenea</a> | <a href="#" class="enlacenav">Deportes de invierno</a> | <a href="#" class="enlacenav">Contacto</a> </div>

Como se puede ver, simplemente hemos definido una serie de enlaces dentro de una capa. Hay que fijarse que adems los enlaces tienen una clase, llamada "enlacenav", que utilizaremos para darle un estilo especfico a a estos enlaces, independiente del definido por defecto en la pgina. Por lo que respecta a la capa, se define un color y una imagen de fondo, unos mrgenes internos (atributo padding) y un borde, tanto para la parte de arriba de la capa como para la de abajo.
#navegador{ background : #F5F4C3 url(images/fondonav.gif); padding : 3px 10px 5px 10px; border-top : 1px solid #cccccc; border-bottom : 1px solid #cccccc; }

Para los estilos de los enlaces utilizamos una clase. Para definir los estilos de cada uno de los estados de los enlaces (visitados, activos, no visitados, etc), se utilizan las pseudo-clases VISITED, ACTIVE, FOCUS, LINK Y HOVER. Simplemente definimos el color de los enlaces, el mismo para todas las pseudo-clases, menos para HOVER, que tiene un color distinto. HOVER es el estado del enlace cuando el puntero ratn est situado encima. En este caso, cuando el ratn est encima, cambiar de color.
A.enlacenav, A.enlacenav:VISITED, A.enlacenav:ACTIVE, A.enlacenav:FOCUS, A.enlacenav:LINK{ color: #494E6B; } A.enlacenav:HOVER{ color: #3F7DE3; }

Podemos ver cmo queda el ejercicio realizado hasta el momento. Artculo por Miguel Angel Alvarez

Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Maquetar una pgina con CSS III


Este ejercicio trata de maquetar una pgina utilizando capas y css. La primera parte se puede ver en: Maquetar una pgina con CSS. El cuerpo de la pgina La parte de la pgina donde colocamos la informacin principal. Crearemos una capa independiente para el cuerpo y colocaremos dentro el ttulo, el texto y otros elementos que queramos situar. Los elementos los introducimos con las etiquetas HTML que deberan tener en una pgina bsica. Luego, con CSS definiremos el estilo para el cuerpo y cada una de las etiquetas que colocamos dentro.
<div id="cuerpo"> <h1>Ttulo de la pgina</h1> <p> En este artculo vamos a conocer la maquetacin de paginas utilizando Hojas de estilos en cascada (CSS). Veremos cmo realizar este tipo de maquetacin, junto con algunas ventajas e inconvenientes. Para muchos ser todava un campo por explorar. Aunque no vamos a entrar en grandes detalles, vamos a intentar dar a conocer la maquetacin con CSS para que cubrir la posible laguna por parte del lector. En captulos sucesivos ampliaremos la informacin y ofreceremos tutoriales ms prcticos. </p> <p> Como se ha podido aprender en el Manual de CSS, las hojas de estilo en cascada ayudan a separar el contenido de la forma, es decir... </p> <div id="navabajo"> <a href="#">Volver</a> | <a href="#">Portada</a> | <a href="#">Mapa del sitio</a> </div> </div>

Vemos que el cuerpo tiene un ttulo, varios prrafos y un div, incluido dentro del propio cuerpo, con una segunda barra de enlaces que faciliten la navegacin para las personas que lleguen al final del scroll vertical de la pgina. Los estilos del cuerpo definen la anchura, margen, margen interno, y un color de fondo. Adems, se define el atributo "float:left" para hacer que el cuerpo "flote" a la izquierda. El resultado es que la capa del cuerpo se coloque a la izquierda y el contenido escrito a continuacin se site, rodeando a esta capa, a la derecha. (El efecto es el mismo que si asignamos en HTML el atributo align=left en una imagen)

Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Para posibilitar la disposicin en dos columnas que hemos definido en el diseo original, vamos a hacer que la capa de la izquerda -el cuerpo- "flote" a la izquierda. Posteriormente, la capa de la derecha que aun no hemos colocado-el lateral-, haremos que "flote" a la derecha.
#cuerpo{ width:480px; margin-left: 8px; padding: 12px 0px 10px 0px; background-color : #ffffff; float:left; }

Tambin se define un estilo para cada algunas de las etiquetas que hemos situado dentro del cuerpo:
H1{ font-size: 12pt; }

Los encabezados de nivel 1, que tengan tamao de letra 12pt.


#navabajo{ font-weight : bold; }

Para asignar una negrita en el div de la parte inferior del cuerpo, que tiene enlaces para facilitar la navegacin. Podemos ver el ejercicio tal como queda con los pasos realizados hasta el momento. Artculo por Miguel Angel Alvarez

Maquetar una pgina con CSS IV


En los pasos anteriores de este taller vimos cmo crear la cabecera y cuerpo de la pgina. Ahora vamos a ver cmo hacer el lateral derecho de la pgina. La capa lateral En el lateral derecho situamos una nueva capa, que ofrece acceso a servicios y otras informaciones.
<div id="lateral"> ... contenido lateral... </div>

Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

10

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

El contenido que vamos a situar dentro de esta capa lo veremos por partes, pues tiene bastantes detalles que destacar tranquilamente. Los estilos son los siguientes:
#lateral{ width: 200px; background-color: #EBF2FE; border-bottom : 1px solid #cccccc; border-left : 1px solid #cccccc; float:right; }

Se define una anchura, un color de fondo y bordes de color gris claro en la parte lateral izquierda y abajo, los otros dos lados no tendrn borde por estar en contacto con los bordes de otros elementos. Adems, con el atributo float:right, indicamos que este lateral debe "flotar" hacia la derecha. As, el cuerpo flota a la izquierda y el lateral a la derecha, con lo que conseguimos una disposicin en 2 columnas. Veremos a continuacin los elementos que vamos a colocar dentro de la capa lateral, en una especie de cajas independientes. Aunque, antes de ver esas cajas una a una, merece la pena conocer en lneas generales cmo van a crearse. Cada caja tendr este cdigo HTML, compuesto por un titulo y un contenido de la caja:
<h2 class="titlat">Titulo de la caja</h2> <div id="idunico" class="cuerpolateral"> Contenido de la caja </div>

El ttulo lo incluimos con una etiqueta <h2> y la parte de la caja con el contenido, se define con un div. Cada uno de estos elementos tiene una clase, que se aplicar a los mismos elementos en cada una de las cajas, de modo que todos los elementos del lateral compartan un mismo estilo.
.titlat{ background-color:#68729E; color:#ffffff; font-size:8pt; text-transform : uppercase; padding: 7px 3px 7px 8px; font-weight : normal; letter-spacing : 2px; margin: 0px 0px 8px 0px; } .cuerpolateral{ padding: 5px 4px 13px 10px; }

El encabezado de nivel 2 utiliza la clase "titlat", que define un color de fondo, un color del texto, un tamao de letra, un cambio a maysculas de las letras del ttulo, unos mrgenes internos, peso de letra normal (no negrita, como suelen ser los encabezamientos por defecto), un espaciado de letras de 2 pixel y un margen. Los titulares llevan asociado un salto de lnea doble arriba y abajo, que deseamos evitar y para ello hemos definido un margen de 0 pixels, menos en la parte de abajo, que tendr 8 pixel.

Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

11

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Las cajas laterales tambin tienen un estilo, que se aplica a todos los cuerpos de las cajas que hay en el lateral. Ese estilo simplemente define unos mrgenes internos. Caja de buscar Uno de los elementos que vamos a colocar dentro del lateral es una caja de bsqueda, con un formulario para realizar bsquedas internas, dentro del sitio, y en todo el web. Esa caja de bsqueda se coloca en un formulario. Hemos puesto diversos identificadotes a los elementos que hay dentro del fomulario, para poder aplicar estilos a cada componente por separado. Aunque algunos de estos selectores ni siquiera los hemos llegado a utilizar, pueden venir bien si queremos hacer en el futuro modificaciones de la hoja de estilos para actualizar el diseo del web.
<h2 class="titlat">Buscar</h2> <div id="fbuscar" class="cuerpolateral"> <form> <div id="campotexto"><input type="text" name="criterio"></div> <div id="botonbuscar"><input type=image src="images/go.gif" width="25" height="15"></div> <div class="radio"><input type="radio" name="op" value="1"> En la Web del invierno</div> <div class="radio"><input type="radio" name="op" value="2"> En toda la Web</div> </form> </div>

Los elementos que hemos definido en la hoja de estilos para este pequeo formulario son los siguientes:
INPUT { font-size : 8pt; }

Con ello definimos que los campos de texto tienen un tamao de letra de 8 puntos.
#fbuscar form{ margin-bottom : 0px; margin-top : 0px; }

El formulario, que est situado dentro de la capa fbuscar, no debe tener mrgenes, ni arriba ni abajo.
#campotexto{ float: left; }

La capa "campotexto", donde est el campo de texto, hemos definido que debe "flotar" a la izquerda.
#campotexto input{ width:100px; } El input que hay dentro de la capa campotexto debe tener 100 pixels de ancho. #botonbuscar { padding-top : 3px; padding-left: 106px; }

Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

12

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

La capa donde est el botn de submit, que en este caso es una imagen de submitir (<input type="imagen">), tiene un margen interno de 3 pixels por arriba, y de 106 por el lado izquierdo. Los 106 pixels de ancho salen de los 100 que ocupa el campo de texto que hay a la izquierda, ms 6 pixeles adicionales, que son el verdadero margen que habr entre el campo de texto y la imagen de submitir.
#botonbuscar input{ border : 0px none; }

Con esta ltima definicin estamos indicando que la imagen de submitir (el <input type="image"> que hay dentro de la capa botonbuscar) no tenga borde.
.radio{ clear:both; }

Esta clase, que afecta a las capas donde estn los botones de radio, define que no deben haber elementos "flotando" ni a la izquierda ni a la derecha, de los botones de radio. La caja de registro En la siguiente caja del lateral aparece un pequeo texto invitando a registrarse al visitante.
<div id="registro" class="cuerpolateral"> <a href="#">Registrese con nosotros</a> y obtenga muchas ventajas. </div>

Esta capa no tiene ningn estilo especfico, simplemente se comporta heredando los estilos de otras capas y con los que se han definido en las clases que se utilizan. La caja de otras informaciones Situaremos una ltima caja dentro del lateral, que contiene enlaces a otras informaciones. Dentro de la caja colocaremos varios enlaces dentro de una lista.
<h2 class="titlat">Otras informaciones</h2> <div id="otras" class="cuerpolateral"> <ul> <li><a href="#">Quienes somos</a> <li><a href="#">Nuestra misin</a> <li><a href="#">Agenda de eventos</a> </ul> </div>

Para personalizar el estilo de la lista de enlaces se utilizan los siguientes estilos.


#otras ul{ margin : 5px 10px 0px 0px; padding: 0px 0px 0px 4px; list-style: none; }

Por un lado tenemos el estilo definido para toda la lista de elementos. En este caso se eliminan los mrgenes que este tipo de listas tienen implcitos. Se coloca tambin un margen interno 4 pixel a la izquierda y cero en el resto de las posiciones. Con "list-style:none" se indica que no
Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 13

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

se desea ninguna bolita a la izquierda de los elementos, puesto que la vamos a colocar a continuacin nosotros manualmente como fondo de los <li>.
#otras li{ padding-left: 14px; background: transparent url("images/bullet.gif") 0 2px no-repeat; margin-bottom: 10px; }

Por otra parte, para cada uno de los elementos de la lista, de define un espacio de 14 pixel a la izquierda. Esos 14 pixel sirven para hacer espacio, para que quepan unas pequeas imgenes que vamos a poner de fondo en las listas, que van a hacer las veces de bolita. Tambin se define un fondo de los <li> que es la imagen con la bolita personalizada, a juego con nuestro diseo. Tambin se define un margen en la parte inferior. Despus de integrar todo lo que hemos visto en este ejercicio para crear el lateral de la pgina, el diseo queda tal como se puede ver en esta pgina. Artculo por Miguel Angel Alvarez

Maquetar una pgina con CSS V


Apuntaremos los ltimos retoques en el diseo de la pgina con CSS para finalizar el taller de maquetacin con CSS. Se puede ver la primera parte del artculo. Pie de la pgina Este elemento no lo habamos previsto en la imagen original, creada previamente, pero lo hemos decidido colocar porque lo necesitamos, para que en la parte donde est el cuerpo y el lateral, aparezca el fondo de color blanco. En Explorer aparece el fondo blanco sin ningn problema, pero en Mozilla y otros navegadores, al estar las dos capas de cuerpo y lateral "flotando" a izquierda y derecha, no entiende que deba mantener el fondo blanco definido en el container. No se si se entiende esto bien, pero lo mejor es hacer una prueba y ver lo que hemos definido hasta el momento en la plantilla en Firefox o Mozilla. Veremos que el fondo blanco no est continuado hacia abajo.
<div id="pie"> Pruebas de maquetacin CSS 2005 DesarrolloWeb.com </div>

Esta capa tiene el siguiente estilo definido:


#pie{ clear : both; color : #cccccc; text-align : right; margin : 10px 10px 0px 10px; padding-bottom:10px; }

Con "clear:both" indicamos que la capa debe mostrarse sin elementos flotando a izquierda y
Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 14

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

derecha, de modo que la posicin de la capa ser inmediatamente por debajo de la capa cuerpo y lateral. Luego se define un color para el texto una alineacin de texto, unos mrgenes y un margen interno por la parte de debajo de 10 pixel. El borde externo El diseo original inclua un borde de 2 pixel rodeando a toda la capa principal. Podemos hacer la prueba de incluir un borde en la capa contenedor. Para ello hay que aadir en el estilo para la capa contenedor el atributo border, de la siguiente manera.
#contenedor{ text-align: left; border: 2px solid #cccccc; width: 700px; margin: auto; background-color : #ffffff; }

En Mozilla y navegadores similares, todo es correcto. Pero en Internet Explorer la cosa tiene su problema. Esto es debido a que el espacio de los bordes, en Explorer, se toma del que se haya asignado a la propia capa y en Mozilla y otros navegadores, se toma como espacio adicional, aparte del que se haya asignado a la capa en si. Lo mejor es probarlo y verlo por uno mismo, o bien encontrarse con el problema y encontrarle solucin sin tener que romperse la cabeza. Nosotros lo hemos arreglado quitando el borde en la capa contenedor y creando una nueva capa, en la que situaremos el contenedor. Esa nueva capa la hemos llamado borde y es la que va a tener el estilo de borde definido.
<div id="borde"> <div id="contenedor"> .... contenido de toda la pgina </div> </div>

Para conseguir el borde se han definido el siguiente estilo para la capa borde.
#borde{ border: 2px solid #cccccc; text-align: left; width: 700px; margin: auto; }

Primero hemos definido un borde de 2 pixel. Luego un centrado a la izquierda (para contrarrestar el centrado al centro que tiene el body y que habamos puesto para que Explorer centrase la capa del contenido. Tambin se incluye una anchura de 700 pixel y un margen "auto" para que Mozilla y otros navegadores centren la capa. El resultado final del ejercicio se puede ver en una pgina aparte. Por supuesto, conviene ver el resultado final utilizando varios navegadores distintos.

Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

15

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Conclusin Hemos visto cmo maquetar una pgina utilizando CSS paso a paso. Esperamos que hayis podido seguir el ejercicio y que ninguna dificultad os haya frenado. Realmente el trabajo con CSS para la maquetacin es una tarea fcil, pero tambin es muy sencillo encontrarnos con escollos o problemas misteriosos que no parecen tener respuesta. Sin ser un diseo complicado, realizar esta maquetacin nos ha llevado varias horas de trabajo y algn que otro padecimiento, que por suerte no ha llegado a desesperacin. Sobretodo existen dificultades a la hora de conseguir el diseo que se vea correctamente en todos los navegadores del mercado. Este diseo lo hemos probado con xito en Mozilla, Firefox, Netscape, Opera y Explorer. Para que la compatibilidad entre navegadores no signifique un problema muy pesado, nuestro consejo y el de otros desarrolladores, es disear con Mozilla o navegadores similares. Luego se puede ver el resultado en Explorer y adaptar lo que fuera necesario para terminar de cuadrar el diseo. En este caso habrn pocas cosas que cambiar, mientras que si diseamos para Explorer y luego vemos el resultado en otros navegadores, seguramente nos tiremos de los pelos porque nada est en su sitio. La experiencia en el trabajo con CSS, nos dice que a menudo surgen los mismos problemas o similares. Una vez que ya los hemos resuelto unas pocas veces y nos hemos acostumbrado a ello, igual que hicimos con los detalles relativos al HTML y la maquetacin con tablas, CSS se torna mucho ms sencillo, potente y rpido de desarrollar. Resultado final del ejercicio.
Referencias en vdeo: Si te interesa obtener nuevas explicaciones prcticas sobre maquetacin CSS te recomendamos ver los vdeos: Introduccin a la maquetacin con CSS y la Prctica de Maquetacin CSS. Ambos videotutoriales te seguirn ayudando con nuevos ejemplos tiles para dominar estas tcnicas.

Artculo por Miguel Angel Alvarez

Variar el diseo y maquetacin con la hoja de estilos


Hemos visto en una serie de artculos anteriores un ejemplo de cmo maquetar una pgina utilizando nicamente CSS para posicionar sus distintos elementos. Una de las principales ventajas de CSS es que se puede cambiar el aspecto de una pgina radicalmente, sin necesidad de cambiar su cdigo HTML. Por ello, nos ha parecido interesante seguir profundizando en la maquetacin de pginas web con CSS, ofreciendo una nueva propuesta de diseo para el mismo archivo HTML que habamos utilizado anteriormente. Para empezar, podemos echar un vistazo al diseo que hemos creado, utilizando un programa de edicin grfica tipo Photoshop o Fireworks. Vamos a trabajar sobre esta imagen, para que el diseo resultante sea lo ms parecido posible. Tambin ofrecemos para descarga un archivo comprimido con todas las imgenes que vamos a utilizar en este diseo. Ser interesante tenerlo a mano para tratar de hacer por nosotros mismos el ejemplo.
Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 16

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

El mismo cdigo HTML Insistimos en la idea de que vamos a utilizar el mismo cdigo HTML que hemos construido al hacer el ejemplo del artculo de maquetacin CSS, dado que las hojas de estilo en cascada nos proporcionan herramientas para alterar el aspecto de la pgina sin editar siquiera el archivo HTML. La anterior maquetacin ya se hizo pensando en que se iba a utilizar para proponer ms de un diseo, por lo que se aadi alguna etiqueta, clase o identificador adicional para facilitar este paso. Aunque durante la creacin de este segundo ejemplo hemos estado tentados de editar el cdigo HTML, slo hemos cambiado un aspecto que vamos a sealar a continuacin. Se trata de la imagen de la cabecera. Si nos fijamos en el archivo HTML anterior, comprobaremos que la imagen est incluida por medio de una etiqueta <img>. Al definirse la ruta de la imagen y sus valores de ancho y alto por medio de los atributos de <img>, no podemos cambiar esos datos con la hoja de estilos. Como deseamos cambiar la imagen en distintos diseos, en lugar de colocar la imagen con la etiqueta directamente en el cdigo HTML, vamos a utilizar un truco que hemos aprendido en CSSZenGarden, que se basa en incluir un titular de texto, que luego vamos a sustituirlo por la imagen que deseemos. A su vez, hay que decir que este truco es original de Douglas Bowman http://www.stopdesign.com/articles/css/replace-text/. Antes, habamos definido el siguiente pedazo de cdigo para situar la imagen de cabecera:
<div id="cabecera"><img src="images/cabecera.jpg" width="700" height="106" alt="La Web del Invierno" border="0"></div>

Ahora, el cdigo de la cabecera ser el siguiente:


<div id="cabecera"> <h1><span>La Primavera</span></h1> </div>

Simplemente hemos definido un titular, que luego no aparecer en la pgina, porque lo ocultaremos por medio de el atributo visibility de CSS. En su lugar, definiremos un fondo para la capa "cabecera" y asignaremos sus atributos por medio de hojas de estilo. As quedarn los estilos para el elemento cabecera y el encabezamiento <h1>:
#cabecera{ background: transparent url(images/cabecera.jpg) no-repeat; height: 288px; width: 549px; } #cabecera h1 { margin: 0px 0px 0px 0px; } #cabecera h1 span { display:none; }

El nuevo cdigo CSS


Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 17

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Aparte de lo comentado para la cabecera, el cdigo CSS creado para aplicar los estilos no aporta mucha novedad a lo que hemos visto hasta el momento. Bsicamente se ha utilizado nuevas imgenes para los fondos y hemos variado los tamaos y mrgenes de las capas. Aparte, en la parte central o cuerpo de la pgina, se ha alineado de manera distinta los elementos, quedando los cuadrados del buscador y enlaces a otras secciones a la izquierda y el texto de la pgina a la derecha. Tambin se puede apreciar como se han utilizado unas imgenes para decorar el fondo de los titulares de los recuadros de la izquierda. Tambin se ha colocado una imagen en el fondo donde est el texto de la pgina. Esta imagen est muy difuminada para permitir leer el texto con comodidad. Vamos a dejar de lado, tal vez para prximos artculos, la explicacin detallada de la declaracin de estilos utilizada. En lugar de eso ponemos los enlaces hacia el archivo HTML y el CSS. Pgina con el resultado final del ejercicio. Declaracin de hojas de estilo utilizada. Artculo por Miguel Angel Alvarez

Maquetacin CSS a dos columnas


Vamos a ver cmo realizar una maquetacin a dos columnas con CSS, sin utilizar tablas. Adems de las dos columnas, para completar la estructura tpica de una web, colocaremos una cabecera y un pie de pgina. El ejemplo pretende ser el inicio de una serie de artculos para mostrar cmo realizar distintos tipos de plantillas, maquetando con CSS en lugar de tablas. Iremos publicando estos artculos en nuestro Taller de CSS. Empezamos mostrando los dos ejemplos de maquetacin que veremos en este artculo, siempre con dos columnas, dejando la columna con los enlaces de la barra de navegacin a la izquierda o la derecha. Maquetacin con dos columnas y enlaces a la izquierda Maquetacin con dos columnas y enlaces a la derecha

Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

18

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

El cdigo HTML El cdigo HTML de los dos ejemplos que hemos adelantado es el mismo. Bsicamente este:
<div id="contenedor"> <div id="cabecera"> Cabecera 01 </div> <div id="cuerpo"> <div id="lateral"> <ul> <li><a href="#">Enlace 1</a> <li><a href="#">Vnculo 2</a> <li><a href="#">Otro enlace</a> <li><a href="#">Link chulo</a> <li><a href="#">Ms enlaces</a> <li><a href="#">Otro ltimo</a> </ul> </div> <div id="principal"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ...... </div> </div> <div id="pie"> 2005 DesarrolloWeb.com </div> </div>

Se puede ver que tenemos una capa contenedor, que engloba todo el cdigo. Luego, dentro del contenedor tenemos tres bloques. La cabecera, el cuerpo y el pie de pgina. La cabecera y el pie de pgina son dos capas tal cual, que ocupan todo el espacio del contenedor. El lugar donde tendremos las dos columnas es el cuerpo. Dentro del cuerpo tenemos dos partes, para codificar cada una de las dos columnas. Una parte, que hemos llamado "lateral", con una lista de enlaces (sera la barra de navegacin) y otra parte con el texto de la pgina, que hemos llamado "principal". El cdigo CSS Como habamos adelantado, veremos dos variantes de codificacin a dos columnas, con los enlaces a la izquierda y a la derecha. No obstante, la mayor parte del cdigo CSS de ambos ejemplos es la misma, pues slo vara la declaracin de estilos de la capa "lateral" y de la capa "principal".

Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

19

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Maquetar con los enlaces a la izquierda Veamos la codificacin CSS para la pgina con los enlaces a la izquierda.
<style type="text/css"> BODY { font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; margin: 10 0 10 0px; text-align: center; background-color: #ebebeb; } #contenedor{ text-align: left; width: 770px; margin: auto; } #cabecera{ background-color: #d0d0ff; color: #333300; font-size:12pt; font-weight: bold; padding: 3 3 3 10px; } #cuerpo{ margin: 10 0 10 0px; } #lateral{ width: 160px; background-color: #999999; float:left; } #lateral ul{ margin : 0 0 0 0px; padding: 0 0 0 0px; list-style: none; } #lateral li{ background-color: #ffffcc; margin: 2 2 2 2px; padding: 2 2 2 2px; font-weight: bold; } #lateral a{ color: #3333cc; text-decoration: none; } #principal{ margin-left: 170px; background-color: #ffffff; padding: 4 4 4 4px; } #pie{ background-color: #cccccc; padding: 3 10 3 10px; text-align:right; }

La parte que vamos a remarcar es donde se define el estilo del lateral y la capa principal. El lateral hacemos que tenga un tamao fijo de 160 pixel, pero lo ms importante es que hacemos que "flote" a la izquierda con float:left;. Esto hace que el lateral se quede en la izquierda y permite que el contenido insertado despus del lateral se coloque a la misma altura, pero a la derecha.

Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

20

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Por su parte, para la capa principal, simplemente se indica que tiene un margen a la izquierda de 170 pxeles. Esto hace que se coloque al lado de la capa lateral, dejando un espacio en blanco de 10 pxeles. Tiene un margen de 170, de los que 160 son para el espacio que va a ocupar la capa de los enlaces y 10 pxeles de espacio entre la capa principal y la lateral. Como la capa principal no tiene definida su anchura, se har tan grande como lo permita el contenedor.
Nota: Estas explicaciones no son completas de todo el ejercicio. Se supone que el lector ya tiene asimilados algunos conceptos que se han explicado en el Manual de CSS o en el Taller de CSS.

Podemos ver el ejemplo en marcha en una pgina aparte. Como es un archivo HTML, podemos ver el cdigo fuente para ver cmo queda el conjunto de maquetacin y declaracin de estilos completo. Maquetar con los enlaces a la derecha Continuamos mostrando los cambios que habra que hacer para maquetar la pgina con la columna de enlaces a la derecha. Simplemente vamos a cambiar el cdigo CSS de las capas lateral y principal.
#lateral{ width: 160px; background-color: #999999; float:right; } #principal{ background-color: #ffffff; padding: 4 4 4 4px; margin-right: 170px; }

Ahora la capa lateral estamos indicando que flote a la derecha. Por su parte, en la capa principal hemos cambiado el margen que haba antes hacia la izquierda para ponerlo en la parte de la derecha. Podemos ver el ejemplo en una pgina aparte. Diseo fluido Hasta aqu en este artculo hemos visto cmo hacer un diseo con una anchura fija. Si queremos un diseo fluido (que se ajusta a la anchura de la ventana del navegador), bastara con quitarle al contenedor el atributo width: 770px;. Si no tiene definida una anchura, la capa contenedor se ajustar al tamao de la ventana del navegador que tenga el visitante. Adems, tendremos que darle un margen al BODY, para que el contenedor no se acople por completo al borde de la ventana. Por ejemplo, podemos darle un margen de 10 pxeles a cada lado.

Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

21

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tendramos ahora esta declaracin de estilos para el BODY y la capa "contenedor":


BODY { font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; margin: 10 10 10 10px; text-align: center; background-color: #ebebeb; } #contenedor{ text-align: left; margin: auto; }

Podemos ver el ejemplo en una pgina aparte. Artculo por Miguel Angel Alvarez

Maquetacin CSS a tres columnas


Continuando nuestros talleres de CSS, vamos a ver ahora como hacer una estructura de tres columnas para una pgina web. Esta es una estructura bastante tpica de portal. En una de las columnas se suele situar la barra de navegacin, en otra el contenido y en la ltima una serie de banners con promociones. Sera bueno ver el resultado que buscamos en una pgina aparte. Este artculo va a presuponer que el lector comprende ya la maquetacin con CSS y que ha ledo el artculo Maquetacin CSS a dos columnas. Nos basaremos en ese artculo para componer la pgina con CSS a tres columnas. En lneas generales, la posibilidad que vamos a explorar a continuacin para maquetar una web con tres columnas, consiste en lo siguiente: Pondremos la columna de la izquierda flotando a la izquierda, la columna de la derecha flotando a la derecha y por ltimo pondremos la parte principal, que aparecer en el centro de la pgina. El cdigo HTML para hacer este ejemplo ser el siguiente:
<div id="contenedor"> <div id="cabecera"> Cabecera 01 </div> <div id="cuerpo"> <div id="lateral"> <ul> <li><a href="#">Enlace 1</a> <li><a href="#">Vnculo 2</a> <li><a href="#">Otro enlace</a> <li><a href="#">Link chulo</a> <li><a href="#">Ms enlaces</a> <li><a href="#">Otro ltimo</a> </ul> </div> <div id="otrolado"> <img src="bannerlateral.gif" width="120" height="600" alt=""> </div>

Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

22

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

<div id="principal"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla condimentum commodo orci. Nulla eget purus nec massa ... </div> </div> <div id="pie"> 2005 DesarrolloWeb.com </div> </div>

Vemos que la pgina contiene tres partes, la cabecera, el cuerpo y el pie. La cabecera y el pie se colocarn en el documento ocupando todo el ancho disponible. La parte donde colocaremos las tres columnas es el cuerpo. Dentro del cuerpo, como podemos ver, tenemos tres capas. La capa "lateral", que es la que hemos pensado colocar a la izquierda. Luego est la capa "otrolado", que es la que planeamos colocar a la derecha. Por ltimo est la capa "principal", que es la parte central. La capa "principal" aparecer en el centro, porque a los dos lados estarn ocupados por las capas laterales. El CSS que vamos a utilizar para maquetar esto ser el siguiente. Se parece mucho al ejemplo de maquetacin CSS a dos columnas. Luego lo comentaremos.
BODY { font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; margin: 10 0 10 0px; text-align: center; background-color: #ebebeb; } #contenedor{ text-align: left; width: 770px; margin: auto; } #cabecera{ background-color: #d0d0ff; color: #333300; font-size:12pt; font-weight: bold; padding: 3 3 3 10px; } #cuerpo{ margin: 10 0 10 0px; } #lateral{ width: 160px; background-color: #999999; float:left; } #lateral ul{ margin : 0 0 0 0px; padding: 0 0 0 0px; list-style: none; } #lateral li{ background-color: #ffffcc; margin: 2 2 2 2px; padding: 2 2 2 2px; font-weight: bold; } #lateral a{ Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 23

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

} #otrolado{ width: 120px; float: right; } #principal{ margin-left: 170px; background-color: #ffffff; padding: 4 4 4 4px; width: 460px; } #pie{ background-color: #cccccc; padding: 3 10 3 10px; text-align:right; clear: both; }

color: #3333cc; text-decoration: none;

Tendremos un contenedor, de 770 pxeles (px) de ancho, que es donde vamos a colocar todas las capas. Nos centramos en explicar la zona del cuerpo, que es donde aparecern las tres columnas. Vemos como la capa "lateral" tiene definido un ancho de 160 px, y un float: left; para que flote a la izquierda. Vemos luego como la capa "otrolado" tiene 120 px de ancho y flota a la derecha. Luego vemos la capa "principal", que tiene un margen a la izquierda de 170 px, para dejar un espacio con respecto a la capa "lateral". 170 px porque la capa "lateral" ocupa 160 px de ancho, ms 10 px que es lo que realmente estamos poniendo de margen. En la capa "principal" tambin hemos definido un ancho de 460 px, para que ocupe justo el espacio que queda en el centro. Se puede ver el ejemplo en marcha en una pgina aparte. Diseo fluido Los diseos fluidos son los que se ajustan a la anchura que tengamos en la ventana del navegador. En el anterior ejemplo el diseo tena una anchura fija de 700 pxeles y ahora vamos a hacer un par de modificaciones para que el diseo se ajuste a la ventana del navegador. Simplemente tendremos que quitar la definicin de anchura de la capa "contenedor".
#contenedor{ text-align: left; margin: auto; }

Luego, tambin quitaremos la definicin de anchura de la capa "principal" y aadiremos el atributo margin-right: 130px; para que la capa con el contenido central tenga un margen con respecto a la capa que queda a la derecha. 130 px porque la capa de la derecha ocupaba 120 px, ms 10 px que es realmente el margen que estamos dejando.

Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

24

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

#principal{ margin-left: 170px; background-color: #ffffff; padding: 4 4 4 4px; margin-right: 130px; }

Podemos ver el ejemplo en una pgina aparte. Artculo por Miguel Angel Alvarez

Variacin de la maquetacin con CSS a 3 columnas


Ya vimos en un artculo anterior una manera de realizar una maquetacin con CSS a tres columnas. Ahora vamos a realizar unos cambios sencillos para mejorar algo el cdigo del anterior artculo. Antes que nada habra que explicar por qu estimamos que puede mejorarse el ejercicio de maquetacin a tres columnas, tal y como fue planteado anteriormente. Se trata simplemente de mejorar la organizacin del contenido de la pgina de una manera ms inteligente. A mi me gusta siempre ver el aspecto que tiene una pgina web sin la hoja de estilo en cascada, para ver si la informacin tiene sentido y orden tal y como se ha colocado en el cdigo HTML. Es decir, si est presentada de una forma adecuada, aunque no se estn visualizando los estilos definidos en el CSS. Cualquier navegador que no tenga soporte a CSS mostrar la pgina sin ningn estilo y todos los elementos aparecern uno detrs de otro segn se hayan colocado. No es habitual que nos visite una persona que tenga un navegador incompatible con hojas de estilo en cascada, pero para mejorar la accesibilidad de las pginas, tambin conviene que se lean bien, aunque no se tenga acceso a CSS. As se vera la maquetacin CSS a tres columnas sin la declaracin de estilos que habamos presentado en el anterior ejemplo. Si pulsamos el enlace podremos comprobar que aparece el banner vertical en la parte superior de la pgina, cuando lo interesante sera que apareciera debajo del contenido, por lo menos en mi opinin. Variacin al ejercicio anterior para maquetar a tres columnas Bsicamente vamos a hacer una maquetacin a dos columnas, la izquierda, con la barra de navegacin y la de la derecha, con el otro contenido. En la parte de la derecha, a su vez, haremos dos columnas ms, una a la izquierda que tendr el texto de la pgina y otra a la derecha, con la barra lateral derecha.

Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

25

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

En realidad, el ejercicio queda muy similar. Veamos el cdigo HTML:


<div id="contenedor"> <div id="cabecera"> Cabecera 01 </div> <div id="cuerpo"> <div id="lateral"> <ul> <li><a href="#">Enlace 1</a> <li><a href="#">Vnculo 2</a> <li><a href="#">Otro enlace</a> <li><a href="#">Link chulo</a> <li><a href="#">Ms enlaces</a> <li><a href="#">Otro ltimo</a> </ul> </div> <div id="derecha"> <div id="principal"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> <div id="otrolado"> <img src="bannerlateral.gif" width="120" height="600" alt=""> </div> </div> </div> <div id="pie"> 2005 DesarrolloWeb.com </div> </div>

La capa "derecha" es la que hemos creado nueva, donde colocamos tanto el texto principal como la capa del banner vertical. El cdigo CSS que hemos variado slo afecta a la capa "derecha", que no estaba creada anteriormente y a la capa "principal", que es donde est el texto central.
#derecha{ margin: 0 0 0 170px; } #principal{ background-color: #ffffff; padding: 4 4 4 4px; width: 460px; float: left; }

La capa "derecha" tiene un margen de 170 pixels, para dejar espacio a la barra de enlaces de la izquierda. La capa "principal", que antes tena ese margen de 170 pxeles, ya no lo necesita, pero en cambio s que hemos puesto el atributo float: left, para que se flote en la parte de la izquierda. En definitiva, es una maquetacin a dos columnas, en las que una de las columnas tiene a su vez otra maquetacin en dos columnas. Se puede ver el ejemplo en marcha en una pgina aparte. El cdigo fuente del ejemplo entero no lo vamos a escribir. Pero se puede analizar tanto el HTML como el CSS a travs de la opcin "ver cdigo fuente" del navegador. Se puede ver cmo quedara esta maquetacin a tres columnas si nuestro navegador no fuera compatible con CSS.

Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

26

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Artculo por Miguel Angel Alvarez

Maquetar una pgina con un mapa de Google, usando CSS


La maquetacin con mapas de Google, que creamos con el API de Google Maps, es muy sencilla, ya que el mapa ocupa el espacio disponible en la capa donde est contenido. As pues, al incorporar un mapa a una pgina web, no tenemos que especificar el tamao del mapa por Javascript ni nada parecido, simplemente el mapa de Google tomar el los atributos de ancho y alto de la capa (el <div> ) donde est contenido. Esto es dinmico, es decir, si cambia el espacio disponible de la capa donde est el mapa -ya sea porque el usuario ha cambiado el tamao de la ventana o porque se han alterando los atributos width y height de la capa con Javascript o por cualquier modo- cambiar automticamente el tamao del mapa para ajustarse dinmicamente al espacio disponible. Dicho esto, puede resultar poco revelador este artculo, porque no vamos a ver nada de Javascript ni de creacin de mapas de Google, sino que vamos a mostrar como maquetar con CSS, teniendo en cuenta que en una de las capas hay un mapa de Google. No obstante, seguro que algunas de las informaciones proporcionadas aqu no van a ser triviales para los lectores. En DesarrolloWeb.com ofrecemos un manual en el que puedes aprender a trabajar con el API de Google Maps. Tambin recomiendo la lectura del material que ofrecemos en DesarrolloWeb.com sobre la maquetacin CSS, pues voy a dar por sabidos los aspectos sobre maquetacin con hojas de estilos y por tanto, no los voy a explicar. Los atributos de altura y anchura de un mapa son la capa que lo contiene El ejemplo ms sencillo que podemos encontrarnos para maquetar un mapa de google es que tenga dimensiones en ancho y alto fijas. Es como hemos colocado los mapas en el manual hasta este momento:
<div id="map" style="width: 765px; height: 388px"></div>

En este ejemplo el mapa ocupa 765 pxel de ancho y 388 de alto. Esto no tiene ningn secreto. Pero qu pasa si queremos que un mapa de Google Maps tenga el ancho de toda la ventana del navegador? Porque sabemos que el navegador puede tener distintos tamaos, dependiendo de la definicin de pantalla del visitante y si la ventana est maximizada o dimensionada de cualquier otra forma. Entonces es muy sencillo, podemos colocar width:100% en la declaracin de estilos css de la capa donde est el mapa.
<div id="map" style="width: 100%; height: 388px"></div>

Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

27

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Este mapa ocupara todo el rea disponible de la ventana del navegador, o bien de la capa donde estuviera contenido. El ejemplo se complica si queremos que el mapa de Google ocupe adems todo el alto disponible en el navegador, que tambin, sabemos, puede ser variable dependiendo de las caractersticas de pantalla o del estado de la ventana del browser. Lo normal es que probsemos algo como esto:
<div id="map" style="height: 100%; width:100%;"></div>

Pero esto tal cual, sin hacer ninguna otra cosa, tiene un problema y es que misteriosamente el mapa aparece vaco o con height = 0. Esto es porque los navegadores tienen problemas al maquetar con height=100%. La idea para solucionarlo es colocar a todas las capas que contengan al mapa height:100%, as como a las etiquetas <BODY> y <HTML> que tambin deberan tener el height de 100%. Entonces nos debera funcionar y el mapa ocupara todo el alto y ancho de la ventana.
Referencia: Podemos ver una FAQ con explicaciones sobre utilizacin del height:100% en CSS.

Ahora veamos el ejemplo de un mapa de Google Maps que ocupa todo el ancho y alto del espacio en una pgina aparte. Maquetar un mapa de Google con width y height 100%, pero mezclado con otros elementos Para acabar veamos un ejemplo de maquetacin de un Google Maps que ocupa el 100% del espacio, pero que tiene una cabecera y una barra lateral. La cabecera y el lateral ocupan unos espacios fijos y el mapa de google ocupar todo el sitio que dejan libre otros elementos de la maquetacin. Para explicarlo lo ms sencillo es ver directamente el ejemplo en una pgina aparte. El ejercicio es simple, pero necesitaremos conocimientos de CSS sobre maquetacin y posicionamiento. El cdigo es el siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1"> <title>Mapa de Google</title> <script src="http://maps.google.com/maps?file=api&v=2&key=coloca-tu-llave" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(33,0),3); map.addControl(new GLargeMapControl()); map.setMapType(G_NORMAL_MAP); } } window.onload=load //]]> </script>

Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

28

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

<style type="text/css"> html,body{ margin:0px; height:100%; } </style> </head> <body> <div id="contenedor" style="width:100%; height:100%;"> <div id="cabecera" style="background-color: #ffcc99; font-weight:bold; font-size: 110%; height: 23px; padding: 3px; margin-bottom:10px;">Esto es la cabecera!!</div> <div id="lateral" style="float:right; width:200px; height:100%; background-color:#eeff99;"> <div id="contenidolateral" style="padding: 30px 10px 0 10px;"> Por <a href="http://www.guiarte.com">guiarte.com</a> <br /> <br /> Esto son contenidos que colocamos en el lateral izquierdo. Resulta muy fcil maquetar con un mapa de Google en una capa que toma el tamao del contendor donde se encuentra. </div> </div> <div id="map" style="height: 100%; margin-right:210px;"></div> </div> </body> </html>

Artculo por Miguel Angel Alvarez

Presentacin de 960 Grid System


Vamos a realizar una serie de artculos sobre la maquetacin de pginas web con 960 Grid System, que nos permitir implementar nuestros diseos de webs ms fcilmente. 960 Grid System es un framework CSS, que no es ms que una declaracin de estilos que dispone las clases necesarias para implementar columnas en una pgina web, de diversos tamaos, con las que maquetar nuestros contenidos fcil y ordenadamente. Nosotros mismos podramos hacer un sistema propio para maquetar una pgina con diversas columnas, como hemos visto en diversos artculos del Taller de CSS, pero utilizando un framework como 960 Grid ya tendremos la mayor parte del trabajo realizado, pues simplemente tendremos que colocar a cada contenedor de elementos las clases disponibles en el sistema, para que tenga la anchura y posicin deseadas. Utilizar un framework CSS no aporta nada de creatividad para realizar un diseo bonito, pero nos permite anclar contenidos en la pgina de una manera sencilla. Nosotros, por tanto, seremos los que nos encargaremos de disear una pgina web que tenga un aspecto agradable, pero podremos partir de una estructura en columnas, donde ceir los espacios para que quede todo bien colocado. Con la prctica notaris que, saber de antemano los espacios disponibles para las columnas del diseo de nuestra web, resulta bastante til a la hora de disear con algn programa como Photoshop, tal como podris ver en el siguiente vdeo del diseo de una web con Photoshop. 960 Grid System lleva este nombre porque es un sistema de rejilla para hacer pginas con 960 pxeles de ancho. Las columnas que podremos colocar en la rejilla tendrn distintas anchuras, pero siempre el ancho total de la pgina ser de 960 pxeles. Se ha elegido este valor porque 960 es divisible por una buena cantidad de nmeros, lo que lo hace ms verstil para poder alcanzar pginas resultantes de la ms variada gama.
Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 29

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

En la propia pgina de inicio de 960 Grid System se puede acceder a la descarga del Framework y a algunas explicaciones sobre su uso, as como a ejemplos de pginas que lo utilizan para la maquetacin CSS y a un demo interesante para poder ver el tipo de columnas que se pueden conseguir, sus anchuras, etc. http://960.gs

Variantes de 960 Grid


El propio framework dispone de dos variantes distintas, para hacer pginas utilizando 12 16 columnas. No es que necesitemos utilizar todas las columnas disponibles para realizar la maquetacin, sino que la rejilla tendr esas divisiones verticales donde podemos situar los elementos. La variante de 12 columnas da menos posibilidades para repartir los espacios, pero en muchos de los casos ser ms que suficiente para crear cualquier estructura de pgina. En cuanto a la variante de 16 columnas, da una gama mayor de posibles anchos para las columnas, que puede ser necesaria en diseos con un nivel de detalle ms alto. En ambas variantes las columnas que se consiguen tienen un margen a cada lado de 10 pxeles, por lo que si colocamos dos columnas, una al lado de otra, entre los mrgenes de las dos a la vez, obtendremos una separacin de 20 pxeles entre ellas.

Anchuras posibles con la variante de 12 columnas


Con la primera de las variantes de 960 Grid podemos hacer divisiones en hasta 12 columnas distintas. Teniendo en cuenta los mrgenes a la izquierda y la derecha de las columnas, las anchuras de las que disponemos sern las siguientes: 1: 60px 2: 140px 3: 220px 4: 300px 5: 380px 6: 460px 7: 540px 8: 620px 9: 700px 10: 780px 11: 860px 12: 940px Cualquier columna tendr que tener uno de estos tamaos disponibles. En una seccin podemos poner varias columnas de diversos tamaos, siempre teniendo en cuenta que la anchura mxima disponible ser de 96 pxeles, menos los mrgenes. Por ejemplo, para un diseo a 3 columnas, una combinacin de anchuras podra ser de 140px, 460px y 300px.

Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

30

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Anchuras posibles con la variante de 16 columnas


Utilizando la variante de 16 columnas tenemos 16 posibles anchuras de elementos de la pgina, lo que puede aumentar las posibilidades de eleccin. Las distintas anchuras sobre las que podramos trabajar son las siguientes: 1: 40px 2: 100px 3: 160px 4: 220px 5: 280px 6: 340px 7: 400px 8: 460px 9: 520px 10: 580px 11: 640px 12: 700px 13: 760px 14: 820px 15: 880px 16: 940px As pues, con este sistema podramos maquetar hasta 16 columnas de 40 pxeles cada una, o cualquier combinacin que deseemos, siempre que la anchura ms los mrgenes de los elementos sea de 960 pxeles. En los archivos para descarga del framework encontraremos un demo que nos puede dar una idea exacta de los tamaos de las cajas y las posibilidades de maquetacin. Tambin podemos ver el demo en la URL: http://960.gs/demo.html En definitiva, con 960 Grid tenemos bastante versatilidad para hacer nuestras maquetaciones. Todava tenemos que explicar cmo utilizar el framework, lo que dejaremos para siguientes artculos, pero al menos podemos hacernos una idea de las posibilidades. Artculo por Miguel Angel Alvarez

Manual de Maquetacin CSS: http://www.desarrolloweb.com/manuales/maquetacion-css.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

31

You might also like