DIWEB

1. Desenvolvimento Web
Aula 08 – Posicionamento e Seletor ID

2. Posicionamento
Controlar a posição de elementos HTML permite
que você tenha um controle inacreditável sobre
a aparência da sua página.
Suas divisões <div> nunca mais ficarão umas
sobre as outras! (A menos que você queira).

3. 1.Abra o NetBeans
2.Crie um novo projeto php: treino
3.Monte a estrutura básica

4. Float
Uma forma de controlar o posicionamento é usar
os floats(elementos flutuantes).
Quando você faz um elemento flutuar na página,
você está dizendo para ela:
"Eu vou te dizer onde colocar esse elemento, mas
você tem que colocá-lo no fluxo dos outros
elementos".

5. 1. Digite o código
2. Execute o código

6. Adicione o texto ao index.php e
execute.

7. Como você já deve ter
adivinhado, podemos usar
elementos flutuantes para dividir
nossas páginas naturalmente em
seções diferentes.
No estilos.css iremos flutuar as tags para que fiquem uma ao lado da outra.

8. Permite mudar a ordem de exibição dos elementos: o que vem primeiro
no HTML, vem primeiro no visual.
Float
.secao {
float: left;
}

9. Acesse o link da sala virtual:
exercicio_float.

10. Exercício 1
Use a propriedade float para posicionar igual a imagem abaixo.

11. Resposta 1

12. Exercício 2
Continue na página: exercicio_float.
Use a propriedade float para posicionar igual a imagem abaixo.

13. Resposta 2

14. Algumas vezes misturamos vários elementos flutuantes com outros não
flutuantes, e os elementos acabam ficando uns sobre os outros.
Clear
A propriedade clear quer dizer "limpe o fluxo do documento ao meu lado" e
pode receber os valores left, right ou both.
Clear: Left impede que elementos flutuantes fiquem à esquerda do elemento
que recebe essa propriedade.
Clear: Right impede que elementos flutuem à direita do elemento.
Clear: Both impede que elementos flutuem em ambos os lados do elemento.
É importante sabermos que a propriedade clear de um elemento só interfere
no layout da página caso outros elementos à sua volta estiverem flutuando.

15. Na Div 4 retire a propriedade float e use um clear.
Teste os 3 valores: left, right e both;

16. Seletor
id: é um identificador, um nome para um elemento, ele não
pode se repetir na página.
Class = nome
ID = RG (identidade)
<div id=“cabecalho” class=“cor-fundo”>
<div id=“rodape” class=“cor-fundo”>
Para selecionar um ID no CSS
#cabecalho

17. 1. No projeto treino
2. Apague todo o CSS
3. E substitua o body pelo código abaixo

18. estilos.css
Qualquer elemento pode ter um id e,
com ele, podemos selecioná-lo
facilmente no CSS: basta usar, no lugar
da tag, o próprio id, precedido por
cerquilha (#):
#exemplo{
border-radius: 5px;
}

19. Problema: O rodapé do site está no lugar errado.

20. Dica: Use clear: both nos rodapés

21. Resumo da aula
Posicionamento
Float:
left e right
Clear:
left, right, clear
Propriedade
Border-radius
Seletor
Id= “”
Seleção
#rodape

22. HTML
HTML 5
Bônus