Saltar navegación

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

CSS - Elementos flotantes - 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.

119 visualizaciones

Más información Transcripción

Descargar la transcripción

Bueno, pues vamos a continuar ahora con elementos flotantes. 00:00:00
Para que entendamos lo que es un elemento flotante, no es más que un elemento que queráis que esté superpuesto con algo, ¿vale? 00:00:05
Puede ser una imagen, normalmente es una imagen, o puede ser una caja de texto, o puede ser lo que... realmente puede ser lo que queráis, ¿vale? 00:00:16
Entonces, yo en este caso lo voy a hacer con texto e imágenes, ¿vale? 00:00:25
Entonces, os voy a compartir la ventana del navegador, ¿vale? Del explorador. 00:00:30
Se supone que la veis, ¿vale? 00:00:39
Me he descargado una imagen de Pixabay, como veis, que la he llamado Loro, ¿vale? 00:00:40
Y la he copiado dentro de mi carpeta Images, como hacemos siempre, ¿vale? 00:00:45
Ok, entonces, partimos del archivo de brackets, ¿vale? Como siempre. 00:00:51
y lo que vamos a hacer es darle a guardar como 00:00:58
¿vale? y lo vamos a llamar 00:01:01
elementos barra baja flotantes punto html 00:01:05
¿vale? y como siempre pues voy a borrar 00:01:09
toda esta parte de estilo porque no la voy a usar y borro 00:01:16
todo el contenido, voy a dejarme esta cabecera y voy a poner 00:01:20
elementos flotantes con css 00:01:23
Y aquí vamos a poner lo mismo. Elementos flotantes con CSS. ¿Vale? Entonces, vamos primero a crearnos el contenido de la página. ¿Vale? 00:01:27
article, ¿vale? Y ahora dentro 00:01:56
de ese article vamos a poner en primer lugar 00:01:58
la imagen del loro. Ponemos img 00:02:00
y ahora me voy 00:02:02
carpeta images 00:02:04
loro. Y pongo 00:02:05
aquí en alt imagen de un 00:02:08
loro. 00:02:10
Debajo me voy a poner una cabecera de tipo 00:02:12
2 que lo voy a llamar 00:02:14
cómo hacer hablar 00:02:16
a un loro. 00:02:18
¿Vale? Debajo 00:02:21
me voy a poner un párrafo con un texto 00:02:22
lore nipsum y 00:02:24
otro párrafo con otro texto 00:02:26
Lorem Ipsum, ¿vale? 00:02:28
Y finalmente, abajo me voy a poner 00:02:30
un enlace, que vaya 00:02:33
a ningún sitio, por eso pongo la almohadilla 00:02:35
y que ponga leer 00:02:36
más, ¿vale? 00:02:38
Luego, fuera de mi artículo 00:02:43
me voy a poner un pie 00:02:44
¿vale? footer 00:02:46
y me voy a poner 00:02:48
una cabecera de nivel 3, que ponga 00:02:49
etiquetas 00:02:52
y aquí me voy a copiar 00:02:53
la primera frase 00:02:56
del texto Lorem Ipsum, ¿vale? De tal forma que mi web sería lo que estáis viendo en pantalla, ¿vale? 00:02:57
Entonces, si yo quiero que salga la imagen y a la derecha el texto, o el texto y a la derecha la imagen, 00:03:08
la forma más habitual de hacer esto es con elementos flotantes, y vamos a ver cómo se hace eso. 00:03:15
Nos vamos a ir a la parte de estilos, ¿vale? Y lo primero que vamos a hacer es modificar un poco la imagen, 00:03:21
Para que sea un poquito más visible, ¿vale? 00:03:27
Vamos a poner img y le vamos a dar una anchura del 40%, ¿vale? 00:03:30
Y una altura automática, ¿vale? 00:03:36
Esto hace que el navegador le asigne la altura automáticamente al lorito, ¿vale? 00:03:40
Fijaros que ya queda más pequeño, más visible, ¿vale? 00:03:44
Y ahora lo que vamos a hacer es flotar ese elemento, ¿vale? 00:03:49
Flotar la imagen. 00:03:54
Entonces, para flotar la imagen utilizamos la propiedad float, ¿vale? 00:03:55
Y tenemos varias opciones. 00:04:04
Tenemos nada, que sería la opción por defecto, que es lo que tiene ahora mismo. 00:04:06
Tenemos la opción flotante de izquierda y flotante de derecha, ¿vale? 00:04:10
Y vamos a ver cómo quedaría esto, ¿vale? 00:04:15
Vamos a poner aquí float, ¿vale? 00:04:20
Y fijaros que tengo aquí las propiedades, ¿vale? 00:04:25
Vamos a escoger Left, ¿vale? Entonces fijaros que ahora aparece mi loro a la izquierda y a la derecha aparece el texto, ¿vale? Vamos a ponerle un poquito más grande el tamaño de la imagen, vamos a ponerle un 70%, bueno, tanto no, un 50%, ¿vale? 00:04:28
¿Vale? Fijaros que si yo ahora en vez de poner left pongo right, la imagen aparecería a la derecha, ¿vale? Voy a dejarla en este caso a la izquierda. Pero, como veis, la imagen aparece muy cerca del texto y yo quiero separarla un poquito. 00:04:47
Para eso, ¿qué hacemos entonces? Pues ponemos márgenes, ¿vale? Entonces, en este caso, pues yo voy a poner un margin, podría poner un margin left o un margin right, ¿vale? 00:05:05
Pero voy a poner la propiedad margin, que es genérica, voy a poner 0,3M, que sería para la parte de arriba, 0, que sería para la parte de la izquierda, de la derecha, perdón, 0,9, que sería para la parte de la derecha, 00:05:16
0,3 00:05:30
¿Vale? Para la parte inferior 00:05:32
Y por último 00:05:34
0 para la parte de la izquierda 00:05:36
¿Vale? Entonces fijaros ahora 00:05:38
Como aparece una separación 00:05:40
Que permite, hace más legible 00:05:43
Digamos, esa zonita 00:05:44
¿Vale? 00:05:46
Más cositas que vamos a hacer, vamos a modificar 00:05:49
El pie ¿Vale? 00:05:51
Entonces, lo vamos a poner 00:05:54
Y vamos a modificar el footer 00:05:55
Y lo que vamos a hacer 00:05:57
Es asignarle una anchura 00:05:59
en este caso del 95%, ¿vale? Una altura que va a ser de auto, automática. Le vamos a poner un tamaño de letra un poquito más pequeño, de 0.95 rem, ¿vale? 00:06:00
Le vamos a poner un margen superior de 2M, ¿vale? Y un relleno en todos los lados, ¿vale? De, en el superior de 0.2, en los laterales de 1 y en la zona inferior de 2, ¿vale? 00:06:16
Entonces, lo voy a poner con comentarios para que os quede claro. Sería 0.2M en top, 1M en los laterales y 2M en el botón, ¿vale? Y por último le vamos a poner un borde de un píxel sólido, ¿vale? Tal y como lo estáis viendo, ¿vale? 00:06:41
Entonces fijaros y si hacéis memoria con respecto a lo que hicimos en algunos de los ejemplos que hemos visto durante el curso, ya esto empezaría a tener más forma de web que simplemente ir tirando ahí contenido como íbamos haciendo al principio, ¿vale? 00:07:08
Entonces, siempre es recomendable que aquí además pongamos una propiedad, ¿vale? Es una propiedad que lo que hace es que este elemento no cambie de posición a pesar de que haya algunos que floten, ¿vale? 00:07:26
Entonces, en ese sentido, es bueno poner clear both, ¿vale? 00:07:45
Que en este caso no afecta mucho porque este elemento flotante no afecta al footer, ¿vale? 00:07:53
Pero por si afectara. 00:07:58
Vale. 00:08:01
Y por último, vamos a ver cómo poner texto en columna, ¿vale? 00:08:02
Una cosa que se hace bastante, ¿vale? 00:08:06
Entonces, nos vamos a ir aquí al final y debajo del section vamos a poner una cabecera de nivel 2 00:08:09
que ponga contenido en columna, ¿vale? 00:08:14
Y lo que vamos a hacer es, de nuevamente, aplicar un atajo emet, ¿vale? 00:08:18
Porque vamos a poner tres elementos div que dentro tengan un párrafo y un enlace, ¿vale? 00:08:25
Pues div por tres y dentro párrafo más enlace, ¿vale? 00:08:32
¿Qué vamos a poner en el párrafo? 00:08:40
Texto Lorem Ipsum. 00:08:43
texto lore nipsum 00:08:44
y texto 00:08:47
lore nipsum 00:08:48
y en los enlaces pues vamos a hacer en todos 00:08:50
lo mismo, vamos a poner 00:08:52
almohadilla y leer 00:08:54
más, vale 00:08:57
almohadilla 00:08:59
y leer 00:09:01
más 00:09:03
almohadilla 00:09:05
y leer más, vale 00:09:08
entonces fijaros que ahora mismo 00:09:12
me salen los tres elementos 00:09:14
uno seguido del otro, ¿vale? 00:09:16
Entonces, si yo quiero que esto aparezca en columna, 00:09:18
me voy a ir, 00:09:21
voy a modificar ese elemento, 00:09:23
bueno, no le he puesto clase, ¿no? 00:09:25
Vamos a ponerle clase, ¿vale? 00:09:27
Para que sean todos de la misma clase, 00:09:30
van a ser clase caja, ¿vale? 00:09:32
Copiamos esto y lo pegamos en todos, 00:09:37
así, ¿vale? 00:09:41
Y ahora lo que vamos a hacer es 00:09:42
modificar esa clase caja. 00:09:44
Para modificar clase ponemos el punto, ¿vale? Y lo que hacemos es lo siguiente. Vamos a ponerle anchura a cada uno de esos elementos caja, ¿vale? Y le vamos a poner del 33,33%, ¿vale? 00:09:46
Para que cada caja ocupe lo mismo. Y le vamos a poner que floten hacia la izquierda, ¿vale? Y fijaros que ya tenemos aquí tres elementos, ¿vale? 00:10:06
¿Vale? Aparecen entre todos muy pegados, si os dais cuenta, ¿vale? Y fijaros que ocurre si yo ahora mismo aquí añado un margen. Por ejemplo, voy a poner un margen de arriba y abajo de 0M, ¿vale? Y en los laterales voy a poner un margen de 1M, ¿vale? 00:10:18
Fijaros que al poner ese margen 00:10:41
El tercer elemento se me va abajo 00:10:43
¿Por qué? 00:10:46
Porque ya empiezan a ocupar 00:10:46
Al meter margen esas cajitas 00:10:48
Empiezan a ocupar más, ¿vale? 00:10:51
Voy a poner los bordes para que lo podamos entender mejor 00:10:53
Voy a poner aquí 00:10:55
Border 00:10:56
Un pixel 00:10:57
¿Vale? 00:10:59
Fijaros 00:11:01
Voy a poner 00:11:02
Cero aquí 00:11:03
¿Vale? 00:11:04
No, y también lo podéis ver simplemente al poner el borde 00:11:09
¿Vale? 00:11:11
¿Vale? Fijaros que en el momento en el que yo pongo el borde, una caja se me va hacia abajo. ¿Por qué? Porque las cajas dejan de ocupar todas lo mismo. Bueno, perdón. Las cajas ya no ocupan el 33,33% de la página. Ocupan un poquito más. Ocupan dos píxeles más cada una. ¿Por qué? Porque ahora tenemos el 33,3% más un píxel del borde izquierdo y un píxel del borde derecho. ¿Vale? 00:11:11
Si yo pusiera 0, veis que sí entra, ¿vale? 00:11:39
Si yo pongo 1 y, por ejemplo, quito este 0,33, no sé si funcionará. 00:11:46
Fijaros que ahora sí entra, ¿vale? 00:11:54
Entonces tendríamos que jugar un poquito con eso. 00:11:57
Si yo ahora pongo aquí, como decía antes, los márgenes de 0 en y 1 en, fijaros que otra vez se han ido, ¿vale? 00:12:00
Pues tendríamos a lo mejor que bajar este porcentaje un poco 00:12:07
Y bajarlo al 30 00:12:10
Tampoco, el 30 tampoco funciona 00:12:11
El 28, el 28 sí 00:12:12
29, también, 29 también encajaría 00:12:14
¿Vale? 00:12:18
Entonces tendríamos que ir jugando 00:12:19
Con esas cositas, con ese dimensionamiento 00:12:20
¿Vale? 00:12:24
Bueno, pues ya cada vez vamos viendo 00:12:25
Cosas más complejitas y que le dan 00:12:28
Un toque más profesional 00:12:29
A nuestras páginas 00:12:32
¿Vale? Buen trabajo 00:12:33
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
119
Fecha:
22 de febrero de 2021 - 21:31
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
12′ 36″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
42.05 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid