| La maquetación de una página web es la primera tarea que debemos acometer. Este tema no es trivial y hay que estudiarlo con atención porque muchas veces nos volvemos locos intentando averiguar por qué, por ejemplo, no se posiciona bien una caja en pantalla. Para ello, voy a ir describiendo las propiedades de CSS que se necesitan para llevarla a cabo con éxito, complementandolas con ejemplos. Ya en otro tutorial, crearé la maqueta de nuestra futura web. Muchas de las definiciones son extraidas tal cual o simplificadas de la Recomendación W3C sobre Hojas de Estilo en Cascada, Nivel 2 Revisión 1 (CSS 2.1), y de la Recomendación W3C "HTML 4.01 Specification" que están en la Sección HTML / CSS de esta web. |
| ¿Que es maquetar una web? Pues es definir una estructura dividiendo el espacio donde vamos a mostrar los contenidos en subespacios o cajas. Hay muchas formas para estructurar una web, lo típico es dejar un espacio en la parte superior para una cabecera, y el resto del espacio lo podemos distribuir en una, dos o tres columnas, unas más anchas que otras, para albergar menús y otros contenidos. Tambien suele ser bastante común el dejar un espacio como pie de página. Si tomamos como ejemplo la web en la que estamos, su estructura es una cabecera, tres columnas (la del centro mucho mas gruesa para situar los contenidos) y un pequeño pie. |
 |
| |
 DIV
|
| Esos 'espacios' que dividen nuestra web se pueden hacer de varias formas. La más adecuada son las cajas (en HTML es el comando DIV). Básicamente cuando utilizamos el tag DIV en html estamos creando un contenedor (una caja) con el estilo y la posicion que definamos en los atributos CSS de su identificador (ID) o de su clase (CLASS). |
|
 ID o identificador: |
|
Este atributo asigna un nombre a un elemento. Este nombre debe ser único en un documento. Se declara con la # y en el BODY se le llama como ID="nombredelidentificador". |
|
CLASS o clase: |
|
Este atributo asigna un nombre de clase a un elemento. Se puede asignar el mismo nombre de clase a cualquier número de elementos. Se declara con un punto y en el BODY se le llama como CLASS="nombredelaclase". |
| |
|
| Poniendo un ejemplo: |
 |
| Por el momento, esa va a ser la estructura de nuestra web. Entre las etiquetas < STYLE > y < /STYLE > escribiremos las propiedades de nuestros DIV. Ese espacio es el perteneciente a la hoja de estilo en cascada CSS. Cuando terminemos pasaremos ese espacio a un fichero aparte, para que todas las paginas de nuestra web puedan acceder a las propiedades de nuestra hoja de estilo, pero de momento escribiremos las propiedades CSS en el mismo fichero, por comodidad. |
| Dentro de la seccion < STYLE >< /STYLE > os he puesto un identificador llamado 'principal'. He escogido un identificador porque el elemento nombrado será único en nuestra web. |
| Entre las etiquetas < DIV > y< / DIV > escribiremos los contenidos para esa caja (tablas, parrafos, imágenes...), que ahora está vacia, pero que ya llenaremos con algo más adelante. |
| Dentro del identificador #principal aun no hay nada. Será ahi donde especificaremos la posición, la forma de comportarse y el color de la caja y sus contenidos. En resumen, definiremos en la hoja de estilo todas las caracteristicas posicionales, de comportamiento y visuales para ese identificador y por lo tanto, para esa caja. Vamos a ir viendo cómo hacerlo. |
|
| |
HEIGHT - WIDTH |
| Esta propiedades especifican respectivamente la altura y la anchura del contenido (en este caso, de la caja). Pueden tomar tres tipos de valores: |
|
valor exacto: |
|
Es decir, una altura y/o anchura determinada. Hay muchas formas de establecer las medidas en una web. En este caso utilizaré px, que son píxels. Por ejemplo, si escribo en #principal
HEIGHT: 100px; WIDTH: 200px;
estaré creando una caja de 200 pixels de ancho por 100 de alto. |
|
porcentaje: |
|
Este porcentaje se calcula sobre el elemento contenedor de la caja, es decir, su caja-padre, o dicho de otro modo, la caja que la contiene. Si no hay ninguna caja que la contiene, se referirá a BODY. Si el elemento contenedor no tiene tamaño fijo (valor exacto) o no está especificado, el porcentaje se entiende como 'auto'. Por ejemplo, si escribo en #principal
HEIGHT: 60%;
estaré creando una caja que tiene como altura el 60% de la altura de su caja contenedora. |
|
auto: |
|
La caja tomará como tamaño en altura el necesario para visualizar su contenido. En anchura se extenderá mientras no haya nada que se lo impida (otra caja o el final de su caja contenedora). Por ejemplo, si escribo en #principal
HEIGHT:auto;
y entre las etiquetas de apertura y cierre del DIV escribo
HOLA
estaré creando una caja que tiene como altura una sola linea (la de la palabra HOLA). |
| |
|
| |
BACKGROUND-COLOR |
| Esta propiedad fija el color de fondo de un elemento. |
|
valor: |
|
Palabra clave que define al color, como por ejemplo 'red' o un código hexadecimal de 6 caracteres ( #ffffff). |
|
palabra clave -transparent- |
|
para hacer que los colores subyacentes se vean a través. |
| |
|
| Esta propiedad no es necesaria para hacer la maqueta de una web, pero ayuda mucho a visualizar el posicionamiento y el comportamiento de las cajas (DIV) que vayamos creando. A cada caja le asignaremos un color provisional distinto, para poder ver como se posicionan. Cuando la estructura total esté creada, cambiaremos los valores provisionales de los colores de las cajas, a los definitivos que queramos. |
| Vamos a introducir en #principal los siguientes valores: |
 |
| Si ejecutamos nuestra web obtendremos una caja de 200 pixels de alto por el 60% de su caja contenedora de ancho, que en este caso es BODY (fijaros que si vamos cambiando el ancho de la ventana (mostrandola no-maximizada y arrastrando uno de los laterales con el ratón), veremos que el ancho de la caja va cambiando para tener siempre el 60% del total, pero que el alto se mantiene fijo en 200px. Pulsa en este link ' EJEMPLO 2 ' para ejecutarlo. |
| Ahora vamos a añadir algunas cosas para realizar pruebas. |
| En el BODY, debajo del tag < / DIV > vamos a escribir la palabra HOLA |
 |
| Si ejecutamos la página veremos que el HOLA aparece bajo la caja. Pulsa en este link ' EJEMPLO 3 ' para ejecutarlo. |
| Si hubieramos querido que apareciese dentro de la caja, lo hubieramos escrito entre las dos etiquetas del DIV. De esta prueba debemos entender que de una forma normal, los elementos que posicionemos en una página web irán de arriba a abajo pero ¿y si deseo colocar algo a la derecha de la caja? ¿No sería más lógico que la posición natural de los elementos fuese de izquierda a derecha y de arriba a abajo? (al fin y al cabo, esa es la forma que tenemos de leer un documento). |
| Pues si. A esa forma natural de posicionarse (como leemos los documentos) se le conoce como flow o flujo del documento. |
| |
| flow o flujo del documento (¡OJO! NO ES UNA PROPIEDAD. ES UN CONCEPTO.) |
| Por flow o flujo del documento nos referimos a la forma en que su contenido "fluye" dentro de la ventana del navegador; que puede cambiar o no dependiendo del valor de ciertas propiedades. El flujo normal de un documento es en horizontal, de izquierda a derecha. |
| |
|
| Pero entonces ¿por qué lo coloca debajo y no a la derecha? |
| Pues porque no todos los elementos entienden este flujo de la misma forma. Sin entrar en muchos detalles de momento (si lo deseas, mira el elemento display de CSS en la Recomendación W3C sobre las Hojas de Estilo en Cascada, Nivel 2 Revisión 1 (CSS 2.1)), el elemento DIV está considerado como un elemento de bloque (en contraposicion con otros elementos que pueden ser considerados 'en linea') y para estos elementos, el fluir natural de la página es de arriba a abajo, por eso, la palabra HOLA aparece bajo la caja. |
| Si añado una nueva caja llamada #segunda a nuestra página, la colocará bajo la palabra HOLA, porque cada DIV se posiciona en una nueva línea, y finaliza saltando a una nueva línea (posicionamiento de bloque). |
 |
| Pulsa en este link ' EJEMPLO 4 ' para ejecutarlo. |
| Vale. De acuerdo. Las cajas se posicionan una debajo de la otra de forma natural, pero ¿y si deseo posicionar una caja a la derecha? Pues eso se hace introduciendo una nueva propiedad, la propiedad POSITION, junto con otras cuatro que la complementan: TOP, BOTTOM, LEFT y RIGHT (que básicamente indican el lugar en el que se posiciona la caja en la pantalla). |
| |
POSITION |
| Esta propiedad determina la forma en que se calcula la posición de una caja en la página. Sus valores pueden ser: |
|
static: |
|
La posición static es el valor por defecto de todos los elementos HTML, es decir, que si no especificamos nada, el elemento se posicionará en este modo.
Los elementos en posición estatica se van situando según el flujo del documento, que en el caso de los DIV o cajas, será de arriba a abajo. En este modo de posicionamiento, las propiedades top, bottom, left y right no se aplican. |
|
relative: |
|
La posición relative hace que los elementos tambien se posicionen según el flujo del documento, pero a diferencia de la posicion static, si podemos utilizar las propiedades top, bottom, left y right. A eso se le llama 'desplazar la caja relativamente a su posicion normal'. Los valores de las propiedades top, bottom, left y right se hacen respecto a la caja contenedora. |
|
absolute: |
|
La posición absolute permite colocar la caja de forma absoluta con las propiedades top, bottom, left y right. No depende en absoluto del flujo normal del documento y las demás cajas hermanas (cajas que están al mismo nivel, ni incluyen a esta caja, ni son incluidas por ella) no la tienen en cuenta en el flujo normal del documento. Los valores de las propiedades top, bottom, left y right se hacen respecto a la caja contenedora. |
|
fixed: |
|
Es una derivacion de Position Absolute. La única diferencia es que los valores top, bottom, left y right se referencian respecto a la ventana del navegador, y no respecto a una caja contenedora. De esta forma, aunque haya desplazamientos en la página, cualquier caja POSITION FIXED, no se moverá.
NOTA: La POSITION FIXED no está soportada por Internet Explorer. |
| |
|
| |
TOP, BOTTOM, LEFT y RIGHT (arriba, abajo, izquierda y derecha): |
Definen respectivamente la distancia desde la caja contenedora hasta el punto de comienzo o fin de la caja.
En el caso de position absolute o relative, la caja contenedora será su caja padre o BODY en el caso de que no haya ninguna.
En el caso de position fixed, la caja contenedora es la ventana del navegador maximizada.
Para el caso de position static, estas propiedades no tienen validez. |
| |
|
| Voy a poner ejemplos: |
| Vamos a modificar los valores de las dos cajas que hemos creado (la altura y/o la anchura), y vamos a eliminar la palabra HOLA: |
 |
| Pulsa en este link ' EJEMPLO 5 ' para ejecutarlo. |
| NOTA: la linea * {margin:0; padding:0;} en la sección de CSS la hemos puesto para eliminar los márgenes que cada navegador establece por defecto, para que la visualización sea igual en todos. |
| Hemos posicionado la caja principal de forma absoluta y la hemos desplazado 150 pixels a la derecha, desde la parte izquierda de su caja contenedora. Como es position:absolute, su caja contenedora es su caja padre, que como no existe es el BODY. Aparece entonces arriba (el top está a 0), y a 150 pixels de la izquierda del body, que en este caso coincide con la ventana. |
| ¿Que pasa con la caja segunda? Como no le hemos modificado nada, su posicion es estática (position:static) y se coloca arriba a la izquierda, con el flujo del documento. Es importante darse cuenta de que una capa posicionada de forma absoluta, es sacada del flujo del documento, y no afecta a las capas hermanas sucesivas. La caja principal aparece sobre la segunda porque , al ser sacada del flujo del documento está en un nivel superior.Esto último también es importante porque si no estructuramos bien las cajas, podemos solapar capas y perder contenidos sin darnos cuenta de por qué pasa. |
| ¿Que sucedería si ahora colocaramos una nueva caja? |
| Si fuese estática o relativa, se colocaría bajo la caja segunda (la verde), con la diferencia de que la relativa podriamos desplazarla con las propiedades top, left, right y bottom. |
| Si fuese absoluta o fixed, se colocarian segun las mismas propiedades top, left, right y bottom, fuera del flujo del documento. |
| Modifiquemos de nuevo nuestro código y estudiemos los nuevos cambios: |
 |
| Pulsa en este link ' EJEMPLO 6 ' para ejecutarlo. |
| Como decia antes, la tercera caja (la azul) se situa bajo la segunda, eludiendo la principal porque está fuera del flujo del documento. Actua asi porque es relativa. La cuarta caja sigue el mismo modelo que la anterior, pero esta vez al poner el top:10px; dejará este espacio entre la caja tercera y la cuarta. |
| Ahora voy a añadirle a la caja tercera, un top:10px; ¿Que ocurre? |
| Pulsa en este link ' EJEMPLO 7 ' para ejecutarlo. |
| Pues que entre la caja segunda y la tercera, ahora hay 10 pixels en blanco. Esto es correcto, pero ¿por qué han desaparecido esos mismos 10 pixels entre la caja tercera y la cuarta? La caja cuarta tambien tiene un top:10px; y si es relativa, significa que debe seguir el flujo del documento y posicionarse tras la tercera, y luego dejar los 10 pixels entre ambas cajas. ¿Donde está el error? No hay error. Hay que tener en cuenta siempre que cuando se posiciona una caja relativamente, lo hace sobre el lugar que le corresponde en el flujo del documento, pero NO TIENE EN CUENTA LOS DESPLAZAMIENTOS QUE NOSOTROS LE HAYAMOS PUESTO. Es decir, que aunque la caja tercera esté desplazada 10 pixels hacia abajo, la posicion relativa de la caja cuarta no los ve y la coloca como si no hubieramos desplazado la tercera. Por eso desaparecen los 10 pixels. |
| Atencion a esto porque si el desplazamiento de 10 pixels de la tercera caja hubiera sido de 20 pixels,(como he hecho en el ejemplo 8) se nos hubieran perdido ahora mismo 10 pixels de la tercera caja sin saber cómo ni donde, como vemos en el ejemplo 8, gracias a que el posicionamiento izquierdo (left) es distinto en ambas cajas. |
| Pulsa en este link ' EJEMPLO 8 ' para ejecutarlo. |
| Alguien puede decir ¿para qué posicionar una caja relativamente? Las posiciono todas de forma absoluta, y me ahorro problemas. Cuando explique la maquetación de esta web, se verá cuando puede ser util posicionar capas de forma relativa. |
| Vamos a hacer otro cambio. La caja tercera la vamos a introducir dentro de la caja principal, a modo de hija, y le vamos a reducir la altura (HEIGHT) a 50px. |
 |
| Pulsa en este link ' EJEMPLO 9 ' para ejecutarlo. |
| Ahora el desplazamiento top y left no se hacen respecto a la ventana, sino que se hacen respecto a la caja padre o contenedora, la caja principal. Esto es así porque la caja tercera está posicionada relativamente (position:relative). Sucedería lo mismo con position:absolute. |
| Sin embargo, si cambiamos el position de la caja tercera a position:fixed; |
| Pulsa en este link ' EJEMPLO 10 ' para ejecutarlo. |
| Posiciona la caja a 20 pixels de alto y a 100 a la derecha de los límites de la ventana, y no de la caja contenedora principal. |
| NOTA: La POSITION FIXED no está soportada por Internet Explorer. En estos casos se salta la línea del CSS position:fixed y como no hay otro position válido, reconoce la caja como estática, se salta los top, left... y la coloca en el 0,0 (arriba y a la izquierda) de su caja contenedora, que en este caso es principal. |
| Para terminar este tutorial he hecho de nuevo algunos cambios. He eliminado la caja cuarta y he vuelto a definir la tercera como relative. Tambien le he dado una nueva altura: 400px; |
 |
| Pulsa en este link ' EJEMPLO 11 ' para ejecutarlo. |
| Ahora surge un problema. La caja hija (la tercera en este caso) tiene una altura mayor (400 px) que su caja contenedora (la principal que tiene 200 px de altura). ¿Que sucede? Pues sucede lo que se denomina desbordamiento. Su efecto es diferente en cada navegador. Por poner los dos más usados como referencia, en IExplorer la caja padre se desbordará hasta contener a la hija (ojo, sin contar el desplazamiento que le hayamos dado a la hija), y en mozilla, el efecto será el mismo, pero el color del fondo de la caja padre no superará su altura preestablecida, pareciendo que no prolonga el desbordamiento (aunque si que lo hace). |
| Dejar esto sin control puede suponernos muchos quebraderos de cabeza cuando ya tengamos la página bastante avanzada y empecemos a añadir contenidos que nos desborden las cajas. Por ello es mejor controlar el desbordamiento con la propiedad creada a tal efecto, la propiedad overflow. |
| |
OVERFLOW |
| Esta propiedad especifica si el contenido de un elemento a nivel de bloque es recortado cuando desborda la caja del elemento. Sus valores son los siguientes |
|
visible: |
|
Este valor indica que el contenido no está recortado, es decir, puede ser procesado fuera de la caja de bloque, pero solo hasta el final de la ventana del navegador. (por defecto). |
|
hidden: |
|
Este valor indica que el contenido es recortado y que ningún interfaz del usuario debe proporcionar barras de desplazamiento para ver el contenido fuera de la región recortada. |
|
scroll: |
|
Este valor indica que el contenido es recortado y que si la aplicación del usuario utiliza un mecanismo de desplazamiento que sea visible en la pantalla (tal como una barra de desplazamiento), ese mecanismo se debe mostrar en una caja tenga o no ésta parte de su contenido recortado. Esto evita cualquier problema con las barras de desplazamiento que aparecen y que desaparecen en un entorno dinámico. |
|
auto: |
|
El comportamiento del valor 'auto' hace que si la caja hija no se desborda, no existan barras de scroll, pero en caso contrario, aparecerán las que sean necesarias (horizontal y/o vertical) para cubrir el desbordamiento de la caja hija, y tendrá exactamente el tamaño de la caja contenedora, situandose en su lateral derecho o abajo, segun el caso. (por defecto para BODY) |
| |
|
| Veamos como funciona. |
| Si cogemos la pagina del anterior EJEMPLO 11 y la ponemos en modo ventana (sin maximizar) y vamos subiendo el limite inferior con el raton hasta 'comernos' alguna caja, vemos que sale una barra de scroll vertical en el margen derecho de la pantalla. Eso sucede porque estamos desbordando el tamaño de la caja BODY y para BODY, el overflow por defecto es auto (sucede lo mismo con el margen derecho). |
| Si ponemos una nueva etiqueta BODY en la parte de los estilos y le decimos OVERFLOW: HIDDEN; ¿que sucede? |
 |
| Pulsa en este link ' EJEMPLO 12 ' para ejecutarlo. |
| Pues que si reducimos el tamaño de la pagina por algún extremo, el contenido de las caja se irá perdiendo y no aparecerá ninguna barra de scroll (La de BODY, porque nosotros la hemos desactivado, y las del resto de las cajas, porque por defecto están a 'visible' que indica que puede desbordarse el contenido, pero hasta el limite de la ventana, sin salir barras de scroll). |
| Si ahora añadimos a la caja #principal el OVERFLOW:AUTO; |
 |
| Pulsa en este link ' EJEMPLO 13 ' para ejecutarlo. |
| Vemos exactamente el efecto que antes comentamos. A la derecha de la caja #principal aparecerá una barra de scroll, porque su contenido (en este caso la caja tercera) es mayor que ella y la desborda. |
Español
English
