Maquetación Web

UNIDAD 7 - Maquetacin web
Maquetar una pgina web

La maquetacin es la distribucin de los elementos en nuestra pgina.
Piensa en una pgina web cualquiera. Seguro que distingues algunos
elementos, como encabezados, columnas, mens laterales, etc.
Hace unos aos, la maquetacin de las pginas web se realizaba utilizando
tablas (<table>). Una vez entendido este proceso poda resultar sencillo,
aunque si no se dominaban las tablas, poda convertirse en algo tedioso. El
problema de las tablas es que generaban una pgina muy encorsetada, y el
cdigo se volva complejo de entender. Adems, algunos buscadores
encontraban problemas al analizar la estructura de la pgina.
Actualmente, la maquetacin con tablas ha cado en desuso, y se realiza
utilizando capas (<div>), tambin llamadas divisiones o contenedores. La
colocacin de las capas en la pgina se realiza a travs de CSS. Esto
permite, por ejemplo, que podamos pasar de un diseo con un men lateral a
otro con el men en la parte superior, slo cambiando la hoja de estilos.
En esta unidad veremos las tcnicas de maquetacin ms comunes, aunque
hay que decir que existen diversas formas de conseguir una misma
maquetacin.
Las capas pueden estar anidadas unas dentro de otra. Bsicamente, lo que
haremos ser definir cmo se posiciona en la pgina, su colocacin y su
tamao.
Nota: Lo aqu explicado funciona para webs con el DTD XHTML Transitional
o Strict. Al declarar otro DTD, o no hacerlo, puede que el resultado no sea
el esperado.
Tamao
Por lo general, la maquetacin se realiza sobre elementos en bloque.
Normalmente divisiones, pero tambin lo podemos hacer con prrafos,
listas, o con el propio body. Por defecto los elementos de bloque ocupan
todo el ancho del elemento que lo contiene, y su alto se ajusta al contenido.
1
Cualquier elemento HTML de bloque, tiene dos atributos que pueden

definir su tamao: ancho (width) y alto (height).
Los valores para estas medidas, pueden ser expresados en las medidas
habituales:
Tamaos absolutos, utilizando px, cm, etc...
Tamaos relativos al elemento que lo contiene, utilizando
porcentajes (%).
Tamaos relativos a la fuente, utilizando em.
El valor auto es el valor por defecto. Por ejemplo, un prrafo, por
defecto, tienen un ancho del 100% y un alto ajustado al contenido.
Por ejemplo, hemos definido el tamao para el siguiente prrafo:
Por defecto, al no ocupar todo el ancho, el elemento queda alineado a la

izquierda, como en el ejemplo anterior. Una forma sencilla de centrarlo es
dndole al margen (margin) derecho e izquierdo el valor auto.
Con slo esto, podramos maquetar una pgina web que contenga una
columna central, con un ancho fijo o relativo. En el siguiente ejemplo, hemos
2
contenido todo el texto en una capa, a la que le hemos asignado el

id="contenido", y en la hoja de estilo le hemos asignado un ancho fijo y la
hemos centrado.
<!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">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<title>Una columna</title>
<style type="text/css">
body {
background-color:#C2C5E7;
margin: 0;
}
div#contenido {
width: 800px;
margin: auto;
border-left: #6699FF 2px solid;
border-right: #6699FF 2px solid;
background-color: #EDEEF8;
padding: 5px;
}
</style>
</head>
<body>
<div id="contenido">
<h1>Página con una columna</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Sed facilisis nulla et risus. In eleifend sapien a
neque. Etiam fermentum. Sed dapibus suscipit diam.
Praesent non nisi ac leo congue vestibulum. Mauris ac orci
eu nisl dictum ultrices. Morbi blandit dolor vitae sapien.
Vivamus in neque. Integer sit amet mi. Curabitur ipsum
lectus, ultricies sit amet, bibendum a, sodales vitae,
massa. Quisque metus. Sed blandit hendrerit urna. Aenean
eu nulla. Praesent vulputate dui id lacus. Nunc vel odio.
3
Nulla eleifend rutrum nulla. </p>

<p>Praesent ut ipsum. Nullam vitae nunc. Nam sit amet
libero id mauris consectetur pulvinar. Suspendisse
vulputate lorem quis lectus. Quisque commodo purus et
nibh. Nunc quis mi quis risus hendrerit ultricies. Cum
sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Aliquam ac dui. Mauris vulputate
fermentum tellus. Morbi rhoncus lorem id nibh. </p>
<p>Etiam cursus nulla ac purus. Pellentesque massa elit,
dignissim et, volutpat eu, sagittis tristique, sem.
Quisque nec leo. Etiam fringilla pellentesque turpis.
Vestibulum at est. Sed sapien nunc, faucibus ac, suscipit
sit amet, lacinia porttitor, mauris. Curabitur congue
justo sed nunc. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas.
Integer tristique diam vitae ligula. Nulla tincidunt,
metus sit amet congue porttitor, purus pede commodo odio,
vel varius mauris nulla id augue. Mauris pellentesque
volutpat lacus. Maecenas erat. </p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Vestibulum volutpat,
lacus non mattis vulputate, lorem nunc varius odio, in
venenatis ante augue quis nisl. Praesent ut mi interdum
lorem consequat vulputate. Vivamus ac urna non elit
pellentesque sollicitudin. Nunc pharetra nibh in quam.
Proin eu magna ut ligula volutpat mollis. Quisque mollis,
nulla a porttitor commodo, orci diam commodo pede, ac
congue neque libero quis justo. Donec sit amet ligula. In
vehicula, elit ut pellentesque viverra, arcu nisl
tincidunt ipsum, in viverra dui orci vel massa. Nunc
tincidunt congue risus. Donec nec sem id elit egestas
porttitor. Fusce ultrices nulla. </p>
</div>
</body>
</html>
Desbordamiento
Al utilizar un elemento de bloque, como una capa, un prrafo, el body,
etc... el tamao depende del contenido. Pero al definir un tamao fijo nos
puede surgir un problema: qu pasa si el contenido del elemento (texto,
imgenes, etc...) no cabe? Entonces se produce un desbordamiento, que
podemos controlar desde el estilo con la propiedad overflow. Podemos
darle estos valores:
- visible. Es la opcin por omisin. El contenido sale de elemento,
y puede que se solape con los elementos que haya a continuacin.
- hidden. Lo que no quepa en el elemento, queda oculto.
- auto. Muestra las barras de desplazamiento en el elemento
cuando sea necesario.
- scroll. Siempre muestra las barras de desplazamiento.
Por lo que, si el desbordamiento es visible, puede tapar a los elementos

que haya despus.
Posicionamiento
El posicionamiento es el lugar donde el navegador coloca un elemento
HTML para visualizarlo.
Por defecto, los elementos se posicionan uno a continuacin de otro. Si se
trata de elementos de bloque, como capas, prrafos, listas, etc, se irn
colocando uno debajo del otro. A este posicionamiento se le denomina
esttico.
Utilizando CSS, con la propiedad position podemos cambiar el tipo de
posicionamiento de los elementos. Existen cuatro tipos de posicionamiento:
- static. Es el normal.
- relative. El posicionamiento relativo coloca el elemento en su
posicin normal. A partir de ah, podemos desplazar el elemento,
permaneciendo el hueco de su posicin original.
- absolute. Con el posicionamiento absoluto, especificamos la
posicin del elemento con respecto al elemento que lo contiene.
- fixed. Se establece la posicin del elemento de forma parecida al
absoluto, pero el elemento queda fijo en la pantalla, aunque utilicemos
barras de desplazamiento.
Al cambiar el desplazamiento de un elemento, es fcil que se solape sobre
otro. Esto produce que un elemento quede oculto. Para controlar esto,
disponemos de la propiedad CSS z-index, a la que podemos asignar un valor
numrico. Un elemento con un z-index mayor se ver por encima de otro
con un z-index menor.
Las cajas del siguiente ejemplo aparecen solapadas. Al pasar el cursor
sobre ellas, se le asigna z-index: 10;, lo que hace que se vean por encima
del resto.
Nota: para que z-index funcione, se debe de haber especificado un tipo de

posicionamiento para el elemento.
Posicionamiento relativo
El posicionamiento relativo coloca el elemento en su posicin normal, y a
partir de ah lo desplaza la distancia que le indiquemos. Al desplazarlo deja
un "hueco" donde estara su posicin normal.
Para aplicarlo, lo primero es declararlo en el estilo, utilizando position:

relative;.
Para indicar el desplazamiento horizontal, utilizamos left para
desplazarlo a la izquierda y right para hacerlo a la derecha. Utilizar
valores negativos, produce el efecto opuesto. Por ejemplo, para desplazar un
elemento 40px a la derecha, podramos poner right: 40px; o left:
-40px;.
Del mismo modo, podemos desplazarlo verticalmente utilizando top para
desplazarlo hacia arriba o bottom para hacerlo hacia abajo.
Si no establecemos valores de desplazamiento el elemento no cambia su
posicin, por eso es muy comn asignar el posicionamiento relativo a
elementos para poder utilizar una propiedad que requiere posicionamiento,
como puede ser z-index.
Posicionamiento absoluto
Al utilizar el posicionamiento absoluto indicamos de forma precisa la
posicin del elemento en la pgina.
Al contrario que con el posicionamiento relativo, el elemento al que le
hemos asignado un posicionamiento absoluto no deja un hueco en la pgina.
Podemos decir que el resto de elementos lo ignoran, y se colocan como si no
existiese.
Para aplicarlo, lo primero es declararlo en el estilo, utilizando position:
absolute;.
La posicin y tamao del elemento se indica siempre en relacin a otro
elemento que lo contiene. El elemento contenedor ser el ms cercano que
haya con posicionamiento no esttico. Si no hay ninguno, se utilizar el
body.
Para definir la posicin utilizamos top para referirnos a la distancia
entre el borde superior del elemento posicionado y el borde superior del
elemento contenedor. Por lo tanto left ser la distancia entre los lados
izquierdos, right entre los lados derechos y bottom entre los lados
inferiores.
Para posicionar un elemento del que conocemos sus dimensiones, basta
con indicar un punto en vertical (top o bottom) y un punto en horizontal
(right o left). En el siguiente elemento, todas las cajas tienen position:
absolute; witdth: 60px; height: 60px y un borde. Para cada una
hemos cambiado la posicin. Adems, a la caja que contiene a todas, le
hemos dado position: relative; para que las cajas de dentro tomen su
posicin a partir de ella.
Utilizando este posicionamiento, obtenemos gran flexibilidad para

maquetar nuestra pgina. Por ejemplo, podemos dividir la pgina en dos (o
ms) columnas. Utilizaremos dos capas, con un alto al 100%, y que la suma
de sus anchos sea el total de la pgina. Por ejemplo:
8
div#columna_izquierda {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 50%;
}
div#columna_derecha {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 50%;
}
Esto originara dos columnas, cada una con un ancho de la mitad del de la
pgina (o del elemento que las contenga).
Si queremos obtener dos columnas, una con un ancho fijo y la otra con lo
que sobre, lo haremos de otra forma. Por ejemplo, si la columna de la
izquierda la queremos con un ancho fijo, por ejemplo de 200px, lo que
haremos ser asignar a la columna de la derecha una distancia con el lado
izquierdo de esos 200px, y con el lado derecho de 0, en vez de indicar el
ancho.
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 200px;
}
position: absolute;
right: 0;
left: 200px;
top: 0;
height: 100%;
}
Hay que decir que esto no funciona correctamente en Internet Explorer
6, que no interpreta correctamente el ancho del elemento si definimos la
posicin de los dos lados, en vez de un lado y el ancho.
Podemos conseguir un efecto muy interesante controlando el desbordamiento de las
columnas. Podemos dejar una columna fija, por ejemplo con un men, y otra que muestre el
contenido, a la que damos la propiedad overflow: auto;. Esto har que nos podamos
desplazar por el contenido de la pgina manteniendo el men siempre visible. Como por
defecto, Internet Explorer siempre muestra la barra de desplazamiento en la etiqueta
html, queda mejor si lo quitamos html {overflow:hidden;}. Todo esto lo veremos
mejor con un ejemplo:
<head>
<title>Columna sin scroll a la izquierda</title>
html {
overflow: hidden;
}
position: absolute;
top:0; left: 0;
height: 100%;
width:20%;
background-color:#FFE9D7;
}
position: absolute;
top:0; right: 0;
height: 100%;
width: 80%;
10
overflow: auto;
background-color:#DDF2F9;
}
</style>
</head>
<body>
<div id="columna_izquierda">
<ul>
<li><a href="#ap1">Apartado 1</a></li>
</ul>
</div>
<div id="columna_derecha">
<h2> Columna fija a la derecha</h2>
<h3 id="ap1"> Apartado 1</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
facilisis nulla et risus.
In eleifend sapien a neque. Etiam fermentum. Sed
diam. Praesent non nisi ac leo
dapibus suscipit
congue vestibulum. Mauris ac orci eu nisl dictum ultrices. Morbi

blandit dolor vitae sapien. Vivamus
in neque. Integer sit amet mi. Curabitur ipsum lectus,
amet, bibendum a, sodales vitae,
ultricies sit
massa. Quisque metus. Sed blandit hendrerit urna. Aenean eu nulla.

Praesent vulputate dui id lacus.
Nunc vel odio. Nulla eleifend rutrum nulla. </p>
<p>Praesent ut ipsum. Nullam vitae nunc. Nam sit amet libero id
mauris consectetur pulvinar.
Suspendisse vulputate lorem quis lectus. Quisque
nibh. Nunc quis mi quis risus
commodo purus et
hendrerit ultricies. Cum sociis natoque penatibus et magnis dis

parturient montes, nascetur ridiculus
mus. Aliquam ac dui. Mauris vulputate fermentum tellus. Morbi
lorem id nibh. </p>
rhoncus
<h3 id="ap2">Apartado 2</h3>

<p>Etiam cursus nulla ac purus. Pellentesque massa elit, dignissim
volutpat eu, sagittis
et,
tristique, sem. Quisque nec leo. Etiam fringilla

Vestibulum at est. Sed sapien
pellentesque turpis.
nunc, faucibus ac, suscipit sit amet, lacinia porttitor, mauris.

Curabitur congue justo sed nunc.
Pellentesque habitant morbi tristique senectus et netus et
fames ac turpis egestas. Integer
11
malesuada
tristique diam vitae ligula. Nulla tincidunt, metus sit amet congue
porttitor, purus pede commodo
odio, vel varius mauris nulla id augue. Mauris pellentesque volutpat
lacus. Maecenas erat. </p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae;
Vestibulum volutpat, lacus non mattis vulputate,
odio, in venenatis ante augue quis
lorem nunc varius
nisl. Praesent ut mi interdum lorem consequat vulputate. Vivamus ac

urna non elit pellentesque
sollicitudin. Nunc pharetra nibh in quam. Proin eu magna
volutpat mollis. Quisque mollis,
ut ligula
nulla a porttitor commodo, orci diam commodo pede, ac congue neque

libero quis justo. Donec sit amet
ligula. In vehicula, elit ut pellentesque viverra, arcu nisl
tincidunt ipsum, in viverra dui orci vel
massa. Nunc tincidunt congue risus. Donec nec sem id elit egestas
porttitor. Fusce ultrices nulla.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
facilisis nulla et risus. In
eleifend sapien a neque. Etiam fermentum. Sed
Praesent non nisi ac leo congue
vestibulum.
dolor vitae
dapibus suscipit diam.
Mauris ac orci eu nisl dictum ultrices. Morbi blandit

sapien. Vivamus in
neque. Integer sit amet mi. Curabitur ipsum lectus,

amet, bibendum a, sodales vitae,
ultricies sit
massa. Quisque metus. Sed blandit hendrerit urna. Aenean eu nulla.

Praesent vulputate dui id lacus.
Nunc vel odio. Nulla eleifend rutrum nulla. </p>
<p>Praesent ut ipsum. Nullam vitae nunc. Nam sit amet libero id
mauris consectetur pulvinar.
Suspendisse vulputate lorem quis lectus. Quisque
nibh. Nunc quis mi quis risus
commodo purus et
hendrerit ultricies. Cum sociis natoque penatibus et magnis dis

parturient montes, nascetur ridiculus
mus. Aliquam ac dui. Mauris vulputate fermentum tellus. Morbi
lorem id nibh. </p>
rhoncus
<h3 id="ap3">Apartado 3</h3>

<p>Etiam cursus nulla ac purus. Pellentesque massa elit, dignissim
volutpat eu, sagittis
et,
tristique, sem. Quisque nec leo. Etiam fringilla

Vestibulum at est. Sed sapien
pellentesque turpis.
nunc, faucibus ac, suscipit sit amet, lacinia porttitor, mauris.

Curabitur congue justo sed nunc.
Pellentesque habitant morbi tristique senectus et netus et
fames ac turpis egestas. Integer
12
malesuada
tristique diam vitae ligula. Nulla tincidunt, metus sit amet congue
porttitor, purus pede commodo
odio, vel varius mauris nulla id augue. Mauris pellentesque volutpat
lacus. Maecenas erat. </p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae;
Vestibulum volutpat, lacus non mattis vulputate,
odio, in venenatis ante augue quis
lorem nunc varius
nisl. Praesent ut mi interdum lorem consequat vulputate. Vivamus ac

urna non elit pellentesque
sollicitudin. Nunc pharetra nibh in quam. Proin eu magna
volutpat mollis. Quisque mollis,
ut ligula
nulla a porttitor commodo, orci diam commodo pede, ac congue neque

libero quis justo. Donec sit amet
ligula. In vehicula, elit ut pellentesque viverra, arcu nisl
tincidunt ipsum, in viverra dui orci vel
massa. Nunc tincidunt congue risus. Donec nec sem id elit egestas
porttitor. Fusce ultrices nulla.
</p>
</div>
</body>
</html>
Recuerda que podemos anidar las capas. Por ejemplo, podramos subdividir una de las
capas en otras dos dentro de ella, utilizando el mismo sistema.
13
Otro elemento muy utilizado en la maquetacin, es el encabezado y el pie. Observa que

en los ejemplos que hemos visto, colocbamos las capas en la parte superior del todo (top:
0;). Si queremos utilizar un encabezado, en vez de comenzar arriba del todo, debemos de
dejar una separacin igual al alto del encabezado. Si el alto del encabezado lo indicamos en
porcentajes, el alto de las columnas deber de ser del 100% - el alto del encabezado. En
vez de eso, resulta ms claro si en vez del alto de las columnas, indicamos la parte superior
(top) y la inferior (bottom). En este caso, nos dar igual la medida que utilicemos. Como
mejor lo veremos ser con un ejemplo:
div#encabezado {
position: absolute;
top:0; left: 0;
height:10%;
width:100%;
background-color:RoyalBlue;
}
position: absolute;
top:10%; left: 0;
height: 90%;
width:20%;
background-color:SandyBrown;
}
position: absolute;
top:10%; right: 0;
bottom: 0;
width: 80%;
background-color:LightGreen;
}
14
Para practicar todo esto, te recomendamos hacer el ejercicio paso a paso

Maquetar con posicionamiento absoluto, y despus el ejercicio paso a paso Simular
pginas. Y para que veas que con un poco de imaginacin se pueden hacer muchas
cosas, te recomendamos el ejercicio paso a paso Texto en 3D.
En el primero de los ejercicios paso a paso anterior hemos visto una forma de crear una
columna centrada en la pgina. Ya vimos que esto se poda hacer tambin definiendo un
ancho y utilizando la propiedad margin: 0 auto;. No da igual utilizar uno u otro. Si lo
hacemos con posicionamiento absoluto, y hacemos la ventana ms pequea que la columna,
dejarn de verse el lado derecho y el izquierdo por igual. En cambio, de la otra forma,
dejara de verse el lado derecho de la columna. Por lo que es mejor este sistema si tenemos
un men de navegacin a la izquierda que queremos que se vea siempre.
Los principales inconvenientes del posicionamiento absoluto es que hemos de definir el
tamao del elemento, no se ajusta al contenido, y no se crean huecos en la pgina, por eso
no podemos utilizarlo para cualquier cosa.
Posicionamiento
flotante
El posicionamiento es un poco distinto al resto. Para empezar, no se define con la

propiedad position, si no con la propiedad float. Puede tomar estos valores:
- left: flotante a la izquierda (float: left;).

- right: flotante a la derecha (float: right;).
- none: sin flotante.
Lo que hace este posicionamiento es desplazar el elemento todo lo que pueda hacia la
15
direccin indicada, hasta encontrar el lmite del elemento contenedor, u otro elemento
tambin flotante. Adems hace que todos los elementos fluyan alrededor de l.
Es muy comn utilizarlo en imgenes, para que el texto fluya alrededor de ellas. En el
siguiente ejemplo, todas las cajas contienen un prrafo con una imagen al principio
(<p><img /> Texto</p>). Slo cambia el float de la imagen.
Observa que el texto puede quedar demasiado pegado a la imagen. Para solucionarlo, no
hay ms que aplicar un pequeo margin a la imagen, hacia el lado que est el texto.
Existen algunos inconvenientes al utilizar el posicionamiento flotante. Un elemento que
contiene a otro flotante, no lo tiene en cuenta para su tamao a lo alto. Por ejemplo, el
siguiente prrafo tiene un borde, y vemos que si la imagen es flotante, "se sale".
Adems, si por ejemplo hay varios prrafos con elementos flotantes al mismo lado, hace
que se "amontonen":
Para solucionar esto, disponemos de la propiedad clear, que rompe el flotamiento.

Puede tomar tres valores:
16
- left: impide el flotamiento a la izquierda.

- right: impide el flotamiento a la derecha.
- both: impide el flotamiento por ambos lados.
En el siguiente ejemplo, utilizamos el mismo que en el ejemplo anterior, pero al segundo
prrafo le hemos dado la propiedad de estilo clear: right;.
Con el posicionamiento flotante, podemos por ejemplo colocar elementos uno al lado del
otro. En el siguiente ejemplo, hemos utilizado cajas, todas con float:left; y un pequeo
margen para que no se peguen. Observa cmo se comportan cuando cambias el tamao de la
ventana:
De forma muy parecida, podemos utilizar el posicionamiento flotante para crear

columnas en un documento. Basta con que la suma del ancho de las capas que harn de
columnas quepa en el ancho de elemento contenedor, y que tengan posicionamiento flotante.
En Internet Explorer, si la suma de los anchos es del 100%, para algunos tamaos de
ventana no cabe, por lo que mostrar una columna debajo de la otra, aunque esto slo
ocurre a veces. Por eso, cuando utilizamos porcentajes es mejor utilizar un ancho total un
poco menor, por ejemplo del 99% o 99.5%.
De acuerdo con lo que hemos dicho, podemos dividir un elemento en dos columnas de la
siguiente manera:
float: left;
width: 30%;
height: 100%;
}
17
float: left;
width: 69.5%;
height: 100%;
}
Para aadir una cabecera al principio, no hay ms que poner una capa antes de las
columnas, con todo el ancho. Y para poner un pie, haramos lo mismo, pero colocndolo
despus de las columnas, y rompiendo el flotamiento con clear:both;.
div#cabecera {
width: 99.5%;
height: 10%;
background-color:RoyalBlue;
}
float: left;
width: 30%;
height: 80%;
}
float: left;
width: 69.5%;
height: 80%;
}
18
div#pie {
clear: both;
width: 99.5%;
height: 10%;
background-color:Violet;
}
La principal diferencia con el posicionamiento absoluto es que al flotante s le afectan

los mrgenes, propios y del elemento contenedor, y que no estamos obligados a definir el
alto. En el ejemplo anterior, hemos establecido el alto porque no hay contenido, pero si no
lo especificamos, el alto se ajustara al contenido del elemento.
Para practicar lo que hemos visto, te recomendamos que hagas los ejercicios
Maquetar con posicionamiento flotante y Organizar elementos.
Posicionamiento fijo
El posicionamiento fijo (position: fixed;) se define igual que el
posicionamiento absoluto, con las propiedades top, bottom, left y right.
Pero su comportamiento es distinto: el posicionamiento fijo se refiere
siempre a la ventana del navegador, independientemente de que el
elemento posicionado est dentro de otro elemento con posicionamiento,
como pasaba con el absoluto. Adems, el elemento siempre se muestra en
la misma posicin, aunque la pgina sea larga y nos desplacemos hacia abajo
o hacia un lado.
19
En el siguiente ejemplo, tenemos dos cajas con posicionamiento fijo. La

de la izquierda est al principio de la pgina. La de la derecha, est al final,
dentro de elementos con posicionamiento. Observa que esto no le afecta.
<head>
<title>Posicionamiento fijo</title>
div#fijo_izquierda {
position: fixed;
left: 10%;
top: 50px;
width: 100px;
height: 100px;
border: #663366 5px double;
}
div#fijo_derecha {
position: fixed;
right: 10%;
top: 50px;
width: 100px;
height: 100px;
border: #663366 5px double;
}
div#columna {
width: 50%;
margin: auto;
}
.verde, .azul {
height: 500px;
border: #006666 5px dashed;
20
border-width: 0 5px 5px 5px;

position: relative;
}
.verde {
background-color: #66CC99;
}
.azul {
background-color:#6699FF;
}
</style>
</head>
<body>
<div id="fijo_izquierda">Posicionamiento fijo<br
/>Izquierda</div>
<div id="columna">
<div class="azul"></div>
<div class="verde"></div>
<div class="verde">
<div id="fijo_derecha">Posicionamiento fijo<br
/>Derecha</div></div>
</div>
</body>
</html>
21
Una de las propiedades de este posicionamiento es que si imprimimos la

pgina web y ocupa varias pginas en papel, los elementos fijos se imprimen
en todas las pginas, por lo que puede resultar til para pies y encabezados.
Nota: Intenet Explorer 6 no soportaba este posicionamiento.
Ancho de la pgina, lquido o elstico

Al crear el diseo de una web, bsicamente existen dos tendencias: que la pgina ocupe
todo el ancho de la ventana del navegador (diseo lquido), o que ocupe slo una columna con
un ancho fijo (diseo fijo).
No es que uno sea claramente mejor que otro, tienen sus pros y sus contras:
Diseo fijo
En el diseo fijo, la pgina tiene un tamao exacto, normalmente expresado en pxeles.
Esto facilita el diseo, sobre todo si est compuesto por imgenes divididas en trozos que
deben casar perfectamente, ya que podemos posicionar todo de forma exacta. Tambin nos
permite controlar el ancho de los elementos de texto, no creando columnas ni demasiado
largas ni demasiado pequeas.
Por contra, no aprovecha bien el espacio. Pensemos en una pgina de ancho fijo, de
900px. Si un usuario la ve desde la pantalla de su telfono mvil, que tiene un ancho de
320px, la mayor parte de la pgina no quedar visible. En cambio, si se ve desde un monitor
panormico de 24'', con 1920px de ancho, la mayor parte del espacio estar
desaprovechado.
Como ejemplo de diseo fijo, tenemos la pgina de inicio de aulaClic.
22
Diseo lquido
En el diseo lquido, en vez de unidades absolutas se utilizan relativas al tamao de la
ventana. Esto hace que la pgina sea ms flexible a los distintos dispositivos de
visualizacin.
Por contra, es ms difcil controlar el diseo, sobre todo si se basa en muchas imgenes,
porque hay que pensar en qu ocurre si la ventana es muy pequea o muy grande, y que no se
descoloque todo al cambiar de tamao. Tambin puede producir lneas de texto muy largas,
lo que incomoda la lectura. Aunque el usuario siempre tiene la opcin de hacer ms pequea
su ventana.
Para intentar controlar un poco el tamao de los elementos, existen las propiedades de
estilo max-width (ancho mximo), min-width (ancho mnimo), max-height (alto mximo)
y min-height (alto mnimo).
Un ejemplo de diseo lquido puede ser la pgina de este curso.
Diseo elstico
ltimamente, se ha acuado el trmino "diseo elstico" para el diseo en el que el
tamao de los objetos, no es ni fijo ni en relacin al tamao de la ventana, si no al tamao
del texto (basado en em), dando al usuario la posibilidad de cambiar su tamao, y en
proporcin, el de todos los elementos. Aunque permite que el texto se controle, sigue sin
adaptarse a las distintas ventanas, y resulta difcil controlar las imgenes.
Actualmente, la mayora de las pginas ofrecen un diseo fijo, sobre todo si tienen un
diseo ms elaborado. Las que ofrecen un diseo ms elstico, suelen mostrar una columna
central elstica, que se adapta a la pantalla, y columnas con un ancho fijo, para mens o
para la publicidad.
23

Maquetación Web

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Maquetación Web

Cargado por

Copyright:

Formatos disponibles

UNIDAD 7 - Maquetacin web

Maquetar una pgina web

Cualquier elemento HTML de bloque, tiene dos atributos que pueden

Por defecto, al no ocupar todo el ancho, el elemento queda alineado a la

contenido todo el texto en una capa, a la que le hemos asignado el

Nulla eleifend rutrum nulla. </p>

Por lo que, si el desbordamiento es visible, puede tapar a los elementos

Nota: para que z-index funcione, se debe de haber especificado un tipo de

Para aplicarlo, lo primero es declararlo en el estilo, utilizando position:

Utilizando este posicionamiento, obtenemos gran flexibilidad para

congue vestibulum. Mauris ac orci eu nisl dictum ultrices. Morbi

massa. Quisque metus. Sed blandit hendrerit urna. Aenean eu nulla.

hendrerit ultricies. Cum sociis natoque penatibus et magnis dis

<h3 id="ap2">Apartado 2</h3>

tristique, sem. Quisque nec leo. Etiam fringilla

nunc, faucibus ac, suscipit sit amet, lacinia porttitor, mauris.

lorem nunc varius

nisl. Praesent ut mi interdum lorem consequat vulputate. Vivamus ac

nulla a porttitor commodo, orci diam commodo pede, ac congue neque

dapibus suscipit diam.

Mauris ac orci eu nisl dictum ultrices. Morbi blandit

neque. Integer sit amet mi. Curabitur ipsum lectus,

massa. Quisque metus. Sed blandit hendrerit urna. Aenean eu nulla.

hendrerit ultricies. Cum sociis natoque penatibus et magnis dis

<h3 id="ap3">Apartado 3</h3>

tristique, sem. Quisque nec leo. Etiam fringilla

nunc, faucibus ac, suscipit sit amet, lacinia porttitor, mauris.

lorem nunc varius

nisl. Praesent ut mi interdum lorem consequat vulputate. Vivamus ac

nulla a porttitor commodo, orci diam commodo pede, ac congue neque

Otro elemento muy utilizado en la maquetacin, es el encabezado y el pie. Observa que

Para practicar todo esto, te recomendamos hacer el ejercicio paso a paso

El posicionamiento es un poco distinto al resto. Para empezar, no se define con la

- left: flotante a la izquierda (float: left;).

Para solucionar esto, disponemos de la propiedad clear, que rompe el flotamiento.

- left: impide el flotamiento a la izquierda.

De forma muy parecida, podemos utilizar el posicionamiento flotante para crear

La principal diferencia con el posicionamiento absoluto es que al flotante s le afectan

En el siguiente ejemplo, tenemos dos cajas con posicionamiento fijo. La

border-width: 0 5px 5px 5px;

Una de las propiedades de este posicionamiento es que si imprimimos la

Ancho de la pgina, lquido o elstico

También podría gustarte