CSS – Layout

Modelo de cajas

El box model Es seguramente la característica más importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web. Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento.

El box model Indica como se van a disponer los contenidos en la página. Ojo, ¡que no siempre tienen el mismo comportamiento!

Anchura y altura width y heigh Valores posibles: | | auto | inherit Ejemplo: #lateral { width: 200px; }... Otros atributos: max-width min-width max-width max-heigh div { width: 300px; padding-left: 50px; padding-right: 50px; margin-left: 30px; margin-right: 30px; border: 10px solid black; }

Margen y relleno margin y padding Valores posibles: | | auto | inherit Ejemplos: div img { margin-top:.5em; margin-bottom:.5em; margin-left: 1em; margin-right:.5em; } /* otra forma mediante “shorthand” */ div img { margin:.5em.5em.5m 1em; } body {padding: 2em} /* Todos los rellenos valen 2em */ body {padding: 1em 2em} /*Sup. e inferior = 1em, Izquierdo y derecho = 2em */ body {padding: 1em 2em 3em 4em} /* Sup = 1em, der=2em, inf=3em, izq= 4em */

Comportamiento de los márgenes Cuando se juntan dos o más márgenes verticales, se fusionan de forma automática y la altura del nuevo margen será igual a la altura del margen más alto de los que se han fusionado. Si un elemento está contenido dentro de otro elemento, sus márgenes verticales se fusionan y resultan en un nuevo margen de la misma altura que el mayor margen de los que se han fusionado:

Border Si los 4 bordes son iguales, de forma más sencilla: p { border:#0000FF 5px solid; }

Layout

Display de los elementos Un elemento de tipo bloque ocupa toda la anchura disponible y tiene un salto de línea antes y después. Por ejemplo:, y Un elemento inline, ocupa exclusivamente la anchura necesaria y no presenta saltos de línea. Por ejemplo:, y Se puede cambiar el display de los elementos mediante: display:inline; display:block; Otros: visibility:hiddenNo muestra el elemento, pero ocupa su espacio display:noneEl elemento ni se muestra ni ocupa espacio

Etiquetas Div Ejemplo uso etiqueta div. Declaración css:.large { color: #00FF00; font-family:arial; font-size: 4pt; } -Div es una etiqueta para dividir el contenido en secciones individuales. Cada sección tendrá su propio diseño mediante las etiquetas class o id. - Div es un contenedor a nivel de bloque: Habrá un salta de carro después de la etiqueta. Ejemplo:

Span - Span es similar a div ya que también sirve para dividir el contenido en secciones individuales. - La diferencia es que span no es a nivel de bloque y podemos dividir incluso un solo carácter. - No hay tampoco retorno de carro después de la etiqueta. Span is not at the block level Declaración css:.largefont { color: #0066FF; font-family:arial; font-size: 6px; }

Ejercicio Crea una lista horizontal a modo de menú. Los elementos, cuándo el ratón pase por encima, deben cambiar de color.

Posición de los elementos Mediante las propiedades top, bottom, left y right Habla que establecer primero el método de posicionamiento (static | relative | absolute | fixed | inherit): Posicionamiento normal o estático: Por defecto. No afectan las propiedades top, bottom.. Los elementos se colocan según se van definiendo en la página. Posicionamiento fijo: El elemento estará en la posición indicada, incluso si hacemos scroll en la pantalla. Posicionamiento relativo: Modifica la posición del elemento respecto a su posición original (la que tendría si fuera un posicionamiento estático). Posicionamiento absoluta: El elemento se coloca en una posición relativa al primer elmento padre que no tenga una posición estática. En caso de no existir, respecto a la propia página web Ejemplo: position:fixed; top:30px; right:5px;

Posicionamiento estático El posicionamiento normal o estático es el modelo que utilizan por defecto los navegadores para mostrar los elementos de las páginas. En este modelo, ninguna caja se desplaza respecto de su posición original, por lo que sólo se tiene en cuenta si el elemento es de bloque o en línea

Posicionamiento relativo El posicionamiento relativo permite desplazar una caja respecto de su posición original establecida mediante el posicionamiento normal. El desplazamiento de una caja no afecta al resto de cajas adyacentes → se pueden producir solapamientos.

Posicionamiento absoluto Cuando una caja se posiciona de forma absoluta, el resto de elementos de la página la ignoran y ocupan el lugar original ocupado por la caja posicionada. Calculo de posición: Se toma como origen de coordenadas el primer elemento contenedor que esté posicionado de cualquier forma diferente a position: static, desde el más cercano a la caja, hasta llegar al body. La esquina superior izquierda de ese elemento contenedor posicionado es el origen de coordenadas.

Posicionamiento fijo Calculo de posición: Igual que el posicionamiento absoluto La única diferencia es que la caja permanecerá fija aunque hagamos scroll en la pantalla. Elementos sobrepuestos Si la posición de los elementos no es estática (por defecto), pueden solaparse distintos elementos. El orden de aparición de los elementos se puede fijar en función de la propiedad z- index. Los elementos con mayor valor de z-index aparecerán por encima. z-index puede tener valores positivos y negativos.

Posicionamiento con float El más complejo, pero el más utilizado. La caja se convierte en una caja flotante, “deja de pertenecer al flujo de la página” El elemento se colocará según valor “right” o “left” completamente a la derecha o a la izquierda del elemento contenedor.

Posicionamiento con float El más complejo, pero el más utilizado. La caja se convierte en una caja flotante, “deja de pertenecer al flujo de la página” El elemento se colocará según valor “right” o “left” completamente a la derecha o a la izquierda del elemento contenedor.

Float El elemento se colocará según valor “right” o “left” completamente a la derecha o a la izquierda del elemento contenedor. Los elementos posteriores se colocarán a la izquierda de un elemento con la propiedad float=right o a la derecha de un elemento con la propiedad float=left. Clear Los elementos colocados después de un elemento con el atributo float, se colocarán alrededor de el. Para evitar esta situación: uso de la propiedad clear.

Ejercicios con clear y float Realiza una página web con varias imágenes de modo que queden alineadas como se muestra:

Ejercicios con clear y float Realiza una página web con varias imágenes de modo que queden alineadas como se muestra:

Uso de capas

Ejercicio Construye el fichero css necesario. Capa1: verde, 210x300px Capa2: gris, 210x300px Uso de capas ¡Esta es mi primer capa! ¡Esta es mi segunda capa!

FICHERO CSS: #capa1{ width:210px; height:300px; background-color:green; float:left; } #capa2{ width:210px; height:300px; background-color:gray; float:left; } Uso de capas ¡Esta es mi primer capa! ¡Esta es mi segunda capa!

Ejercicio Añade un margen de separación entre las capas de 10px. Uso de capas ¡Esta es mi primer capa! ¡Esta es mi segunda capa!

FICHERO CSS: #capa1{ width:210px; height:300px; background-color:green; float:left; } #capa2{ width:210px; height:300px; background-color:gray; float:left; margin-left:10px; } Uso de capas ¡Esta es mi primer capa! ¡Esta es mi segunda capa!

Propiedad clear Seguramente cuando estés maquetando tu sitio web necesitarás tener una capa o bloque que no tenga capas a sus lados, para eso esta la propiedad CSS clear. Esta propiedad se utiliza en conjunto con float y sirve para evitar que una capa se posicione a cualquiera de los lados, los valores que admite son estos: left: no deja que una capa flote a la izquierda right: evita que una capa flote a la derecha both: evita que haya capas flotantes en cualquiera de sus lados Nosotros lo usaremos para crear, por ejemplo, el pie de pagina.

Propiedad clear Ejercicio Añade una capa tal y como muestra el dibujo, con 10px de altura.

Propiedad clear Capa 1: es la capa principal y contenedora Capa 2: capa dentro de la capa contenedora 1 y alineada a la izquierda (float:left;) Capa 3: igual que la capa 2, solo que tiene un margen con respecto a esta ultima (float:left; margin: 10px; ya veremos esto mas en detalle). #capa3{ width:430px; height:30px; background- color:orange; float:left; clear:both; }

Propiedad clear Y para que quede homogeneo.... #capa3{ width:430px; height:30px; background- color:orange; float:left; clear:both; margin-top:10px; }

Ejemplo de un diseño habitual

Contenedor general para toda la web: CSS #contenedor { width: 900px; height: 400px; } HTML Ejemplo con divs Aquí viene toda la estructura de la web y el contenido

Página html Maquetando con estilos CSS Esta es la cabecera Esta es la barra lateral Este es el contenido principal Este es el pie de pagina

Posición de los elementos #cabecera { background-color: green; height:50px; padding:5px; } #barra-lateral { background-color: orange; float: left; width:140px; height:100%; } #contenido { Background-color: gray; gray; float:left; width:740px; height:100%; } #pie { background-color: blue; clear: both; }

Centrar una página horizontalmente A medida que aumenta el tamaño y la resolución de las pantallas de ordenador, se hace más difícil diseñar páginas que se adapten al tamaño de la ventana del navegador. El principal reto que se presenta con resoluciones superiores a 1024 x 768 píxel, es que las líneas de texto son demasiado largas como para leerlas con comodidad. Por ese motivo, normalmente se opta por diseños con una anchura fija limitada a un valor aceptable para mantener la legibilidad del texto. Por otra parte, los navegadores alinean por defecto las páginas web a la izquierda de la ventana. Cuando la resolución de la pantalla es muy grande, la mayoría de páginas de anchura fija alineadas a la izquierda parecen muy estrechas y provocan una sensación de vacío. La solución más sencilla para evitar los grandes espacios en blanco consiste en crear páginas con una anchura fija adecuada y centrar la página horizontalmente respecto de la ventana del navegador.

Centrar una página horizontalmente #contenedor { width: 300px; margin: 0 auto; } Página centrada horizontalmente... Otra opción: #contenedor { width: 70%; margin: 0 auto; }

Diseño a 3 columnas

#contenedor { } #cabecera { } #menu {float: left; width: 15%;} #contenido {float: left; width: 85%;} #contenido #principal {float: left; width: 80%;} #contenido #secundario {float: left; width: 20%;} #pie { clear: both;}

Propiedad overflow Dentro de un DIV o capa puedes insertar el elemento del tipo que quieras, incluso otro DIV o varios de ellos, o imágenes, o lo que sea. Pero, ¿qué sucede si en la hoja de estilos le digo que tenga una anchura de 500 pixeles y el elemento que tiene dentro es más ancho? Overflow: visible Indica que si el elemento de dentro del DIV es de mayor tamaño en altura o anchura que el DIV que lo contiene, entonces se le dá permiso a este elemento para sobresalga del DIV. Overflow: hidden En este otro caso el elemento del interior aparece recortado de modo que solo se muestra lo que cabe dentro del DIV que lo contiene. Overflow: scroll Con esta otra opción el elemento aparece también recortado como con el hidden, pero en este caso aparecen alrededor del DIV las barras de desplazamiento para que el usuario pueda ver el resto del elemento. Overflow: auto Se mostrarán las barras de navegación necesarias (vertical, horizontal o ambas según el caso) solamente si estas son necesarias para mostrar el resto del elemento.