You are on page 1of 44

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

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.

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 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 .

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 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.

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.
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 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.

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;
}

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.

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)
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.

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>

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.
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;
}

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 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.

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
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.
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.

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.
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


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.

BODY {
font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #666666;
margin : 0px 0px 0px 0px;
padding : 0px 0px 0px 0px;
text-align: center;
background-color: #E8F4CD;
background-image: url(images/fondo.gif);
background-position: top left;
background-repeat: repeat-x;

}
A, A:ACTIVE, A:FOCUS, A:LINK, A:VISITED {
color : #3F7DE3;
}
A:HOVER {

color: #378237;
}
INPUT {
font-size : 8pt;
}
H1{
font-size: 12pt;
}
H2{
font-size: 10pt;
}
#borde{
border-left : 2px solid #144700;
border-right : 2px solid #144700;
width: 549px;
text-align: left;
margin: auto;
}
#contenedor{
text-align: left;
width: 549px;
margin: auto;
background-color : #ffffff;
}
#cabecera{
background: transparent url(images/cabecera.jpg) no-repeat;
height : 288px;
width: 549px;
}
/* using an image to replace text in an h1. This trick courtesy Douglas Bowman,
http://www.stopdesign.com/articles/css/replace-text/ */
#cabecera h1 {
margin : 0px 0px 0px 0px;
}
#cabecera h1 span {
display:none;
}
#navegador{
background: transparent url(images/barranav.jpg) no-repeat;
height : 29px;
width: 549px;
background-color: #144700;
}
#navegador p{
padding: 8px 3px 1px 10px;
margin : 0px 0px 0px 0px;
}
#cuerpo{
width: 335px;
padding: 13px 3px 15px 10px;
float:right;
background: transparent url(images/decora_trans.jpg) no-repeat bottom right;

}
#fbuscar{
}
#campotexto{
float: left;
}
#campotexto input{
width:100px;
}
#fbuscar form{
margin-bottom : 0px;
margin-top : 0px;
}
#botonbuscar {
padding-top : 3px;
padding-left: 106px;
}
#botonbuscar input{
border : 0px none;
}
.radio{
clear : both;
}
#lateral{
width: 200px;
float:left;
height: 500px;
margin-top: 3px;
}
#registro{
}
#otras{
}
.cuerpolateral{
background-color: #F0E68C;
padding: 5px 4px 13px 10px;
margin-bottom: 15px;
}
.titlat{

color:#ffffff;
font-size:8pt;
ext-transform : uppercase;
padding: 7px 3px 7px 8px;
margin: 20px 0px 0px 0px;
font-weight : normal;
letter-spacing : 2px;
background: #20550B url(images/titlat3.jpg) no-repeat bottom right;

A.enlacenav, A.enlacenav:VISITED, A.enlacenav:ACTIVE, A.enlacenav:FOCUS,


A.enlacenav:LINK{
color: #FFFFFF;
}
A.enlacenav:HOVER{
color: #FFFFAA;
}
#pie{

clear : both;
color : #cccccc;
text-align : center;
margin : 30px 10px 0px 10px;
padding-bottom:10px;

Mostramos cmo hacer una pgina web maquetada


utilizando nicamente CSS, sin tablas, con una distribucin
de 2 columnas, una cabecera y un pie de pgina. Con diseo
de anchura fija o fluido.

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

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".
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.
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.
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;
}

Veamos cmo hacer una pgina, maquetada nicamente


con Hojas de Estilo en Cascada, compuesta por tres
columnas. Con diseo de anchura fija y fluido.

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 artculoMaquetacin 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>
<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{
color: #3333cc;
text-decoration: none;
}
#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;
}
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.

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

Mostramos una mejora al cdigo mostrado anteriormente


para maquetar una pgina con CSS a tres 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.
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.

Es muy fcil maquetar una pgina que tenga un mapa de


Google, simplemente debemos utilizar maquetacin y
posicionamiento 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>

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:schemasmicrosoft-com:vml">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-88591">
<title>Mapa de Google</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=coloca-tullave"
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>
<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; fontsize: 110%; height: 23px; padding: 3px; margin-bottom:10px;">Esto es la
cabecera!!</div>
<div id="lateral" style="float:right; width:200px; height:100%; backgroundcolor:#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>

Introduccin a la maquetacin de pginas web usando CSS


con el sistema 960 Grid.

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.
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.

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:
2:
3:
4:
5:
6:
7:
8:
9:

40px
100px
160px
220px
280px
340px
400px
460px
520px

10:
11:
12:
13:
14:
15:
16:

580px
640px
700px
760px
820px
880px
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.
Nota: Si te ha interesado este tema y quieres investigar sobre otras posibilidades para la maquetacin CSS,
puedes encontrar tambin en DesarrolloWeb.com un Manual del Framework CSS Blueprint.

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.

Presentacin de Blueprint, un framework CSS que sirve de


apoyo en el diseo y maquetacin de webs 2.0, gracias a su
rejilla y otros estilos de tipografa e impresin.

Blueprint es un complemento para desarrolladores de webs que aumentar la productividad en


las tareas de diseo y maquetacin de pginas. Se trata de una serie de libreras de Hojas de
Estilo en Cascada que contienen cdigo til para maquetar una pgina web y aplicar otros tipos
de estilos tipogrficos o de impresin, algo que comnmente conocemos como Framework CSS.
Este sistema nos ofrece una serie de archivos con cdigo CSS que podremos incluir en las
pginas web para aplicar estilos de una manera rpida, y solucionar tambin muchos de los
problemas de compatibilidad entre navegadores que pueden surgir durante la etapa de
maquetacin.
Existen diversos Framework CSS disponibles de manera gratuita en Internet, creados por varios
desarrolladores distintos. Blueprint es quizs el ms conocido, o por lo menos uno de los ms
populares y prueba de ello es que se han creado incluso algunas variantes o productos derivados
para ajustar Blueprint a las distintas necesidades de los desarrolladores.
Nota: Otro de los Frameworks CSS que tenemos bien documentado en DesarrolloWeb.com es 960 Grid
System, del que podemos encontrar un manual amplio y un ejemplo completo de maquetacin CSS en
vdeo.

Qu es un Framework CSS
Quizs convendra definir qu se conoce como framework CSS. Pues simplemente se trata de
una serie de declaraciones de estilos definidos de forma estndar para que sirvan como base
para el diseo de todo tipo de webs. Por decirlo de otra manera, es un poco de cdigo CSS que
se podra considerar til para desarrollar cualquier tipo de web y que se pone a disposicin para
solucionar diversos problemas o situaciones, comunes en el desarrollo de webs.
Cada framework CSS, aunque quizs deberamos llamarles simplemente "Libreras CSS", tiene
su propia filosofa a la hora de crear el cdigo para solucionar esos problemas. Algunas veces las
formas de actuar son similares y otras veces distintas, por ello el uso o no de los frameworks
CSS, as como la eleccin del mismo es una decisin muy particular de cada programador o
desarrollador web.
Existe adems una discusin sobre si es o no conveniente el uso de Frameworks CSS, pero es un
asunto donde no vamos a entrar en este artculo. Simplemente queremos contaros cmo
funciona Blueprint y cada persona podr elegir o no usarlo.

Caractersticas de Blueprint

El framework CSS Blueprint est creado sobre una slida base de cdigo CSS que ayudar a
desarrollar el diseo y maquetacin de sitios web. Entre las cosas que nos aporta podemos
destacar:

Una rejilla, que nos permitir crear cualquier estructura de pgina web. Bsicamente se
trata de un conjunto de clases CSS para posicionar cualquier elemento en un espacio de
950 pxeles de anchura, dividido en 24 columnas.

Una definicin de tipografa predeterminada, de manera precisa para todos los


elementos de la pgina que pueden tener texto.

Estilos para formularios, con los que mejorar las interfaces de usuario.

Estilos para impresin, con las definiciones CSS ms tiles para que las pginas se
lean bien cuando se imprimen en papel.

Estilos especficos para IE, con los que resolver algunos de los problemas ms
comunes de Internet Explorer.

Con todo esto conseguimos una base con la que comenzar fcilmente a hacer pginas web
complejas y que sern ms compatibles en distintos navegadores. Adems, Blueprint se
completa con algunos plugins creados por terceras personas que sirven para hacer cosas ms
avanzadas o diferentes. Por ejemplo hay plugins para conseguir iconos, para hacer pginas
fluidas (que se adaptan a la anchura de la ventana del navegador), etc.
Para comenzar a usar Blueprint tenemos que acceder a su pgina web y descargarlo, a travs de
su pgina web:
http://www.blueprintcss.org/
En los siguientes artculos del Manual de Blueprint te explicaremos todo lo que tienes que
conocer para comenzar con buen pie y que te sea muy sencillo adaptarte al framework CSS.

Recomiendo un sitio simptico y didctico sobre el tema:


http://www.hotdesign.com/seybold/spanish/

http://www.desarrolloweb.com/manuales/maquetacion-css.html