1
00:00:00,552 --> 00:00:02,407
Estou criando uma
página para o Hopper,
2
00:00:02,407 --> 00:00:04,554
um dos nossos "avatars"
aqui no Khan Academy.
3
00:00:04,554 --> 00:00:09,813
Ela tem uma imagem, alguns
links legais e um parágrafo.
4
00:00:11,034 --> 00:00:15,893
Acho que essa imagem do Hopper
ficaria melhor ao lado do parágrafo,
5
00:00:15,893 --> 00:00:19,846
então irei recortar e colar aqui embaixo.
6
00:00:21,324 --> 00:00:24,002
Isso não ficou tão bom quanto
eu esperava que ficasse.
7
00:00:24,002 --> 00:00:26,356
O texto começa em baixo da imagem.
8
00:00:26,369 --> 00:00:29,170
Eu esperava que o texto
ficasse envolta da imagem,
9
00:00:29,170 --> 00:00:31,113
como em um jornal ou uma revista.
10
00:00:31,641 --> 00:00:34,701
Iremos precisar de uma nova
propriedade do CSS para isso: float.
11
00:00:34,701 --> 00:00:38,178
É uma maneira de flutuar dentro ou
ao redor de outros elementos,
12
00:00:38,178 --> 00:00:40,579
e é perfeito para envolver
a imagem com o texto.
13
00:00:40,854 --> 00:00:45,368
Então nós vamos em cima para
nossa regra pic, e dizemos: float.
14
00:00:45,368 --> 00:00:48,555
Para o valor, precisamos decidir se
queremos que a imagem flutue
15
00:00:48,555 --> 00:00:50,693
para o lado esquerdo
ou para o lado direito.
16
00:00:51,060 --> 00:00:53,012
Vamos tentar para a esquerda.
17
00:00:53,012 --> 00:00:55,169
Ótimo. Perfeito.
18
00:00:56,559 --> 00:00:57,788
Não tão perfeito,
19
00:00:57,788 --> 00:01:01,101
porque o texto está muito perto da imagem.
20
00:01:01,101 --> 00:01:02,974
Lembra qual propriedade devemos usar
21
00:01:02,974 --> 00:01:05,429
para separar o texto da imagem?
22
00:01:05,429 --> 00:01:08,255
É parte do modelo caixa,
o qual nós acabamos de aprender.
23
00:01:08,255 --> 00:01:09,548
Margin.
24
00:01:09,548 --> 00:01:11,935
Vamos adicionar um
pouco de "margin: direita"
25
00:01:11,935 --> 00:01:14,161
e "margin: baixo" a essa imagem.
26
00:01:14,161 --> 00:01:15,998
para dar um espaço para isso respirar.
27
00:01:20,908 --> 00:01:22,721
Está muito melhor.
28
00:01:23,471 --> 00:01:26,410
Nós também podemos flutuar
elementos que não são imagens.
29
00:01:27,000 --> 00:01:29,898
Como, por exemplo, se quiséssemos
uma barra lateral.
30
00:01:29,898 --> 00:01:31,488
E essa lista de links?
31
00:01:31,488 --> 00:01:35,774
Podemos pegar essa
lista e flutuar para a direita.
32
00:01:35,774 --> 00:01:38,927
Então vamos adicionar uma
regra para "#hopper-links",
33
00:01:38,927 --> 00:01:41,178
e flutuar isto para a direita.
34
00:01:41,613 --> 00:01:44,735
Está flutuando, mas ele
está ocupando muita largura,
35
00:01:44,735 --> 00:01:47,127
mais do que eu esperava.
36
00:01:47,241 --> 00:01:51,251
vamos restringir a largura para 30%
37
00:01:52,406 --> 00:01:55,854
então isso sempre irá tomar 30% da página,
38
00:01:55,854 --> 00:01:59,070
e o resto da página irá completar
o resto com os 70%.
39
00:01:59,070 --> 00:02:02,701
Geralmente, sempre que flutuamos um
"div", temos que dar uma largura.
40
00:02:02,701 --> 00:02:05,419
Caso o contrário, "div"
tentará tomar todo o espaço,
41
00:02:05,419 --> 00:02:07,671
e nada poderá envolver em torno dele.
42
00:02:07,671 --> 00:02:11,671
Parece que isso também precisa
de um pouco de "margin: esquerda".
43
00:02:12,611 --> 00:02:13,564
Pronto.
44
00:02:14,706 --> 00:02:19,066
Agora, note que o rodapé na parte inferior
da informação de contato para Hopper.
45
00:02:19,066 --> 00:02:22,735
Ele está fazendo essa coisa
estranha, sobrepondo a barra lateral.
46
00:02:22,735 --> 00:02:24,459
E isso é porque está "envolvendo".
47
00:02:24,459 --> 00:02:26,389
Não queremos que o nosso rodapé envolva,
48
00:02:26,389 --> 00:02:29,193
porém, queremos que sempre esteja na parte
de baixo de tudo,
49
00:02:29,193 --> 00:02:30,828
porque é um rodapé.
50
00:02:30,997 --> 00:02:34,318
Para fazer com que não envolva,
podemos usar a propriedade "clear",
51
00:02:34,318 --> 00:02:36,511
e colocar "clear:both".
52
00:02:38,801 --> 00:02:40,945
Poderíamos usar
"clear:left" ou "clear:right"
53
00:02:40,945 --> 00:02:42,871
se apenas não quiséssemos que envolvesse
54
00:02:42,871 --> 00:02:45,150
elementos flutuantes da direita
ou da esquerda.
55
00:02:45,150 --> 00:02:48,168
Normalmente não queremos
que envolva nenhum elemento flutuante,
56
00:02:48,168 --> 00:02:50,157
então dizemos "clear:both".
57
00:02:50,486 --> 00:02:52,751
Isso está começando a
parecer uma página real.
58
00:02:52,751 --> 00:02:55,481
Temos a área principal,
a barra lateral, o rodapé.
59
00:02:55,481 --> 00:02:58,594
Na verdade, agora você
sabe as propriedades do CSS
60
00:02:58,594 --> 00:03:00,928
que a maioria dos layouts
que as páginas possuem.
61
00:03:00,968 --> 00:03:04,790
Ponha junto alguns divs com largura, float
altura, preenchimento, margem e clear,
62
00:03:04,790 --> 00:03:07,789
e todos os tipos de layouts para páginas
ao seu alcance.
63
00:03:07,789 --> 00:03:09,000
Traduzido por [Gabriel Mello Fernandes]
Revisado por [Fernando dos Reis]