Layout

Contenedores

Contenedores

​

<div> & <span>

​

• Son simples contenedores de HTML.
• Los div y span como todos los elementos, tienen las propiedades class o id.
• Es importante elegir un nombre de clase o id con sentido en el contexto.

​

​

​

​

​

​

​

​

Div & Span

DIV

• Es un elemento que define un bloque
• Generalmente para secciones largas del sitio
• Puede incluir varios elementos
• Nos ayuda a construir el layout y el diseño

​

SPAN

• Es un elemento “inline”
• Usado para agrupar texto, palabras o frases. Por ejemplo dentro de un párrafo

​

​

​

​

​

​

​

​

CodePen.io: Probémoslo en vivo

Cada vez que veas este ícono o un link a codepen.io tenés el código que hacemos en clase para probarlo y modificarlo vos.

Trabajar en clase con el código básico. Agregar y probar variantes del ejemplo, cambiar valores numéricos para ver qué efecto tienen

​

CodePen.io: Probémoslo en vivo

CodePen es una comunidad en línea para probar y mostrar fragmentos de código HTML, CSS y JavaScript.

Bloque <div> ... </div>

• Por defecto el elemento empieza en una nueva línea de la página y ocupa todo el ancho disponible
• Se pueden anidar uno dentro de otro

​

​

http://codepen.io/webUnicen/pen/mWxpYM

Bloque <span> ... </span>

• Están dentro del texto, no en una línea nueva
• Su ancho depende del contenido que tengan
• No pueden anidarse con otro elemento de bloque
• Pero si se pueden anidar con otro elemento inline

Live: http://codepen.io/webUnicen/pen/XMEVvW

<p>Ejemplo de span con clase <span class="inline1">inline 1</span></p>�<p>Ejemplo de span con clase <span class="inline2">inline 2</span></p>�<p>Ejemplo de span con clase <span class="inline1">inline 1 y inline 2 <span class="inline2">anidadas</span> </span> </p>

Ejercicio

Agregar a la página que venían haciendo:

• Un div que incluya varios elementos (título, párrafo, listas, etc), darle un estilo
• Más de un span en párrafos, darle un estilo

​

​

​

​

​

​

Box Model

Box Model - Introducción

El concepto de “Box Model” dice que cada elemento �en una página se representa mediante una caja rectangular (contenedor).

​

• CSS permite controlar el aspecto y ubicación de las cajas.
• Todos los elementos HTML están representados como cajas. Es común que fondo y borde no sean visibles a simple vista, pero el concepto de Box Model siempre es utilizado
• Este concepto es difícil de entender, pero fundamental para construir y diagramar sitios

Box Model - ¿Donde están los bloques?

Box Model - Developer Tools (add on)

​

​

​

​

​

​

​

​

​

​

Marcado de elemento de bloque con la herramienta Web Developer, Add-On de Chrome / Firefox para desarrollo (Outline > Outline Block Elements)

https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

​

Modelo

Usemos contenedores

HTML

<div class="encabezado">� encabezado�</div>��<div class="cuerpo">� cuerpo�</div>��<div class="pie">� pie�</div>

CSS

.encabezado {� height: 90px;� text-align: left;� background-color: #CCCCCC;�}��.cuerpo {� background-color: #666666;� color: white;� height: 300px�}��.pie {� background-color: #00CCFF;� height: 50px�}

Box Model

CSS utiliza el modelo de cajas / bloques que consta de 4 partes:

• CONTENT
• PADDING
• BORDER
• MARGIN

Box Model - CONTENT

• CONTENT
• PADDING
• BORDER
• MARGIN

ALTO (height) y ANCHO (width) de un elemento.

Box Model - PADDING

• CONTENT
• PADDING
• BORDER
• MARGIN

Usado para generar espaciado o margen INTERIOR transparente dentro de un elemento.

Box Model - BORDER

• CONTENT
• PADDING
• BORDER
• MARGIN

Se utiliza para bordear con una línea alrededor del elemento.

Box Model - MARGIN

• CONTENT
• PADDING
• BORDER
• MARGIN

PUEDE USARSE PARA SEPARAR BLOQUES

Usado para generar margen EXTERIOR transparente fuera de un elemento.

Box Model

Live: http://codepen.io/webUnicen/pen/yMRawg

Box Model

Live: https://codepen.io/webUnicen/pen/qoRRqY

Y si usamos tamaños de propiedades irregulares?

margin-top

margin-bottom

margin-left

margin-right

​

padding-top

padding-bottom

padding-left

padding-right

Box Model - Calculando el Tamaño

​

​

​

​

​

​

​

​

Para calcular el alto total y ancho total del element hacemos:

Ancho:

width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

600px + 20px + 20px + 4px + 4px + 50px + 50px = 748

Height:

height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

250px + 20px + 20px + 4px + 4px + 50px + 50px = 398

​

​

Live: http://codepen.io/ignaciojonas/pen/bpLwQJ

​

div {

width: 600px;

height: 250px;

background-color: lightblue;

padding: 20px;

border: 4px;

border-style: solid;

border-color: pink;

margin: 50px;

}

​

Live: http://codepen.io/webUnicen/pen/yMRawg

​

​

​

Box Model - Border

También se pueden definir bordes irregulares

​

​

http://codepen.io/webUnicen/pen/aJRmqL

​

​

Tipos de bordes

inset

dashed

double

groove

hidden

dotted

none

outset

ridge

solid

inherit

​

https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#Values

Height & Width: Datos extras

• Todos los elementos tienen un alto y ancho heredado.
• Si algún elemento es clave para el layout o diseño de la página seguramente tenga un ancho y alto específico.
• El ancho default de un elemento depende de su tipo.
• Los elementos de bloque tienen un ancho default de 100%.
• Los elementos inline, ocupan solo el tamaño de lo que contienen.
• Como los elementos inline no pueden tener un tamaño fijo las propiedades width y height se reservan para los elementos de bloque.

​

Unidades de Medida

Unidades de medida

CSS divide las unidades de medida en dos grupos

​

ABSOLUTAS: pixeles (px) (pt - mm - cm)

Están completamente definidas, ya que su valor no depende de otro valor de referencia.

• Ajustan tamaños fijos en los navegadores y pantallas.
• Poca flexibilidad.
• Sirve cuando conocemos tamaños de las salidas.

​

RELATIVAS: porcentaje (%) (em - rem - vw - vh)

No están completamente definidas, ya que su valor siempre es dependiente respecto a otro valor de referencia padre.

• Permiten ajustes con cambios de tamaños de pantalla.
• Mayor flexibilidad.

​

​

​

Pixeles [px] vs Porcentuales [%]

Live:https://codepen.io/webUnicen/pen/xWXOOK

Medida “Auto”

La opción auto significa “expandir” o ajustar automáticamente un tamaño.

​

Para centrar un bloque:

.bloque {

width: 100px;

margin: 0 auto;

}

​

Para hacerlo ocupar el máximo espacio

.bloque {

width: auto;

}

Medida “Auto”

Live: http://codepen.io/webUnicen/pen/qrQzQd

HTML

​

<div class="bloque1">� <h1>Bloque 1 </h1>�</div>�<div class="bloque2">� <h1>Bloque 2</h1>�</div>�<div class="bloque3">� <h1>Bloque 3</h1>� <div class="bloque1">� <h1>Bloque 1 </h1>� </div>� <div class="bloque2">� <h1>Bloque 2</h1>� </div>�</div>

​

​

​

CSS

​

div.bloque1 {

width: 200px;

margin: 0 auto;

border: 3px solid;

}

​

div.bloque2 {

width: auto;

border: 3px solid red;

}

​

div.bloque3 {

width: 700px;

border: 3px solid red;

margin: 0 auto;

}

​

​

Posicionando elementos con opción “auto”

Tipos de cajas

Pregunta

​

¿Pero cómo hacemos si queremos posicionar elementos de una manera más avanzada?

Layout - Un bosquejo

​

¿Cómo queremos que se vea?

​

EXPECTATIVA

REALIDAD

Posicionamiento - Bloques flujo normal sin posicionamiento

¿Qué pasó?

• Definimos medidas de las columnas, pero el flujo de la página las apilo una abajo de otra.
• Cada caja pone un “enter”

Tipos de Cajas (Type of Boxes)

CSS puede definir la manera en la que los elementos de una página “encajan” uno con otros.

�Estas maneras se pueden categorizar en:

• BLOCK
• INLINE

​

Se controlan con la propiedad display.

​

elemento {

display: block | inline ;

}

​

​

​

​

​

Tipos de Cajas - Block vs Inline

• Ocupan el ancho total del elemento contenedor.
• Las dimensiones son controlables.
• Insertan un salto de línea en el flujo al terminar.

• Ocupan el ancho total de su contenido.
• Las dimensiones no son fácil de controlar.
• Se alinea al texto.

element-1 {display: block}

element-2 {display: block}

element-3 {display: block}

element-4 {display: block}

<h1>...<h5>, <p>, <div> ....

element-1 { display: inline}

<a>, <span>, <strong>, <img> ...

element-2 { display: inline}

element-3 { display: inline}

Tipos de Cajas - Block vs Inline

Las cajas block por defecto se apilan una encima de otra.

Las cajas inline no mueven los elementos alrededor de ellas.

Este es un simple párrafo de ejemplo.

Este es otro simple párrafo de ejemplo.

BLOCK BOX

INLINE BOX

Otras Propiedades de Posicionamiento

display: inline-block; es una combinación de los dos tipos anteriores.

​

​

​

​

​

​

​

https://codepen.io/webUnicen/pen/RMJZGz

​

display: none;

oculta el elemento de la página.

​

Se usa comúnmente con JavaScript para ocultar y mostrar elementos sin eliminarlos ni volver a crearlos.

​

​

​

​

​

​

​

​

Botonera

Hagamos una botonera para nuestro sitio

Podemos usar una lista:

​

<ul class=”navigation”>

<li>Home</li>

<li>Productos</li>

<li>Nosotros</li>

<li>Contacto</li>

</ul>

• Home
• Productos
• Nosotros
• Contacto

¿Cómo hacemos para que se vea como una botonera?

https://codepen.io/webUnicen/pen/oqybjQ

Flotar

Flotar Elementos

La propiedad CSS float permite a los elementos colocarse del lado izquierdo o derecho de su contenedor, permitiendo que el texto y los elementos en línea se envuelvan alrededor de él.

​

​

​

​

​

​

​

​

​

​

Ref: https://developer.mozilla.org/en/docs/Web/CSS/float

​

• A diferencia de inline-block podemos indicar cómo se posicionan los elementos dentro del flujo de la página (izquierda/ derecha y como se comportan algunos elementos por dentro).
• Muy útil para diseñar el layout del sitio.

Layouts usando float

​

Creemos el layout de ejemplo flotando los elementos

​

​

​

​

​

​

​

​

.izquierda {� float: left;� width: 400px;� background-color: #333333;� color: white;�}

.derecha {� float: left;� width: 300px;� background-color: #666666;� color: white;�}

https://codepen.io/webUnicen/pen/wmXqQg

Flotar Elementos - Cosas Importantes

• Cuando se flotan elementos, van a ir hasta el borde de su contenedor padre.

​

• Si no tiene padre, va a ir hasta el borde de la página.

​

• Si tengo muchos elementos flotados a la derecha, se van a acomodar uno al lado de otro según el flujo de la misma página.

Limpiando elementos flotados

• Cuando un elemento es flotado, rompe con el flujo normal de la página.

​

• A veces esto es bueno y esperable.

​

• Para poder flotar un elemento y luego

volver al flujo normal de la página siempre

usar la propiedad “clear”.

​

• Cuando un elemento tiene esa propiedad, a partir de ese punto en adelante la página vuelve al flujo normal.

​

Ref: https://developer.mozilla.org/en/docs/Web/CSS/clear

​

Flotar Elementos

Live:https://codepen.io/webUnicen/pen/qrwLZg

• Analizar que sucede al modificar el tamaño de la ventana del navegador.
• Hacer que el div de la derecha flote a la izquierda, y notar que cambios se producen.
• Quitar el clear del pie

Flotar Elementos

Ejemplo con muchos “centro”:

Probar achicar la ventana y ver como se bajan las cosas

https://codepen.io/webUnicen/pen/XMwOgL

Position

Posicionamiento

• Muy útil cuando queremos posicionar elementos fuera del flujo normal de la página
• Es fundamental interpretar el funcionamiento del posicionamiento para poder dar la ubicación exacta a cada elemento dentro del Box Model. Dependiendo de cual sea la propiedad que usemos, el elemento tomará una referencia u otra para posicionarse.

​

​

static | absolute | relative | fixed | sticky

La propiedad position sirve para posicionar un elemento dentro de la página.

​

​

Posicionando Elementos

La propiedad “position” que posee diferentes valores.

​

• static: valor por default. Mantiene el elemento en el flujo normal.
• relative: permite usar propiedades como top, right, bottom y left para mover el elemento en la página.
• absolute: funciona con las mismas propiedades, pero rompen el flujo normal. Se corresponden con la posición de un ancestro (el primero que tiene position no static).
• fixed: funciona con las mismas propiedades, pero rompe el flujo normal. Al punto que establece una posición fija en la pantalla.
• sticky: el elemento es posicionado en base al scroll del usuario.

​

​

https://developer.mozilla.org/es/docs/Web/CSS/position

Posicionando Elementos - Relative + Absolute

El posicionamiento de <ul> es respecto de su padre <div>

Live: http://codepen.io/webUnicen/pen/XMQQWE

Posicionando Elementos - Absolute

Comentamos “position: relative” del div.

No tiene efecto top: 50px.

​

El posicionamiento de <ul> ahora es desde el root element, no de <div>

Live: http://codepen.io/webUnicen/pen/GWLLRR

Posicionando Elementos

absolute , ahora <ul> no está dentro de <div> ( ya no son anidados)

​

​

​

​

​

​

​

​

​

​

​

Live: http://codepen.io/webUnicen/pen/EWJMqL

​

<div> es relative, tiene efecto top: 50px.

<ul> también es respecto del root element (<body>)

Hacer un layout completo

Sugerencia

Hacer un diagrama del layout en papel, lo más completo posible y con sus medidas. (wireframe)

​

​

​

​

​

​

Un vez que se tiene una idea clara del diseño que se desea lograr, comenzar a escribir código para ajustarlo al diseño.

Ejercicio

Realizar una página que contenga:

• Dos o más divs, uno dentro del otro.
• A cada uno darle las propiedades vistas (borde, padding, margen, tamaño) y contenido (títulos, párrafo, imagen).
• Probar cómo se modifica la apariencia cambiando el tamaño, el padding, márgenes y bordes.
• Agregar div con tamaño en porcentaje, ver qué sucede cuando achicamos la ventana

del navegador.

​

​

​

​

​

​

Ejercicio

Modificar el ejemplo para que la página quede con un modelo como el siguiente

​

​

​

​

​

​

​

​

Experimenten distintos valores de las propiedades de las cajas, de las propiedades float y clear. Es importante que comprendan cómo funcionan.

​

Referencias

Unidades en CSS https://www.w3.org/Style/Examples/007/units.en.html

​

​

​

HTML & CSS - Design and Build Websites.

JON DUCKETT

https://drive.google.com/open?id=0B4N5SXjhTVLtMnItSkpNTXktaEE

​

​

​

CSS - the missing manual.

DAVID SAWYER MCFARLAND

https://drive.google.com/open?id=0B4N5SXjhTVLtaWJDWDlaR3BJTkk

​

​

​

AHORA LES TOCA PRACTICAR :D

Extras

Exceso de Contenido

overflow: controla lo que sucede cuando el contenido excede a las dimensiones del bloque.

Las opciones son: auto, hidden, scroll, visible, inherit

​

​

​

​

​

​

​

​

​

Live: http://codepen.io/webUnicen/pen/GWLebK

​

​

Ejercicio

1. Hacer un bloque.
2. Agregarle contenido que desborde las dimensiones, por ejemplo un párrafo.
3. Aplicar la propiedad overflow con las distintas variantes para ver cómo funciona cada una.

Encimando elementos

z-index : Cuando se superponen dos o más elementos se puede decidir cual queda por encima o por debajo.

Sirve para establecer el orden de los fondos con fotos, transparencias, texto, etc. Se pueden entender como capas

​

Encimando elementos

Las opciones son auto, number, inherit

Ejemplo:

​

​

​

​

​

​

​

en este caso box3 tiene prioridad al frente, luego box2 y por último box1 al fondo.

http://codepen.io/webUnicen/pen/ZeZdBO

​

.box1 {

z-index: -1;

}

.box2 {

z-index: 1;

}

.box3 {

z-index: 2;

}

Herramientas

Box Model - Herramientas Chrome

​

​

​

​

​

​

​

​

​

​

Marcado con la herramienta de desarrollo de Chrome. Menú > Más Herramientas >Herramientas de desarrollador

( Ctrl + Mayusc. + I )

Box Model - Herramientas, Firebug

​

​

​

​

​

​

​

​

​

​