Posicionado flotante saregune CC 2009.

Presentación del tema: "Posicionado flotante saregune CC 2009."— Transcripción de la presentación:

1 Posicionado flotante saregune CC 2009

2 desbordamientos Desbordamientos ¿Qué hacer cuando un elemento no cabe en el espacio asignado?

3 desbordamientos Desbordamientos y ¿por qué le hemos asignado un espacio sin conocer de antemano su contenido?

4 desbordamiento 1) Ocultarlo El contenido “sobrante” no se muestra.

5 desbordamiento 2) Visible Mostrar el contenido “sobrante” aún a riesgo de sobre-escritura..

6 3) Scroll Añadir dos bonitas barras de scroll (desplazamiento)
desbordamiento 3) Scroll Añadir dos bonitas barras de scroll (desplazamiento)

7 desbordamiento 4) que decida el browser Dejar que el navegador decida la mejor solución: estirar el contenedor o añadir scroll

8 overflow: hidden ocultar visible .. scroll .. auto correción navegador
CSS overflow: hidden ocultar visible scroll auto correción navegador

9 consejos overflow: Si no forzamos tamaños, no deberemos preocuparnos por el overflow, salvo....

10 Posicionado flotante Dos elementos flotantes (son hermanos)

11 Posicionado flotante Un elementos flotante en otro

12 Posicionado flotante técnicas #contenedor { overflow: auto }
Los contenedores 'no se estiran', para acoger elementos hijos flotantes.

13 Posicionado flotante errores
sin overflow: auto, el elemento no se estira, y se sobre-escribe el siguiente.

14 Posicionado flotante técnicas controlar anchos de los elementos
¿caben los contenidos en el contenedor?

15 errores Posicionado flotante si no caben..se desplazan abajo

16 nuestro amigo IE6 correciones
es necesario añadir un elemento “rompedor” HTML: <div class='clear'></div> break CSS: div.clear { clear: both }

17 Error IE6 nuestro amigo IE6 es necesario añadir un elemento “rompedor”

18 CSS Es confuso ya que: position: no aparece float.
float: no vale con position: absolute clear: afecta display: se adecua a block, salvo none

19 CSS: float float: left | right | none | inherit
left flota a la izquierda right flota a la derecha none no flota

20 CSS: clear clear: left | right | both | inherit
left no hay flotantes a la izquierda. right no hay flotantes a la derecha. both no hay flotantes.

21 Debilidades posicionado flotante
Es difícil controlar que dos elementos flotantes, tengan la misma altura.

22 posicionado flotante solución fondo falso Fondo falso

23 posicionado flotante solución fondo falso Fondo falso