WEBVTT
00:00:00.552 --> 00:00:02.407
Estou criando uma
página para o Hopper,
00:00:02.407 --> 00:00:04.554
um dos nossos "avatars"
aqui no Khan Academy.
00:00:04.554 --> 00:00:09.813
Ela tem uma imagem, alguns
links legais e um parágrafo.
00:00:11.034 --> 00:00:15.893
Acho que essa imagem do Hopper
ficaria melhor ao lado do parágrafo,
00:00:15.893 --> 00:00:19.846
então irei recortar e colar aqui embaixo.
00:00:21.324 --> 00:00:24.002
Isso não ficou tão bom quanto
eu esperava que ficasse.
00:00:24.002 --> 00:00:26.356
O texto começa em baixo da imagem.
00:00:26.369 --> 00:00:29.170
Eu esperava que o texto
ficasse envolta da imagem,
00:00:29.170 --> 00:00:31.113
como em um jornal ou uma revista.
00:00:31.641 --> 00:00:34.701
Iremos precisar de uma nova
propriedade do CSS para isso: float.
00:00:34.701 --> 00:00:38.178
É uma maneira de flutuar dentro ou
ao redor de outros elementos,
00:00:38.178 --> 00:00:40.579
e é perfeito para envolver
a imagem com o texto.
00:00:40.854 --> 00:00:45.368
Então nós vamos em cima para
nossa regra pic, e dizemos: float.
00:00:45.368 --> 00:00:48.555
Para o valor, precisamos decidir se
queremos que a imagem flutue
00:00:48.555 --> 00:00:50.693
para o lado esquerdo
ou para o lado direito.
00:00:51.060 --> 00:00:53.012
Vamos tentar para a esquerda.
00:00:53.012 --> 00:00:55.169
Ótimo. Perfeito.
00:00:56.559 --> 00:00:57.788
Não tão perfeito,
00:00:57.788 --> 00:01:01.101
porque o texto está muito perto da imagem.
00:01:01.101 --> 00:01:02.974
Lembra qual propriedade devemos usar
00:01:02.974 --> 00:01:05.429
para separar o texto da imagem?
00:01:05.429 --> 00:01:08.255
É parte do modelo caixa,
o qual nós acabamos de aprender.
00:01:08.255 --> 00:01:09.548
Margin.
00:01:09.548 --> 00:01:11.935
Vamos adicionar um
pouco de "margin: direita"
00:01:11.935 --> 00:01:14.161
e "margin: baixo" a essa imagem.
00:01:14.161 --> 00:01:15.998
para dar um espaço para isso respirar.
00:01:20.908 --> 00:01:22.721
Está muito melhor.
00:01:23.471 --> 00:01:26.410
Nós também podemos flutuar
elementos que não são imagens.
00:01:27.000 --> 00:01:29.898
Como, por exemplo, se quiséssemos
uma barra lateral.
00:01:29.898 --> 00:01:31.488
E essa lista de links?
00:01:31.488 --> 00:01:35.774
Podemos pegar essa
lista e flutuar para a direita.
00:01:35.774 --> 00:01:38.927
Então vamos adicionar uma
regra para "#hopper-links",
00:01:38.927 --> 00:01:41.178
e flutuar isto para a direita.
00:01:41.613 --> 00:01:44.735
Está flutuando, mas ele
está ocupando muita largura,
00:01:44.735 --> 00:01:47.127
mais do que eu esperava.
00:01:47.241 --> 00:01:51.251
vamos restringir a largura para 30%
00:01:52.406 --> 00:01:55.854
então isso sempre irá tomar 30% da página,
00:01:55.854 --> 00:01:59.070
e o resto da página irá completar
o resto com os 70%.
00:01:59.070 --> 00:02:02.701
Geralmente, sempre que flutuamos um
"div", temos que dar uma largura.
00:02:02.701 --> 00:02:05.419
Caso o contrário, "div"
tentará tomar todo o espaço,
00:02:05.419 --> 00:02:07.671
e nada poderá envolver em torno dele.
00:02:07.671 --> 00:02:11.671
Parece que isso também precisa
de um pouco de "margin: esquerda".
00:02:12.611 --> 00:02:13.564
Pronto.
00:02:14.706 --> 00:02:19.066
Agora, note que o rodapé na parte inferior
da informação de contato para Hopper.
00:02:19.066 --> 00:02:22.735
Ele está fazendo essa coisa
estranha, sobrepondo a barra lateral.
00:02:22.735 --> 00:02:24.459
E isso é porque está "envolvendo".
00:02:24.459 --> 00:02:26.389
Não queremos que o nosso rodapé envolva,
00:02:26.389 --> 00:02:29.193
porém, queremos que sempre esteja na parte
de baixo de tudo,
00:02:29.193 --> 00:02:30.828
porque é um rodapé.
00:02:30.997 --> 00:02:34.318
Para fazer com que não envolva,
podemos usar a propriedade "clear",
00:02:34.318 --> 00:02:36.511
e colocar "clear:both".
00:02:38.801 --> 00:02:40.945
Poderíamos usar
"clear:left" ou "clear:right"
00:02:40.945 --> 00:02:42.871
se apenas não quiséssemos que envolvesse
00:02:42.871 --> 00:02:45.150
elementos flutuantes da direita
ou da esquerda.
00:02:45.150 --> 00:02:48.168
Normalmente não queremos
que envolva nenhum elemento flutuante,
00:02:48.168 --> 00:02:50.157
então dizemos "clear:both".
00:02:50.486 --> 00:02:52.751
Isso está começando a
parecer uma página real.
00:02:52.751 --> 00:02:55.481
Temos a área principal,
a barra lateral, o rodapé.
00:02:55.481 --> 00:02:58.594
Na verdade, agora você
sabe as propriedades do CSS
00:02:58.594 --> 00:03:00.928
que a maioria dos layouts
que as páginas possuem.
00:03:00.968 --> 00:03:04.790
Ponha junto alguns divs com largura, float
altura, preenchimento, margem e clear,
00:03:04.790 --> 00:03:07.789
e todos os tipos de layouts para páginas
ao seu alcance.
00:03:07.789 --> 00:03:09.000
Traduzido por [Gabriel Mello Fernandes]
Revisado por [Fernando dos Reis]