ESTRUCTURA

TEMA 4

www.laramarcos.com

4.1 BOX-MODEL

1. width 2. height3. margin4. padding5. border

www.laramarcos.com

Ancho del contenidoElementos de bloque Imágenes Filas de tabla y

grupos

ValoresMedidaauto (valor por

defecto) inherit

Alto del contenidoElementos de

bloque Imágenes Columnas de tabla

y grupos

ValoresMedidaauto (valor por

defecto) inherit

WIDTH HEIGHT

www.laramarcos.com

Margen, respecto a las demás cajas

Relleno, dentro de la propia caja

MARGIN PADDING

Shorthand: entre 1 y 4 valores 1 = todos iguales 2 = el 1º para arriba y abajo, el 2º

para derecha e izquierda 3 = el 1º para arriba, el 2º para

abajo y el 3º para derecha e izquierda

4 = uno para cada uno (agujas del reloj)

www.laramarcos.com

BORDER

shorthandMedida (grosor)Tipo: none (por defecto), hidden, solid, double,

dotted, dashed, groove, ridge, inset, outset.Color

Para los cuatro bordes (no admite {1, 4})

Si se necesita cambiar alguno en particular:border-topborder-bottomborder-rightborder-left

www.laramarcos.com

TRATAMIENTO DEL BOX-MODEL

Tamaño final del elemento = width/height + padding+ border+ margin

www.laramarcos.com

TRATAMIENTO DEL BOX-MODEL

Excepto:Si la página no lleva DOCTYPESi el DOCTYPE es anterior a HTML 4.0En IE

Las páginas codificadas con XHTML 1.0 Y que contienen la declaración de XML

www.laramarcos.com

4.2 BACKGROUND

1. color 2. image3. position4. repeat

www.laramarcos.com

BACKGROUND-COLOR

Color de fondo para toda la caja (excepto bordes)

Valores Color sólido transparent (por defecto) inherit

www.laramarcos.com

BACKGROUND-IMAGE

Imagen de fondo url (“images/fondo1.png”)

Si es más pequeña que la caja:Si se repite, ocupa toda la caja (por defecto)Si no se repite, por debajo se ve el color de

fondo

Si es más grande:Se muestra la parte que cabe en dicha caja,

por defecto empezando por la esquina superior izquierda

www.laramarcos.com

BACKGROUND-POSITION

Valores (se pueden combinar)Medidas

1 = deslazamiento horizontal (al vertical se le asigna el valor 50% o center)

2 = la 1ª desplazamiento horizontal, la 2ª vertical

Palabras clave: left, center, right / top, center, bottom 1 = deslazamiento al que haga referencia (el

otro toma el valor 50% o center) 2 = desplazamiento horizontal y vertical

(independientemente del orden)

www.laramarcos.com

BACKGROUND-REPEAT

Valores repeat (por defecto) repeat-x repeat-yno-repeat inherit

www.laramarcos.com

4.3 POSICIONAMIENTO Y VISUALIZACIÓN

1. POSICIONAMIENTOa) position

1. static (por defecto)2. relative3. absolute4. fixed

+ propiedades top, bottom, left y/o right

b) floatwww.laramarcos.com

4.3 POSICIONAMIENTO Y VISUALIZACIÓN

2. VISUALIZACIÓN1. display2. visibility3. overflow4. z-index

www.laramarcos.com

POSITION STATIC

Recursos:Tamaño (width y height)margin y paddingNaturaleza del elemento (de bloque o en

línea)

www.laramarcos.com

POSITION RELATIVE

Se indica la posición exacta mediante: top / bottom right / left

La referencia es el punto 0,0 de la página

El resto de cajas no se inmutan, respetan su hueco

Solapamiento

www.laramarcos.com

POSITION ABSOLUTE

Se indica la posición exacta mediante: top / bottom right / left

La referencia es el punto 0,0 del primer elemento contenedor

POSICIONADO

El resto de cajas se mueven, ocupan su hueco

Solapamiento www.laramarcos.com

POSITION FIXED Se indica la posición exacta mediante:

top / bottom right / left

La referencia es el punto 0,0 del primer elemento contenedor

POSICIONADO

El resto de cajas se mueven, ocupan su hueco

La diferencia, al hacer scroll: la caja SIEMPRE en el mismo sitio de la ventanawww.laramarcos.com

FLOAT

Se mueve lo más que pueda hacia laDerecha (right) Izquierda (left )

La referencia es la línea de su posición

El resto de cajas se mueven, ocupan su hueco

Solapamiento en cuanto a la caja, no a los contenidos

www.laramarcos.com

CLEAR

Para que los contenidos dejen de fluir alrededor de las cajas posicionadas con float right / leftboth (lo más habitual)

Restaura el posicionamiento static

Suele ser necesaria para aplicar CSS a los elementos contenedores de elementos float

www.laramarcos.com

CLEAR

www.laramarcos.com

DISPLAY

Valores inline / block run-in list-item / table /table-row / table-column /

table-cell / table-caption, etc.none inherit

Desaparece el elemento y sus CONTENIDOS: los demás ocupan su lugar

www.laramarcos.com

VISIBILITY

Valoresvisible (por defecto)hidden collapse inherit

Esconde el elemento y sus CONTENIDOS: los demás no se inmutan

www.laramarcos.com

OVERFLOW

Comportamiento cuando los contenidos desbordan su caja

Valoresvisible (por defecto)hidden scrollauto inherit

www.laramarcos.com

Z-INDEX

Posición en el eje z de elementos POSICIONADOS

ValoresNúmero entero (lo más habitual)

0 = la última capa El número mayor es el que se visualiza en

primer lugar

www.laramarcos.com

4.4 LAYOUT

1. Estructuras habituales2. Framework: YUI3. Centrar la página

1. Horizontalmente2. Verticalmente

www.laramarcos.com

ESTRUCTURAS

Global-local-contextual (standar) Índice Guía Mapa del sitio

TIPOS DE COMPOSICIÓN

Fija (px) Fluid/liquid (%) Elastic (em) Híbrida (la más habitual = px + %)

www.laramarcos.com

YUI

Layout híbrido probado en los principales navegadores

Cambios necesariosDOCTYPE a XHTML 1.0<meta http-equiv=“Content-Type”>

Builder (en tools)

www.laramarcos.com

CENTRAR LA PÁGINA

HorizontalmenteAgrupar todo el contenido en un divmargin: 0 auto;

Verticalmente Agrupar todo el contenido en un divDarle width y heightposition: absolute; top: 50%; left: 50%; margin-top: - (height/2) margin-left: - (width/2)

www.laramarcos.com