Maquetacion Css PDF

Manual de Maquetacin CSS
http://desarrolloweb.com/manuales/maquetacion-css.html Pgina 1 de 47
Introduccin: Manual de Maquetacin

CSS
Manual en el que ensearemos a maquetar pginas web utilizando nicamente CSS, en lugar
de tablas, lo que tambin se conoce como Maquetacin Tableless.
Encuentras este manual online en:

http://desarrolloweb.com/manuales/maquetacion-css.html
Autores del manual
Las siguientes personas han participado como autores escribiendo artculos de este manual.
Miguel Angel Alvarez
Miguel es fundador de DesarrolloWeb.com y la plataforma de

formacin online EscuelaIT. Comenz en el mundo del desarrollo web
en el ao 1997, transformando su hobby en su trabajo.
Serviweb
Diseo web Murcia
Introduccin a la maquetacin con CSS
La maquetacin con CSS es fundamental a la hora de obtener unos resultados de

calidad en el diseo de tu pgina web y te simplificar la vida, no slo al crear la
web, sino tambin a la hora de mantenerla.
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.
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.
Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 17/07/2009
Disponible online en http://desarrolloweb.com/articulos/intro-maquetacion-css.html
Por qu disear con CSS
Mostramos algunas ventajas al maquetar con CSS respecto a otras formas de

hacerlo.
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.
Recomiendo un sitio simptico y didctico sobre el tema:

http://www.hotdesign.com/seybold/spanish/
Este artculo es obra de Serviweb

Disponible online en http://desarrolloweb.com/articulos/por-que-diseniar-css.html
Maquetar una pgina con CSS
Tutorial para maquetar una pgina web utilizando CSS en lugar de tablas.
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.
Nota: 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
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.
Este ejercicio lo vamos a ver en varios pasos. En el siguiente bloque mostraremos cmo se
maqueta la cabecera y la barra de navegacin.

Disponible online en http://desarrolloweb.com/articulos/120.php
Maquetar una pgina con CSS II
Explicamos la creacin de la cabecera de la pgina, que se simplificar al mximo

para hacer el ejercicio ms facil.
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
Realizamos la maquetacin del rea del cuerpo, donde se mostrar el contenido

de la pgina.
Este ejercicio trata de maquetar una pgina utilizando capas y css. La primera parte se puede
ver en: Maquetar una pgina con CSS. <7p>
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;
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
Creamos el lateral de la pgina, donde se muestran varios recuadros con un

buscador y acceso a otras informaciones.
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;
font-weight : normal;
letter-spacing : 2px;
margin: 0px 0px 8px 0px;
.cuerpolateral{
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{
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
Para acabar, vamos a crear un pie de pgina y un borde enmarque la pgina.

Ofreceremos tambin unas conclusiones del ejercicio.
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;
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;
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">
.... 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.
Resultado final del ejercicio.
Nota: 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.**

Variar el diseo y maquetacin con la

hoja de estilos
Continuamos el taller de maquetacin con CSS. Creamos un diseo distinto, que

aplicamos al ejemplo realizado anteriormente, cambiando solamente 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.
Pgina con el resultado final del ejercicio.
Declaracin de hojas de estilo utilizada.

Maquetacin CSS a dos columnas
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="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{
#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;
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;
float:right;
#principal{
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 {
margin: 10 10 10 10px;
text-align: center;
#contenedor{
text-align: left;
margin: auto;

Maquetacin CSS a tres columnas
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 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="cabecera">
Cabecera 01
</div>
<div id="cuerpo">
<div id="lateral">
<ul>
</ul>
</div>
<div id="otrolado">
<img src="bannerlateral.gif" width="120" height="600" alt="">
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla condimentum commodo orci. Nulla eget purus nec massa
...
</div>
</div>
<div id="pie">
</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 {
text-align: center;
#contenedor{
text-align: left;
width: 770px;
margin: auto;
#cabecera{
background-color: #d0d0ff;
color: #333300;
font-size:12pt;
font-weight: bold;
#cuerpo{
#lateral{
width: 160px;
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;
padding: 4 4 4 4px;
width: 460px;
#pie{
background-color: #cccccc;
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;
padding: 4 4 4 4px;
margin-right: 130px;

Variacin de la maquetacin con CSS a 3

columnas
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="cabecera">
Cabecera 01
</div>
<div id="cuerpo">
<div id="lateral">
<ul>
</ul>
</div>
<div id="derecha">
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">
</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{
#principal{
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.

Maquetar una pgina con un mapa de

Google, usando CSS
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.
Nota: 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:
<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>

Disponible online en http://desarrolloweb.com/articulos/maquetar-pagina-mapa-
google-utilizando-css.html
Presentacin de 960 Grid System
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: 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.
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.

Disponible online en http://desarrolloweb.com/articulos/presentacion-960-grid-
system.html
Blueprint, Framework CSS
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.

Disponible online en http://desarrolloweb.com/articulos/blueprint-frameworks-css.html

Maquetacion Css PDF

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Maquetacion Css PDF

Caricato da

Copyright:

Formati disponibili

Manual de Maquetacin CSS

Introduccin: Manual de Maquetacin

Encuentras este manual online en:

Autores del manual

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de

Diseo web Murcia

Introduccin a la maquetacin con CSS

La maquetacin con CSS es fundamental a la hora de obtener unos resultados de

En DesarrolloWeb.com tenemos diversos artculos ya publicados sobre la maquetacin web y

Qu haba antes de la maquetacin CSS

Por qu maquetar con CSS

Por otra parte, la profesionalizacin de los diseadores de webs y la competencia, hace

Entiendo que muchas personas no encuentren de entrada ventajas en separar el contenido de

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

Este artculo es obra de Miguel Angel Alvarez

Por qu disear con CSS

Mostramos algunas ventajas al maquetar con CSS respecto a otras formas de

La solucin es clara: CSS+HTML/XHTML. Afortunadamente, cada vez son ms las empresas

Algunas de las ventajas de la maquetacin con CSS:

Separacin de forma y contenido. Generalmente CSS y HTML se encuentran en

Recomiendo un sitio simptico y didctico sobre el tema:

Este artculo es obra de Serviweb

Maquetar una pgina con CSS

Nota: Tenemos un manual para aprender CSS en DesarrolloWeb.com, donde adems se

Desarrollo de la pgina y la hoja de estilos

<title>La web del invierno</title>

<link rel="STYLESHEET" type="text/css" href="estilo.css">

background : #C0D9D9 url(images/fondo.gif) repeat;

font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;

margin : 20px 0px 20px 0px;

se vea correctamente en todos los navegadores.

Este artculo es obra de Miguel Angel Alvarez

Maquetar una pgina con CSS II

Explicamos la creacin de la cabecera de la pgina, que se simplificar al mximo

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

background : #F5F4C3 url(images/fondonav.gif);

padding : 3px 10px 5px 10px;

border-top : 1px solid #cccccc;

border-bottom : 1px solid #cccccc;

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

Podemos ver cmo queda el ejercicio realizado hasta el momento.

Este artculo es obra de Miguel Angel Alvarez

Maquetar una pgina con CSS III

Realizamos la maquetacin del rea del cuerpo, donde se mostrar el contenido

ampliaremos la informacin y ofreceremos tutoriales ms prcticos.

<a href="#">Mapa del sitio</a>

padding: 12px 0px 10px 0px;

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

Este artculo es obra de Miguel Angel Alvarez

Maquetar una pgina con CSS IV

Creamos el lateral de la pgina, donde se muestran varios recuadros con un

... contenido lateral...

border-bottom : 1px solid #cccccc;

border-left : 1px solid #cccccc;

<h2 class="titlat">Titulo de la caja</h2>

<div id="idunico" class="cuerpolateral">