CSS Flujo y posicionamiento

Transcripción

1 Vamos a comprobar que los cuadros de las páginas web siguen un flujo natural. Además, veremos cómo podemos anular dicho flujo y colocar elementos fijos o flotantes. Existen tres posibilidades de colocar las cajas en una página web: Flujo normal Flujo Absoluto Float

2 La página web es un rio tranquilo. Normalmente, los elementos de una página web siguen el llamado document flow, el flujo del documento. Todos los elementos HTML nadan en dicho flujo. Es el estado natural de una página web, como la gravedad para los arquitectos.

3 En realidad es sencillo: Un elemento se coloca tan alto y tan a la izquierda como sea posible Al añadir otros elementos, se colocan a su derecha hasta que no hay más espacio Cuando no hay más espacio a la derecha, saltan una línea una línea abajo y vuelve a empezar por la izquierda

4 Es importante adaptarse al flujo de la página, y no luchar con él. Empezaremos estudiando el comportamiento natural de las cajas cuando no están sometidas a ninguna otra fuerza.

5 Tres cajas en el flujo HTML <body> <div>box 1</div> <div>box 2</div> <div>box 3</div> </body> CSS body { color: black; background-color: gray; padding: 0; } div { background-color: white; padding: 10px; border: 1px solid black; margin: 5px }

6 Puesto que div es un elemento de bloque, las tres cajas se encuentran una debajo de otra, aunque su contenido sea muy pequeño. Por naturaleza, un elemento de bloque impone su anchura: adopta siempre toda la anchura disponible del elemento padre, en este caso de body.

7 A continuación, los tres hermanos div se reducen a un 20% con la propiedad width. Todo lo demás es igual... div { width: 20%; background-color: white; padding: 10px; border: 1px solid black; margin: 5px }

8 Las cajas reducidas también están apiladas en vertical. div es un elemento de bloque, y los elementos de bloque tienen un salto de línea integrado. Aunque width reduce el tamaño de la caja, el salto de línea se mantiene. Este comportamiento normal de los cuadros en el flujo en CSS también se denomina position:static.

9 El posicionamiento relativo con position:relative consigue dos cosas: Desplaza la caja fuera de su posición normal en el flujo Marca la posición original del elemento como protegida Los demás elementos del documento se comportan como si el elemento todavía se encontrase en su sitio original dentro del flujo normal.

10 Tres cajas en el flujo HTML <body> <div id= otro >Box 1</div> <div>box 2</div> <div>box 3</div> </body> CSS body { color: black; background-color: gray; padding: 0; margin:; } div { background-color: white; padding: 10px; border: 1px solid black; margin: 5px }

11 Tres cajas en el flujo HTML CSS <body> <div id= otro >Box 1</div> <div>box 2</div> <div>box 3</div> </body> #otro { position: relative; top: 25px; right: 25px; background-color: #f3c600; }

12 Podrás observar que las cajas 2 y 3 no han cambiado. El posicionamiento relativo preserva el espacio original del elemento y los elementos siguientes no pasan a ocuparlo. Un elemento posicionado obtiene sus coordenadas de las propiedades top, right, bottom y left, que se calculan con respecto a la posición original en el flujo: top: 25px coloca la caja hacia abajo. Se añaden 25px desde arriba a la posición normal de la caja right: 25px desplaza la caja hacia la izquierda, de forma que en parte desaparece. Se insertan 25 px a la derecha de la posición original.

13 Todos los datos son relativos a la posición original e indican dónde se insertan el valor, y no la direccion en la que debe desplazarse la caja. En realidad es lógico, pero a primera vista position: relative puede parecer complicado.

14 A diferencia del posicionamiento relativo, el absoluto saca el elemento fuera del flujo. El elemento se eleva y todos los demás elementos de la página se comportan como si ya no estuviera allí. Vamos a mantener nuestro código HTML, y vamos a realizar el siguiente cambio en el código CSS: div { position: absolute; top: 25px;...

15 Solo cambia una palabra, pero el efecto es colosal. De repente, la caja 1 se encuentra a la derecha y las cajas 2 y 3 suben hacia arriba. Los elementos con posicionamiento absoluto salen del flujo y se colocan encima de los demás elementos. La posición exacta se indica mediante top, right, bottom o left, pero los valores de estas cuatro propiedades ya no dependen de la posición original en el flujo.

16 Los valores top, right, bottom o left dependen de: El posicionamiento absoluto de un elemento hace referencia al siguiente elemento contenedor (containing block), posicionado con relative, absolute o fixed. En el supuesto de que no haya ningún elemento contenedor (muy habitual en la práctica), el posicionamiento se efectúa en función del elemento más alto en la estructura del documento, es decir, no body sino html.

17 Esto se puede resumir de la siguiente forma: El posicionamiento absoluto es relativo a algún punto de referencia Existen dos puntos de referencia posibles: Un elemento contenedor posicionado El elemento raíz html En la rutina diaria, esto supone mucha confusión, por ello vamos a verlo en detalle.

18 Posicionamiento absoluto, relativo al elemento raíz Vamos a realizar los siguientes cambios CSS en nuestra pagcodigo.css: #encabezado p { posicion:absolute; top: 25 px; left: 50%; padding: 5px 0;...

19 Posicionamiento absoluto, relativo al elemento raíz Esto es lo que ocurre: En primer lugar, #encabezado p se extrae del flujo y ya no está presente para los demás elementos. Puesto que no hay ningún elemento contenedor, las indicaciones top: 25px y left: 50% hacen referencia al elemento html y el párrafo empieza 50px desde arriba y exactamente en la mitad de la ventada del navegador.

20 Posicionamiento absoluto, relativo al elemento raíz El posicionamiento vertical desde el margen superior de la ventana del navegador es muy preciso, pero el posicionamiento horizontal, 50% desde la izquierda, es una cuestión de suerte. Si en algún momento dejásemos de centrar la página, al párrafo posicionado le daría igual. Se mantendría en sus trece porque su punto de referencia es el elemento maestro html.

21 Posicionamiento absoluto, relativo al encabezado Lo mejor y más seguro sería posicionar el párrafo relativo al encabezado, y para lograrlo recurriremos a un sencillo truco. Consiste en convertir encabezado en un containeing block. Si posicionamos el encabezado con position:relative, pero no le atribuimos ningún valor, estará posicionado y se convertirá en el punto de referencia para el posicionamiento absoluto de #encabezado p Parece complicado? Vamos a probar...

22 Posicionamiento absoluto, relativo al encabezado Vamos a realizar los siguientes cambios CSS: #encabezado { posicion:relative; /*posicionado pero en el flujo*/ color: black;...

23 Posicionamiento absoluto, relativo al encabezado Vamos a realizar los siguientes cambios CSS: #encabezado p { posicion:absolute; top: 10 px; right: 10px; /*en lugar del 50%*/ padding: 5px 0;...

24 Posicionamiento absoluto, relativo al encabezado Esta solución ofrece varias ventajas con respecto a la primera: El punto de referencia del párrafo es #encabezado y más concretamente, el borde externo del padding superior y derecho. Si la página dejara de estar centrada, el párrafo seguiría manteniendo su posición. Es decir, el posicionamiento absoluto se vuelve relativamente flexible gracias a este truco.

25 Posicionamiento fijo El posicionamiento fijo, con position:fixed se comporta casi como position:absolute, pero con una leve diferencia: Un elemento fijo no se desplaza En los elementos fijos, el elemento contenedor es siempre la ventana del navegador. Esto es ideal para secciones de navegación.

26 Float: cuadros flotantes Además de los posicionamientos que ya hemos visto, también existe la propiedad float. A diferencia de relative, absolute y fixed, float no es un valor de la propiedad position, sino una propiedad CSS en toda regla. To float significa flotar y una caja flotante hace tres movimientos: se eleva y sale del flujo normal, flota como un globo dentro de un elemento contenedor y se desplaza hacia la izquierda o la derecha según como sople el viento.

27 Float: cuadros flotantes Uno de los usos clásicos de float es el posicionamiento de imágenes en un flujo de texto. Para ilustrarlo, descarga la imagen de un globo de google.

28 Float: cuadros flotantes Inserta el siguiente código en tu página index.html <div id= encabezado > <h2>inicio</h2> <p><img scr= balloon.jpg alt= Globo rojo width= 78 heigth= 100 > Las páginas están compuestas de...

29 Float: cuadros flotantes Y ahora modifica como sigue: <div id= encabezado > <h2>inicio</h2> <p><img scr= balloon.jpg alt= Globo rojo width= 78 heigth= 100 style= float:right; > Las páginas están compuestas de...

30 Float: cuadros flotantes Aunque el resultado todavía no es bueno, el texto fluye junto a la imagen. La imagen sigue los tres movimientos típicos de float: sale del flujo, se coloca encima de la caja contenedora p y después lo más a la derecha posible. Puesto que la imagen se encuentra dentro de p, no flota más arriba que el límite superior del párrafo. El texto del párrafo envuelve el gráfico background, padding, border y margin de p no fluyen alrededor del gráfico, sino que se colocan debajo.

31 Float: cuadros flotantes Atención, solo el texto rodea a la imagen, background, padding, border y margin están debajo. Es decir, para definir un espacio entre el texto y la imagen, lo más sencillo es asignárselo a la imagen.

32 Float: cuadros flotantes Vamos a crear una separación entre la imagen y el texto: <div id= encabezado > <h2>inicio</h2> <p><img scr= ballon.jpg alt= Globo rojo width= 78 heigth= 100 style= float:right; margin-left: 15px; > Las páginas están compuestas de...

33 Float: cuadros flotantes Vamos a crear class diferenciadas para izq y dcha:.imgizda { float:left; padding: 3px; /*distancia entre borde y texto*/ border: 5px solid #ccc; /*el borde de la img*/ margin-right: 10px; /*distancia entre borde y txt*/ margin-bottom: 10px; /*distancia hacia abajo*/ }

34 Float: cuadros flotantes Vamos a crear class diferenciadas para izda y dcha:.imgdcha { float:right; padding: 3px; /*distancia entre borde y texto*/ border: 5px solid #ccc; /*el borde de la img*/ margin-left: 10px; /*distancia entre borde y txt*/ margin-bottom: 10px; /*distancia hacia abajo*/ }

35 Float: cuadros flotantes Y ahora modifica el código html de index.html: <p><img src= balloon.jpg alt= Globo Rojo width= 98 height= 100 class= imgdcha >

36 Float y clear float suele implicar la intervención de clear. Sin clear el estado flotante se aplica a todos los elementos siguientes. En nuestro ejemplo, no solo el primer párrafo rodea la imagen, sino también todos los siguientes. Por tanto, es necesario que la imagen deje de flotar. La propiedad clear obliga a una caja a empezar debajo de un elemento flotante. clear puede tener los valores left, right o both

37 Float y clear clear:left termina un float:left clear:right termina un float:right clear:both termina ambos Por tanto, si no queremos que el segundo párrafo de texto de la página de inicio se coloque junto a la imagen, la solución es sencilla: <p style= clear:right >Los siguientes pasos muestran </p>