1
00:00:00,960 --> 00:00:05,280
Bueno, pues vamos a continuar ahora con elementos flotantes.

2
00:00:05,540 --> 00:00:16,140
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?

3
00:00:16,640 --> 00:00:24,179
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?

4
00:00:25,059 --> 00:00:29,359
Entonces, yo en este caso lo voy a hacer con texto e imágenes, ¿vale?

5
00:00:30,559 --> 00:00:37,880
Entonces, os voy a compartir la ventana del navegador, ¿vale? Del explorador.

6
00:00:39,060 --> 00:00:40,299
Se supone que la veis, ¿vale?

7
00:00:40,520 --> 00:00:44,479
Me he descargado una imagen de Pixabay, como veis, que la he llamado Loro, ¿vale?

8
00:00:45,659 --> 00:00:50,280
Y la he copiado dentro de mi carpeta Images, como hacemos siempre, ¿vale?

9
00:00:51,420 --> 00:00:58,159
Ok, entonces, partimos del archivo de brackets, ¿vale? Como siempre.

10
00:00:58,159 --> 00:01:01,960
y lo que vamos a hacer es darle a guardar como

11
00:01:01,960 --> 00:01:05,920
¿vale? y lo vamos a llamar

12
00:01:05,920 --> 00:01:09,299
elementos barra baja flotantes punto html

13
00:01:09,299 --> 00:01:16,109
¿vale? y como siempre pues voy a borrar

14
00:01:16,109 --> 00:01:20,010
toda esta parte de estilo porque no la voy a usar y borro

15
00:01:20,010 --> 00:01:23,370
todo el contenido, voy a dejarme esta cabecera y voy a poner

16
00:01:23,370 --> 00:01:27,689
elementos flotantes con css

17
00:01:27,689 --> 00:01:56,269
Y aquí vamos a poner lo mismo. Elementos flotantes con CSS. ¿Vale? Entonces, vamos primero a crearnos el contenido de la página. ¿Vale?

18
00:01:56,269 --> 00:01:58,409
article, ¿vale? Y ahora dentro

19
00:01:58,409 --> 00:02:00,129
de ese article vamos a poner en primer lugar

20
00:02:00,129 --> 00:02:02,430
la imagen del loro. Ponemos img

21
00:02:02,430 --> 00:02:04,310
y ahora me voy

22
00:02:04,310 --> 00:02:05,310
carpeta images

23
00:02:05,310 --> 00:02:08,449
loro. Y pongo

24
00:02:08,449 --> 00:02:10,449
aquí en alt imagen de un

25
00:02:10,449 --> 00:02:11,009
loro.

26
00:02:12,250 --> 00:02:14,389
Debajo me voy a poner una cabecera de tipo

27
00:02:14,389 --> 00:02:16,370
2 que lo voy a llamar

28
00:02:16,370 --> 00:02:18,310
cómo hacer hablar

29
00:02:18,310 --> 00:02:20,409
a un loro.

30
00:02:21,270 --> 00:02:22,449
¿Vale? Debajo

31
00:02:22,449 --> 00:02:24,069
me voy a poner un párrafo con un texto

32
00:02:24,069 --> 00:02:26,110
lore nipsum y

33
00:02:26,110 --> 00:02:28,849
otro párrafo con otro texto

34
00:02:28,849 --> 00:02:30,430
Lorem Ipsum, ¿vale?

35
00:02:30,969 --> 00:02:33,069
Y finalmente, abajo me voy a poner

36
00:02:33,069 --> 00:02:35,090
un enlace, que vaya

37
00:02:35,090 --> 00:02:36,830
a ningún sitio, por eso pongo la almohadilla

38
00:02:36,830 --> 00:02:38,610
y que ponga leer

39
00:02:38,610 --> 00:02:40,449
más, ¿vale?

40
00:02:43,159 --> 00:02:44,800
Luego, fuera de mi artículo

41
00:02:44,800 --> 00:02:46,699
me voy a poner un pie

42
00:02:46,699 --> 00:02:48,120
¿vale? footer

43
00:02:48,120 --> 00:02:49,419
y me voy a poner

44
00:02:49,419 --> 00:02:52,580
una cabecera de nivel 3, que ponga

45
00:02:52,580 --> 00:02:53,360
etiquetas

46
00:02:53,360 --> 00:02:56,080
y aquí me voy a copiar

47
00:02:56,080 --> 00:02:57,780
la primera frase

48
00:02:57,780 --> 00:03:08,039
del texto Lorem Ipsum, ¿vale? De tal forma que mi web sería lo que estáis viendo en pantalla, ¿vale?

49
00:03:08,520 --> 00:03:14,199
Entonces, si yo quiero que salga la imagen y a la derecha el texto, o el texto y a la derecha la imagen,

50
00:03:15,300 --> 00:03:20,159
la forma más habitual de hacer esto es con elementos flotantes, y vamos a ver cómo se hace eso.

51
00:03:21,240 --> 00:03:27,219
Nos vamos a ir a la parte de estilos, ¿vale? Y lo primero que vamos a hacer es modificar un poco la imagen,

52
00:03:27,219 --> 00:03:29,639
Para que sea un poquito más visible, ¿vale?

53
00:03:30,020 --> 00:03:36,520
Vamos a poner img y le vamos a dar una anchura del 40%, ¿vale?

54
00:03:36,740 --> 00:03:39,840
Y una altura automática, ¿vale?

55
00:03:40,439 --> 00:03:44,240
Esto hace que el navegador le asigne la altura automáticamente al lorito, ¿vale?

56
00:03:44,360 --> 00:03:49,139
Fijaros que ya queda más pequeño, más visible, ¿vale?

57
00:03:49,819 --> 00:03:54,400
Y ahora lo que vamos a hacer es flotar ese elemento, ¿vale?

58
00:03:54,539 --> 00:03:55,479
Flotar la imagen.

59
00:03:55,479 --> 00:04:03,340
Entonces, para flotar la imagen utilizamos la propiedad float, ¿vale?

60
00:04:04,080 --> 00:04:05,800
Y tenemos varias opciones.

61
00:04:06,039 --> 00:04:10,060
Tenemos nada, que sería la opción por defecto, que es lo que tiene ahora mismo.

62
00:04:10,639 --> 00:04:14,800
Tenemos la opción flotante de izquierda y flotante de derecha, ¿vale?

63
00:04:15,400 --> 00:04:19,480
Y vamos a ver cómo quedaría esto, ¿vale?

64
00:04:20,000 --> 00:04:25,500
Vamos a poner aquí float, ¿vale?

65
00:04:25,800 --> 00:04:28,339
Y fijaros que tengo aquí las propiedades, ¿vale?

66
00:04:28,339 --> 00:04:47,439
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?

67
00:04:47,439 --> 00:05:05,360
¿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.

68
00:05:05,360 --> 00:05:16,199
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?

69
00:05:16,199 --> 00:05:30,779
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,

70
00:05:30,779 --> 00:05:32,540
0,3

71
00:05:32,540 --> 00:05:34,800
¿Vale? Para la parte inferior

72
00:05:34,800 --> 00:05:36,579
Y por último

73
00:05:36,579 --> 00:05:38,660
0 para la parte de la izquierda

74
00:05:38,660 --> 00:05:40,519
¿Vale? Entonces fijaros ahora

75
00:05:40,519 --> 00:05:43,000
Como aparece una separación

76
00:05:43,000 --> 00:05:44,899
Que permite, hace más legible

77
00:05:44,899 --> 00:05:46,720
Digamos, esa zonita

78
00:05:46,720 --> 00:05:47,379
¿Vale?

79
00:05:49,350 --> 00:05:51,490
Más cositas que vamos a hacer, vamos a modificar

80
00:05:51,490 --> 00:05:53,569
El pie ¿Vale?

81
00:05:54,290 --> 00:05:55,589
Entonces, lo vamos a poner

82
00:05:55,589 --> 00:05:57,569
Y vamos a modificar el footer

83
00:05:57,569 --> 00:05:59,970
Y lo que vamos a hacer

84
00:05:59,970 --> 00:06:00,970
Es asignarle una anchura

85
00:06:00,970 --> 00:06:16,189
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?

86
00:06:16,189 --> 00:06:41,259
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?

87
00:06:41,259 --> 00:07:08,029
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?

88
00:07:08,029 --> 00:07:26,129
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?

89
00:07:26,129 --> 00:07:45,870
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?

90
00:07:45,870 --> 00:07:52,569
Entonces, en ese sentido, es bueno poner clear both, ¿vale?

91
00:07:53,089 --> 00:07:58,250
Que en este caso no afecta mucho porque este elemento flotante no afecta al footer, ¿vale?

92
00:07:58,269 --> 00:07:59,389
Pero por si afectara.

93
00:08:01,649 --> 00:08:01,870
Vale.

94
00:08:02,629 --> 00:08:06,589
Y por último, vamos a ver cómo poner texto en columna, ¿vale?

95
00:08:06,850 --> 00:08:09,550
Una cosa que se hace bastante, ¿vale?

96
00:08:09,689 --> 00:08:14,569
Entonces, nos vamos a ir aquí al final y debajo del section vamos a poner una cabecera de nivel 2

97
00:08:14,569 --> 00:08:18,350
que ponga contenido en columna, ¿vale?

98
00:08:18,350 --> 00:08:24,930
Y lo que vamos a hacer es, de nuevamente, aplicar un atajo emet, ¿vale?

99
00:08:25,269 --> 00:08:32,289
Porque vamos a poner tres elementos div que dentro tengan un párrafo y un enlace, ¿vale?

100
00:08:32,789 --> 00:08:40,090
Pues div por tres y dentro párrafo más enlace, ¿vale?

101
00:08:40,889 --> 00:08:42,970
¿Qué vamos a poner en el párrafo?

102
00:08:43,629 --> 00:08:44,509
Texto Lorem Ipsum.

103
00:08:44,570 --> 00:08:47,230
texto lore nipsum

104
00:08:47,230 --> 00:08:48,950
y texto

105
00:08:48,950 --> 00:08:50,450
lore nipsum

106
00:08:50,450 --> 00:08:52,970
y en los enlaces pues vamos a hacer en todos

107
00:08:52,970 --> 00:08:54,230
lo mismo, vamos a poner

108
00:08:54,230 --> 00:08:57,870
almohadilla y leer

109
00:08:57,870 --> 00:08:59,809
más, vale

110
00:08:59,809 --> 00:09:01,870
almohadilla

111
00:09:01,870 --> 00:09:03,769
y leer

112
00:09:03,769 --> 00:09:05,909
más

113
00:09:05,909 --> 00:09:08,509
almohadilla

114
00:09:08,509 --> 00:09:12,340
y leer más, vale

115
00:09:12,340 --> 00:09:14,559
entonces fijaros que ahora mismo

116
00:09:14,559 --> 00:09:16,480
me salen los tres elementos

117
00:09:16,480 --> 00:09:18,019
uno seguido del otro, ¿vale?

118
00:09:18,480 --> 00:09:20,539
Entonces, si yo quiero que esto aparezca en columna,

119
00:09:21,299 --> 00:09:21,840
me voy a ir,

120
00:09:23,039 --> 00:09:24,759
voy a modificar ese elemento,

121
00:09:25,399 --> 00:09:27,779
bueno, no le he puesto clase, ¿no?

122
00:09:27,840 --> 00:09:29,419
Vamos a ponerle clase, ¿vale?

123
00:09:30,720 --> 00:09:32,500
Para que sean todos de la misma clase,

124
00:09:32,720 --> 00:09:36,000
van a ser clase caja, ¿vale?

125
00:09:37,100 --> 00:09:39,139
Copiamos esto y lo pegamos en todos,

126
00:09:41,490 --> 00:09:42,190
así, ¿vale?

127
00:09:42,850 --> 00:09:44,870
Y ahora lo que vamos a hacer es

128
00:09:44,870 --> 00:09:46,750
modificar esa clase caja.

129
00:09:46,750 --> 00:10:06,230
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?

130
00:10:06,230 --> 00:10:18,809
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?

131
00:10:18,809 --> 00:10:41,210
¿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?

132
00:10:41,210 --> 00:10:43,450
Fijaros que al poner ese margen

133
00:10:43,450 --> 00:10:46,049
El tercer elemento se me va abajo

134
00:10:46,049 --> 00:10:46,470
¿Por qué?

135
00:10:46,870 --> 00:10:48,210
Porque ya empiezan a ocupar

136
00:10:48,210 --> 00:10:51,330
Al meter margen esas cajitas

137
00:10:51,330 --> 00:10:52,889
Empiezan a ocupar más, ¿vale?

138
00:10:53,129 --> 00:10:55,710
Voy a poner los bordes para que lo podamos entender mejor

139
00:10:55,710 --> 00:10:56,570
Voy a poner aquí

140
00:10:56,570 --> 00:10:57,830
Border

141
00:10:57,830 --> 00:10:59,509
Un pixel

142
00:10:59,509 --> 00:11:01,070
¿Vale?

143
00:11:01,570 --> 00:11:02,029
Fijaros

144
00:11:02,029 --> 00:11:03,289
Voy a poner

145
00:11:03,289 --> 00:11:04,629
Cero aquí

146
00:11:04,629 --> 00:11:09,090
¿Vale?

147
00:11:09,169 --> 00:11:11,610
No, y también lo podéis ver simplemente al poner el borde

148
00:11:11,610 --> 00:11:11,970
¿Vale?

149
00:11:11,970 --> 00:11:39,610
¿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?

150
00:11:39,610 --> 00:11:45,950
Si yo pusiera 0, veis que sí entra, ¿vale?

151
00:11:46,110 --> 00:11:53,610
Si yo pongo 1 y, por ejemplo, quito este 0,33, no sé si funcionará.

152
00:11:54,710 --> 00:11:56,909
Fijaros que ahora sí entra, ¿vale?

153
00:11:57,850 --> 00:12:00,070
Entonces tendríamos que jugar un poquito con eso.

154
00:12:00,350 --> 00:12:07,429
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?

155
00:12:07,429 --> 00:12:10,190
Pues tendríamos a lo mejor que bajar este porcentaje un poco

156
00:12:10,190 --> 00:12:11,090
Y bajarlo al 30

157
00:12:11,090 --> 00:12:12,970
Tampoco, el 30 tampoco funciona

158
00:12:12,970 --> 00:12:14,389
El 28, el 28 sí

159
00:12:14,389 --> 00:12:18,409
29, también, 29 también encajaría

160
00:12:18,409 --> 00:12:18,789
¿Vale?

161
00:12:19,350 --> 00:12:20,830
Entonces tendríamos que ir jugando

162
00:12:20,830 --> 00:12:24,049
Con esas cositas, con ese dimensionamiento

163
00:12:24,049 --> 00:12:24,450
¿Vale?

164
00:12:25,789 --> 00:12:28,049
Bueno, pues ya cada vez vamos viendo

165
00:12:28,049 --> 00:12:29,570
Cosas más complejitas y que le dan

166
00:12:29,570 --> 00:12:32,370
Un toque más profesional

167
00:12:32,370 --> 00:12:33,690
A nuestras páginas

168
00:12:33,690 --> 00:12:35,690
¿Vale? Buen trabajo