Unos enlaces sobre páginas con montones de plantillas web, listas para ser pinchadas.
http://www.templates.com/
http://www.templatesbox.com/
http://www.templateworld.com/
http://www.freewebtemplates.com/
http://www.freewebsitetemplates.com/
http://www.templatemonster.com/
Un saludo!
Para terminar con esta serie de post sobre CSS, he creído conveniente hacer un resumen con los enlaces a los todas las entradas publicadas.
DOCTYPE, quirk, strict y un poco más
Modelo de formato visual y modelo de caja
También quiero no olvidar hacer mención a mi fuente de inspiración, que ha sido el libro “Guía práctica, CSS” de “Xavier Colomés Fornós”.
Un saludo!
El posicionamiento de los elementos de nuestra página según el modelo de formato visual es una característica muy potente que nos ofrece CSS y que podemos utilizar para conseguir diseños impactantes.
La norma es que los elementos sigan el flujo normal de la página, esto es que unas cajas vayan detrás de otras según la caja sea de bloque o de línea. Además de este posicionamiento, tenemos disponibles otros tipos que nos permitirán alterar el comportamiento predeterminado y ser muy precisos en lo relativo a donde se muestran nuestros elementos/cajas.
Los tipos de posicionamiento disponible son:
· Estático (por defecto)
· Flotante
· Relativo
· Absoluto
· Fijo
Todos estos tipos (excepto flotante) se controlan a través de la propiedad position. Es por ello que dejaremos la posición flotante para el final de este post.
Creo recordar que en algún lugar leí que para saber CSS había que conocer (y entender) lo siguiente:
· Modelo de formato visual y modelo de caja
· Posicionamiento flotante
Si te fijas, nadie habla de aplicar propiedades de color, fuente, etc. Eso se supone que ya sabes hacerlo (o casi, porque seguro que también tienen su miga). En cualquier caso, si has seguido mis post verás que ya estamos cerca de cerrar el círculo, pero… lo dicho, vamos con el posicionamiento.
Antes de profundizar en los distintos tipos de posicionamiento, es importante saber que el posicionamiento no tiene ningún efecto en los elementos hijos de una tabla (thead, tr, th, tbody, td, etc.). Puedes ampliar esta información es la especificación oficial de CSS 2.1 para la propiedad position.
RELATIVO (relative)
El elemento se sitúa respecto a la posición que debería haber tenido siguiendo el flujo normal de la página. Por ello, sus coordenadas base son las coordenadas que debería tener si no lo hubiéramos posicionado de forma relativa.
No afecta al resto de elementos de la página y no rompe el flujo normal de la página.
<head>
<style type="text/css">
#Div1, #Div2, #Div3
{
width: 100px;
height: 100px;
border: 1px solid Black;
}
#Div2
{
position: relative;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div id="Div1">1</div>
<div id="Div2">2</div>
<div id="Div3">3</div>
</body>
Cómo podemos observar, la capa 2 se ha desplazado respecto a su posición original 50px a la izquierda y 50px hacía abajo, pero también apreciamos que a la capa 3 todo esto ni le va ni le viene y se coloca donde debería ir, es decir, actúa como si la capa 2 no hubiera cambiado su posicionamiento.
Por otro lado, si posicionamos un elemento de forma relativa, absoluta o fija, podría producirse un solapamiento como en el ejemplo anterior. En este caso, la propiedad z-index nos ayudará a controlar la posición de los elementos solapados en la pila.
| Si nos fijamos, para posicionar de forma efectiva un elemento, no basta con la propiedad display: relative, sino que hay que utilizar alguna de las propiedades top, left, right, bottom (igualmente para el posicionamiento absoluto y fijo).
Se dice que posicionar no es lo mismo que desplazar. Es decir, position posiciona y top, left, right y bottom desplazan. Aunque esto puede parecer obvio, más adelante veremos como el tipo de desplazamiento flotante “desplaza” pero no posiciona. |
ABSOLUTO (absolute)
Sus coordenadas base son relativas al primer elemento padre que no esté posicionado de forma normal (el primer elemento contenedor con la propiedad position distinta de static).
El posicionar elementos de forma absoluta rompe el flujo normal de la página y saca el elemento a un nuevo plano de posicionamiento (distinto del que utilizan el resto de elementos de la página). Los elementos siguientes no se sitúan a continuación sino que tratan al elemento posicionado de forma absoluta como si nunca hubiera estado ahí. Esto es “romper el flujo”.
Veamos el mismo ejemplo del caso anterior, pero ahora posicionado de forma absoluta (simplemente cambiaremos la propiedad position de relative a absolute).
Fijarse que para la capa 3, la capa 2 no existe.
FIJO (fixed)
Se comporta como el posicionamiento absoluto pero “fijado” en esa posición, por lo que si nos desplazamos por la página con las barras de desplazamiento, este elemento siempre estará “anclado” en la misma posición.
Este posicionamiento no está soportado por iPad ni iPhone. Pues ahora mismo y sin poder concretar la versión de iOS, ya está soportado este tipo de posicionamiento.
FLOTANTE
¡Y por fin llegó el posicionamiento flotante!
Tengo que serte sincero. Llevo muchos años programando HTML y CSS (con mejor o peor éxito) y nunca he terminado de entender el posicionamiento flotante. De hoy no pasa. ¡Palabrita del niño Jesús!.
El porqué es tan importante en el diseño web la posición flotante, es porque la estructura de cualquier página web más o menos compleja, se suele realizar con este tipo de posicionamiento. De hecho, cuando alguien dice: “mi diseño es tableless”, es que no utiliza tablas pero consigue la misma distribución a base de capas (div) con float. Créeme, el posicionamiento flotante es muy importante y tienes que dominarlo.
Lo primero que hay que decir es que el posicionamiento flotante no se consigue a través de la propiedad position, sino con la propiedad float (posicionar no es lo mismo que desplazar, y float sólo desplaza, no posiciona).
Tengo que reconocer que cualquier cosa que te cuente, no estará mejor explicado que aquí. Este enlace de www.libros.web me ha servido de inspiración.
El posicionamiento flotante tiene las siguientes características:
· Una caja “flotante” se desplaza al lugar posible más a la izquierda o más la derecha (según float: left o float: right) del lugar en el que estaba situada originalmente (respetando el margen y relleno de su bloque de contención).
· Al igual que el posicionamiento absoluto o fijo, el posicionamiento flotante rompe el flujo normal de la página. Esto significa que estos elementos están en otro plano de posicionamiento distinto del normal (el plano flotante) y por ello el resto de cajas ocupan el espacio que originalmente tenía la caja (produciendo muchas veces solapamiento). Ejemplo 1.
· Si hay más cajas flotantes, estas cajas sí tienen en cuenta la nueva posición del elemento posicionado de forma flotante, y respetan su nuevo espacio.
· Si la caja no tiene espacio suficiente para desplazarse a izquierda o derecha, forzará una nueva línea donde pueda colocarse. Ejemplo 2.
· Cuando una caja de bloque está posicionada de forma flotante, ya no toma automáticamente el ancho de su bloque de contención, y lo que hace es ajustarse a su contenido (se comporta en este sentido como una caja en línea). Ejemplo 3.
Ejemplo 1
Inicialmente tenemos 3 DIV:
<div style="background-color: Red; width: 50px; height: 50px;"></div>
<div style="background-color: Yellow; width: 50px; height: 50px;"></div>
<div style="background-color: Blue; width: 50px; height: 50px;"></div>
Ahora, hacemos que el DIV rojo flote a la izquierda
<div style="background-color: Red; width: 50px; height: 50px; float: left;"></div>
Vemos que el DIV rojo (el posicionado de forma flotante) se ha colocado lo más izquierda que ha podido y además ha roto el flujo normal de la página. Esto provoca que el DIV amarillo no sepa de su existencia y reclame el espacio original que ocupaba el DIV rojo. Siendo así, el DIV amarillo y el DIV rojo están situados en la misma posición (uno debajo de otro y producen un solapamiento).
Ahora posicionaremos el DIV amarillo también de forma flotante:
<div style="background-color: Yellow; width: 50px; height: 50px; float: left;"></div>
Podemos ver como el DIV amarillo si ha tenido en cuenta al DIV rojo (luego los elementos flotantes tienen en cuenta a otros elementos flotantes), pero el DIV azul sigue sólo en el flujo normal de la página y ahora es él el que está debajo del DIV rojo.
Si finalmente posicionamos de forma flotante también el DIV azul:
<div style="background-color: Blue; width: 50px; height: 50px; float: left;"></div>
Ejemplo 2
Partimos del resultado final del ejemplo 1 (los 3 DIV posicionados de forma flotante), pero ahora los metemos a todos dentro de un DIV con un ancho de 100px (insuficiente para los 3 DIV que suman 150px).
<div style="width: 100px;">
<div style="background-color: Red; width: 50px; height: 50px; float: left;">
</div>
<div style="background-color: Yellow; width: 50px; height: 50px; float: left;">
</div>
<div style="background-color: Blue; width: 50px; height: 50px; float: left;">
</div>
</div>
Como podemos ver, el DIV azul no encontró sitio suficiente para colocarse en la misma línea donde originalmente estaba y por ello ha forzado una nueva línea donde situarse.
Ejemplo 3
<div style="background-color: Red; float: left;"> Sergio</div>
<div style="background-color: Yellow; float: left;"> Carmen</div>
<div style="background-color: Blue; float: left">Jimena</div>
Hasta ahora hemos hablado todo el rato de elementos posicionados de forma flotante y su relación con otros elementos flotantes, pero ¿Cómo influye este posicionamiento en el resto de elementos que no están posicionados de forma flotante?
Si flotamos un elemento a la izquierda, estamos diciendo que el contenido que venga a continuación, “fluya” o se “distribuye” a la derecha del elemento flotante. Por el contrario, si flotamos a la derecha, estamos diciendo que queremos que siguientes elementos “fluyan” la izquierda del elemento.
Si retomamos el ejemplo 1 en el paso 2 (DIV rojo flotante y amarillo oculto porque está debajo del rojo), podemos ver que aparentemente el DIV amarillo no parecía “fluir” respecto al DIV rojo. En realidad, los elementos de bloque fluyen su contenido. Esto es que la el modelo de caja para el elemento que está fluyendo es el mismo, pero “adapta” su contenido para que fluya.
Si le quitamos al DIV azul la anchura y le agregamos contenido:
<div style="background-color: Red; width: 50px; height: 50px; float: left;">
</div>
<div style="background-color: Yellow; width: 50px; height: 50px; float: left;">
</div>
<div style="background-color: Blue; color: White; height: 50px;"> Contenido</div>
Vemos que el DIV azul comienza en la izquierda (aquí parece que no, pero en realidad comienza en el mismo lugar que el DIV rojo), y es el contenido el que se ha “adaptado” para fluir a la izquierda del DIV amarillo. De hecho, si el DIV azul tuviera una imagen de fondo (background-image), perderíamos 100 pixeles de la imagen porque estaría solapado por los DIV rojo y amarillo.
Limpiar los floats
Cuando queremos que siguientes elementos ya no “fluyan” más, hay que utilizar la técnica denominada “limpiar los float”. Esto se consigue con la propiedad clear. Esta propiedad especifica qué lado del elemento no debe fluir más. La técnica consiste en incluir un elemento como el siguiente:
<div style=”clear: both”><div>
Con esta técnica también permitimos que el bloque de contención donde están alojados los elementos flotantes, se ajuste automáticamente al alto de su contenido (que ahora sí, incluirá los elementos flotantes).
Un saludo!
Tenía muchas ganas de llegar a este post porque espero que, al menos para mí, suponga un salto cualitativo en lo relativo al diseño de páginas web (y con esto no quiero decir que sean más bonitas, sino mejor hechas).
Una vez ya hemos conocido qué es la especificidad, hay otro punto que es de gran importancia para el gran puzle que supone el diseño web. Estoy hablando del modelo de formato visual y del modelo de caja.
MODELO DE FORMATO VISUAL
El modelo de formato visual (visual formatting model) es cómo los navegadores muestran por pantalla los documentos que realizamos.
El modelo de formato visual organiza todos los elementos de nuestra página en bloques de contenido o cajas, que se reparten el espacio de la página. Por caja entendemos un “espacio rectangular delimitado”, es decir, cualquier página siempre se organiza en torno a cajas (y da igual lo compleja que sea y los millones de bordes redondeados que tenga, al final todo son cajas).
Por ejemplo, una página como la siguiente generará los siguientes bloques:
<body>
<div>
<div>
<p>
<span>panicoenlaxbox.com</span>
</p>
</div>
</div>
</body>
· Bloque body
· Bloque div
· Bloque div
· Bloque p
· Bloque span
Podemos ayudarnos del complemento “Web Developer” de Firefox para resaltar todos los elementos del documento y así observar que, efectivamente, el modelo de formato visual divide el espacio en cajas que a su vez contienen otras cajas (otra opción sería activar el borde de todos los elementos, * { border: black solid 1px }, pero no parece muy operativo…)
A mí me recuerdo al juego de las muñecas rusas, Matrioska.
Cuando una caja de bloque contiene otros elementos se genera lo que se denomina un bloque de contención (más adelante veremos que es una caja de bloque).
Esto es importante puesto que el tamaño y posición de una caja (sin importar su tipo) se calcula respecto al bloque de contención que la contiene.
Por ejemplo, el anterior código podemos modificarlo para que la primera capa tenga un ancho del 50% y la segunda también tenga un ancho del 50%. Veamos que ocurre:
La primera capa ha tomado el 50% del ancho del bloque de contención en el que se halla (en nuestro caso, body), mientras que la segunda capa ha tomado el 50% del bloque de contención en el que se halla (que ahora ya no es body, sino la primera capa). Es decir, hay ciertos valores como la posición, valores relativos (por ejemplo, la anchura expresada en %), etc. que computan respecto al valor computado de su padre.
Algunas reglas respecto a los bloques de contención son:
· La raíz del documento (body) siempre generará una primera caja llamada bloque de contención inicial.
· El ancho de este primer bloque de contención inicial se puede modificar a través de la propiedad width, pero en caso de no hacerse tomará el ancho de la ventana del navegador (que podría redimensionarse y por ende cambiar automáticamente).
· En caso de no especificarse, los bloques de contención adaptarán su alto a su contenido (incluso el bloque de contención inicial, que no se ajustará al alto de la ventana sino al alto de su contenido).
· Si los elementos dentro de un bloque de contención exceden los límites (alto o ancho) de este bloque se produce un desbordamiento en el bloque de contención. Se puede tratar este desbordamiento a través de la propiedad overflow. Podremos ocultar el exceso de contenido, suministrar barras de desplazamiento o informar al bloque de contención que crezca para ajustarse a su contenido.
Ahora que ya sabemos que un navegador sólo entiende de cajas, ha llegado la hora de entrar en el detalle de cómo son, de qué tipo y cómo se comportan estas cajas en distintas situaciones.
El tipo de una caja es esencial. A través del tipo, una caja se posicionará en el flujo del documento de una forma u otra, y también delimitará qué propiedades CSS se pueden aplicar con éxito al elemento.
El tipo de una caja se controla a través de la propiedad display (creo que voy a llorar porque hasta ahora yo pensaba que display sólo servía para mostrar u ocultar elementos).
A groso modo, el valor establecido en la propiedad display dará lugar a 2 tipos de cajas: Cajas de bloque y cajas en línea.
· Cajas de bloque
o Puede contener otras cajas de bloque, en línea o contenido (texto).
o Están pensadas para contener otros elementos.
o Generan un bloque de contención.
o Generan una nueva línea. Esto es que las cajas de bloque siempre empiezan en una nueva línea y que además el siguiente elemente que insertemos aparecerá en la siguiente línea más allá del borde inferior de la caja.
o Si no tienen establecido un ancho, toman el ancho de su bloque de contención padre.
· Cajas en línea
o Sólo puede contener otras cajas en línea o contenido (texto).
o Están pensadas para mostrar y formatear texto.
o NO generan un bloque de contención.
o NO generan una nueva línea.
o Tomarán sólo el ancho requerido por su contenido.
o Si el contenido de un bloque en línea excede el tamaño de la propia línea se generará otra caja. Por eso se dice que un elemento con la propiedad display: inline genera 1 o más bloques de línea.
A grandes rasgos, el valor block para la propiedad display crea una caja de bloque e inline crea una caja en línea. También es muy interesante el valor inline-block que hace que la caja se comporte como un bloque de contención pero sin generar una nueva línea. Hay mucho más, pero escapan del ámbito de este post.
Todas las etiquetas HTML tienen un valor predeterminado para la propiedad display, por ejemplo:
| Block | Inline |
| BODY DIV P UL LI H1, H2, … FORM FIELDSET LEGEND TABLE TD IFRAME … | A SPAN BR EM IMG INPUT STRONG TEXTAREA … |
Para una lista completa de elementos en bloque, visita el siguiente enlace.
Para una lista completa de elementos en línea, visita el siguiente enlace.
| El valor inicial de la propiedad display no significa que no podamos cambiar el tipo de caja de un elemento. Por ejemplo, bien podríamos tener un DIV con display: inline para que fuera tratado como un elemento en línea, o un enlace A con display: block para tratarlo como un elemento de bloque. A este respecto, no hay que confundir el tipo de caja que genera el elemento con la validación del documento, es decir, aunque un elemento de tipo A sea un elemento de bloque (porque hayamos especificado display: block), igualmente no podrá contener un elemento de tipo DIV (porque no pasaría la validación según el DOCTYPE y DTD asociado). |
La idea principal de todo lo visto hasta ahora es que el diseño web deberíamos plantearlo como un diseño de cajas.
Además de los 2 tipos de cajas visto anteriormente (bloque o en línea) hay un tercer tipo que es el “tipo anónimo”. Este tipo de caja se crea “automáticamente” para permitir que el flujo de la página no se vea alterado. Estas cajas “anónimas” pueden ser del tipo bloque o en línea. Sobre estas cajas no tenemos control porque no tienen un elemento asociado declarado (se crearon “al vuelo”).
El ejemplo más claro de caja anónima es cuando en una de caja de bloque insertamos texto que no está contenido en una caja. En este caso, el texto produciría un conflicto por el que el resto de cajas de ese bloque no tendrían una referencia sobre la que situarse. Veamos un ejemplo:
<div>
Este texto crea una caja anónima de bloque porque sino P no tendría una referencia sobre dónde situarse. Es de bloque porque ha sido "creada" para P, que es un elemento de bloque.
<p>Texto dentro de caja, sin problemas</p>
</div>
<div>
Este texto crea una caja anónima en línea porque sino SPAN no tendría una referencia sobre dónde situarse. Es de línea porque ha sido "creada" para SPAN, que es un elemento de línea.
<span>En línea</span>
</div>
MODELO DE CAJA
Ahora que ya sabemos que el navegador distribuye en pantalla los elementos de nuestra página siempre generando una caja por cada elemento, es momento de estudiar como manipular estas cajas y cuál es el formato que las define. Estamos hablando del modelo de caja (box model).
Las propiedades más relevantes de una caja son:
· Margen (margin)
· Borde (border)
· Relleno (padding)
· Ancho (width)
o No incluye el margen ni el borde, sólo el contenido.
o Sólo se aplica a cajas de bloque.
o Si el ancho está definido, el exceso de contenido se tratará con overflow.
· Alto (height)
o No incluye el margen ni el borde, sólo el contenido.
o Sólo se aplica a cajas de bloque.
o Si el alto está definido, el exceso de contenido se tratará con overflow.
· Posicionamiento (position)
o Estático (static, posicionamiento por defecto), absoluto (absolute), relativo (relative) o fijo (fixed).
· Imagen de fondo (background-image).
· Color de fondo (background-color).
Respecto al margen, cabe mencionar que es siempre transparente y tomará el color o imagen de fondo de su elemento padre o contenedor (en caso de no tener ninguno, será body).
El modelo de caja puede ser fácilmente visualizado a través de cualquiera de las herramientas de desarrollo integradas en los navegadores.
De todas las características del modelo de caja, una de las más interesantes y que su vez supone mayor reto entender y utilizar es el posicionamiento. Por ello, el posicionamiento lo trataremos en un siguiente post que explicará todas sus posibilidades. Ya puedes visitar el post de posicionamiento en CSS.
Un saludo!
