Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

CSS - Propiedad Overflow - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 22 de febrero de 2021 por Fernando M.

112 visualizaciones

Más información Transcripción

Descargar la transcripción

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? 00:00:00
Entonces, como siempre, nos vamos a brackets, vamos a partir de un archivito que ya tuviésemos preparado, ¿vale? 00:00:11
Aquí veis el último que hemos trabajado. 00:00:22
Entonces, lo que vamos a hacer es borrar toda la parte del body. 00:00:25
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? 00:00:32
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. 00:00:50
este div 00:01:12
le vamos a poner un id que se va a llamar 00:01:14
contenedor 00:01:15
así, ¿vale? 00:01:16
y dentro lo que vamos a poner 00:01:21
tres párrafos 00:01:23
y dentro de ellos texto 00:01:24
lorem ipsum, ¿vale? tal que así 00:01:27
¿vale? 00:01:29
entonces 00:01:33
fijaros, vamos a irnos 00:01:33
y vamos a editar directamente 00:01:35
ese estilo contenedor 00:01:37
vamos a ponerle un color de fondo 00:01:39
¿vale? 00:01:42
Le vamos a poner en este caso el 11FFFF, por ejemplo, ¿vale? 00:01:46
Le vamos a poner una anchura de 550 píxeles y una altura de 200 píxeles. 00:01:51
Aparte le vamos a poner un borde de 5 píxeles en sólido y cuyo color sea el 44FF00, ¿vale? 00:02:00
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? 00:02:10
Entonces, eso lo podemos controlar con una propiedad que se llama overflow, ¿vale? 00:02:33
Overflow. 00:02:39
Y las opciones que tenemos, pues son la opción visible, ¿vale? 00:02:40
Que es la opción por defecto, que es lo que estáis viendo, que deja el elemento. 00:02:44
Podemos poner la opción hidden, ¿vale? 00:02:47
Que esto es para que elimine, para que oculta, lo que hace es que oculta lo que se desborda, ¿vale? 00:02:52
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? 00:02:59
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? 00:03:14
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? 00:03:36
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? 00:03:52
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? 00:04:23
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. 00:04:44
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. 00:05:05
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? 00:05:21
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? 00:05:39
¿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? 00:05:59
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? 00:06:17
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? 00:06:32
¿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? 00:06:51
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. 00:07:10
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? 00:07:29
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? 00:07:53
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. 00:08:13
¿Vale? 00:08:26
Y ya veis que ahora sí queda bien. 00:08:27
Y si yo aquí pusiera un enlace, pues podría pasar a página siguiente, página anterior, etcétera, etcétera. 00:08:29
¿Vale? 00:08:34
Bueno, más cositas sobre diferentes elementos y diferentes propiedades de hoja de estilo. 00:08:36
Continuamos. 00:08:43
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
112
Fecha:
22 de febrero de 2021 - 21:32
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
08′ 45″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
27.97 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid