1 00:00:00,500 --> 00:00:10,960 Vale, pues ahora vamos a ver una propiedad que lo que hace es que controla cómo se comporta un elemento cuando dentro tiene algo que excede sus dimensiones, ¿vale? 2 00:00:11,720 --> 00:00:21,120 Entonces, como siempre, nos vamos a brackets, vamos a partir de un archivito que ya tuviésemos preparado, ¿vale? 3 00:00:22,320 --> 00:00:24,739 Aquí veis el último que hemos trabajado. 4 00:00:25,519 --> 00:00:29,760 Entonces, lo que vamos a hacer es borrar toda la parte del body. 5 00:00:32,509 --> 00:00:50,710 Y borramos todos los estilos, ¿vale? Y lo que vamos a definir, vamos a poner arriba cómo trabajar con contenidos que se desbordan, ¿vale? 6 00:00:50,710 --> 00:01:11,849 Y lo mismo en la etiqueta H1, ¿vale? Entonces, lo primero que vamos a hacer es crearnos una caja, un elemento contenedor, ¿vale? Un div. 7 00:01:12,109 --> 00:01:14,090 este div 8 00:01:14,090 --> 00:01:15,730 le vamos a poner un id que se va a llamar 9 00:01:15,730 --> 00:01:16,870 contenedor 10 00:01:16,870 --> 00:01:21,420 así, ¿vale? 11 00:01:21,760 --> 00:01:23,400 y dentro lo que vamos a poner 12 00:01:23,400 --> 00:01:24,739 tres párrafos 13 00:01:24,739 --> 00:01:27,519 y dentro de ellos texto 14 00:01:27,519 --> 00:01:29,599 lorem ipsum, ¿vale? tal que así 15 00:01:29,599 --> 00:01:31,079 ¿vale? 16 00:01:33,239 --> 00:01:33,719 entonces 17 00:01:33,719 --> 00:01:35,799 fijaros, vamos a irnos 18 00:01:35,799 --> 00:01:37,659 y vamos a editar directamente 19 00:01:37,659 --> 00:01:39,060 ese estilo contenedor 20 00:01:39,060 --> 00:01:42,620 vamos a ponerle un color de fondo 21 00:01:42,620 --> 00:01:45,299 ¿vale? 22 00:01:46,620 --> 00:01:50,799 Le vamos a poner en este caso el 11FFFF, por ejemplo, ¿vale? 23 00:01:51,540 --> 00:02:00,019 Le vamos a poner una anchura de 550 píxeles y una altura de 200 píxeles. 24 00:02:00,640 --> 00:02:10,599 Aparte le vamos a poner un borde de 5 píxeles en sólido y cuyo color sea el 44FF00, ¿vale? 25 00:02:10,599 --> 00:02:33,500 Un relleno de 5 píxeles arriba y abajo y de 20 en los laterales. ¿Vale? Y fijaros que cuando yo creo eso, pues al haber puesto yo unas dimensiones de anchura y de altura, pues veis como el elemento tiene contenido que se desborda. ¿Vale? 26 00:02:33,500 --> 00:02:38,020 Entonces, eso lo podemos controlar con una propiedad que se llama overflow, ¿vale? 27 00:02:39,599 --> 00:02:40,039 Overflow. 28 00:02:40,360 --> 00:02:44,099 Y las opciones que tenemos, pues son la opción visible, ¿vale? 29 00:02:44,120 --> 00:02:47,080 Que es la opción por defecto, que es lo que estáis viendo, que deja el elemento. 30 00:02:47,800 --> 00:02:51,000 Podemos poner la opción hidden, ¿vale? 31 00:02:52,939 --> 00:02:59,360 Que esto es para que elimine, para que oculta, lo que hace es que oculta lo que se desborda, ¿vale? 32 00:02:59,360 --> 00:03:14,719 Y por último, una opción que es la opción scroll, ¿vale? Que lo que hace es que añaden, pues, elementos para hacer scrolling dentro, ¿vale? Lo vamos a ver ahora, ¿vale? Añade un scroll, una barra de desplazamiento, en castellano sería, ¿vale? 33 00:03:14,719 --> 00:03:36,099 Entonces ponemos overflow, si yo pongo visible, pues fijaros que el efecto es el que teníamos, ¿vale? Si yo pongo hidden, todo lo que se desborda no aparece, ¿vale? Incluso fijaros que yo selecciono ese texto, pero no me sale una selección por aquí, ¿vale? 34 00:03:36,099 --> 00:03:52,099 Y yo ahora la otra opción sería poner un scroll y lo que me añade es una barra de desplazamiento hacia abajo, ¿vale? Fijaros que ocurre si yo dentro de ese div voy a añadir además otro div más, ¿vale? 35 00:03:52,099 --> 00:04:23,199 Con un ID que sea caja, ¿vale? Y no le voy a poner contenido, simplemente lo voy a modificar a esa caja, ¿vale? Y le voy a poner un color de fondo, en este caso un gris, ¿vale? Y una anchura de 645 píxeles y una altura de 150 píxeles, ¿vale? 36 00:04:23,199 --> 00:04:44,439 Entonces fijaros que al añadir ese elemento me aparece una segunda barra de scroll en el eje horizontal. ¿Por qué? Porque mi caja es más larga. ¿Vale? Si yo aquí oculto los elementos, pues fijaros, ya no me sale la barra. ¿Vale? Si los pongo visibles, pues sí me saldría. ¿Ok? 37 00:04:44,439 --> 00:05:05,199 De esta misma forma yo puedo añadir, puedo hacer un overflow tanto en el eje horizontal como en el eje vertical, ¿vale? Voy a comentar esto para que no me afecte y ahora yo podría poner overflow x, ¿vale? Y aquí podría poner hidden, ¿vale? Es decir, que me lo oculte. 38 00:05:05,199 --> 00:05:21,339 Y como veis, por defecto, me mete un scroll en el eje vertical, ¿vale? Podría poner visible, ¿vale? O podría poner un scroll, ¿vale? Entonces, a poner el scroll, ya veis que me aparece este scroll y también en el otro lado. 39 00:05:21,339 --> 00:05:39,379 Yo eso lo puedo utilizar junto con overflow en el eje vertical, ¿vale? Entonces yo aquí podría poner, por ejemplo, hidden, fijaros que ahora solo tengo scroll en el eje horizontal, ¿vale? Y podría poner aquí también visible, ¿vale? 40 00:05:39,379 --> 00:05:59,509 Entonces ahora, en el eje vertical, fijaros que prima el eje horizontal, entonces yo tendría que hacer un cambio y poner el eje vertical antes, ¿vale? A ver ahora, eso es, yo aquí esto, ¿vale? 41 00:05:59,509 --> 00:06:17,910 ¿Vale? Entonces fijaros que el overflow me lo mostraría ahí, ¿vale? Esto para trabajar con contenidos que se desbordan. Entonces, luego hay una cosa que os voy a enseñar, voy a comentar todo esto, ¿vale? 42 00:06:17,910 --> 00:06:32,410 Comentar, eso es, los estilos los puedo dejar, ¿vale? Y es cómo hacer una paginación, es decir, cómo hacer dentro de una página web bloques que sean, pues, pasar a página siguiente, pasar a página anterior, etcétera, etcétera, ¿vale? 43 00:06:32,410 --> 00:06:51,100 Para eso vamos a meter aquí un nuevo div, ¿vale? Que tiene como id paginación, ¿vale? Y dentro vamos a poner dos div con un id que sea paginación barra baja, ¿vale? 44 00:06:51,100 --> 00:07:10,300 ¿Vale? Entonces en el primero vamos a poner paginación izquierda y en el segundo paginación derecha. Y le vamos a poner como contenido siguiente y anterior. ¿Vale? Entonces si nosotros visualizamos esto, se vería tal y como estáis viendo ahora mismo. ¿Vale? 45 00:07:10,300 --> 00:07:29,720 Entonces, voy a modificar esos estilos. Voy a modificar primero el estilo de paginación, ¿vale? Voy a poner paginación, abro y cierro llave, voy a poner un color de fondo así también en gris, ¿vale? Como el anterior. 46 00:07:29,720 --> 00:07:53,620 Voy a poner una anchura de 50%, ¿vale? Y un padding de 12 píxeles, ¿vale? Tal que así se vería, ¿vale? Y ahora voy a modificar los dos elementos anteriores, paginación izquierda, y lo que voy a hacer es que sea un flotante que se quede en la izquierda, ¿vale? 47 00:07:53,620 --> 00:08:13,779 Y en el caso del derecho voy a hacer lo mismo. Paginación derecha y lo voy a convertir en un flotante que sea red, ¿vale? Pero fijaros, ¿qué pasa? Que como los elementos sobrepasan el elemento anterior, no se ven, ¿vale? 48 00:08:13,779 --> 00:08:24,300 Entonces, para que esto nos quede bien, lo que nosotros vamos a hacer es que en el elemento contenedor, que es paginación, vamos a poner un overflow y lo vamos a poner con la propiedad. 49 00:08:26,800 --> 00:08:27,240 ¿Vale? 50 00:08:27,500 --> 00:08:29,379 Y ya veis que ahora sí queda bien. 51 00:08:29,500 --> 00:08:34,019 Y si yo aquí pusiera un enlace, pues podría pasar a página siguiente, página anterior, etcétera, etcétera. 52 00:08:34,620 --> 00:08:34,799 ¿Vale? 53 00:08:36,759 --> 00:08:41,679 Bueno, más cositas sobre diferentes elementos y diferentes propiedades de hoja de estilo. 54 00:08:43,779 --> 00:08:45,259 Continuamos.