Posicionamento Prof. Wolley. Centralizando conteúdo Abrir o arquivo responsabilidade_social.html.

Apresentação em tema: "Posicionamento Prof. Wolley. Centralizando conteúdo Abrir o arquivo responsabilidade_social.html."— Transcrição da apresentação:

1 Posicionamento Prof. Wolley

2 Centralizando conteúdo Abrir o arquivo responsabilidade_social.html

3 Centralizando conteúdo 1.Cria um div para conteudo 2.Usar as propriedade CSS da div como Box Model

4 Centralizando conteúdo

5 Posicionamento da Imagem Posicionamento Relativo – A declaração positon: relative, quando usada em conjunto com as propriedades top, right, bottom e left, movimenta, o bloco de sua posição inicial. – O bloco é deslocado, mas o espaço que ele ocupava é preservado.

6 Posicionamento da Imagem position:relative O espaço é mantido

7 Posicionamento da Imagem Posicionamento Absoluto – position: absolute, retira o box do seu posicionamento na marcação e faz com que o box seguinte na marcação HTML se desloque para a posição que ele ocupava. – Emprega as mesma propriedades top, right, bottom, left.

8 Posicionamento da Imagem position: absolute

9 Posicionamento da Imagem Flutuando elementos – No esquema float de posicionamento, o box é retirado de sua posição no fluxo do documento e flutuado para a direta ou esquerda. – O espaço deixado será preenchido pelo próximo elemento do documento html. – Propriedades: left e right.

10 Posicionamento da Imagem Flutuando elementos

11 Posicionamento da Imagem Posicionamento Fixo – A declaração position: fixed, define o box fixo em relação à pagina e não se movimenta quando há uma rolagem.

12 Posicionamento de box para Layout Vamos criar o layout abaixo, lembre-se, não iremos usar tabelas, vamos usar a tag DIV e formatação CSS.

13 Posicionamento de box para Layout DIVs para marcação da áreas do site Link para o arquivo.css

14 Posicionamento de box para Layout Arquivo Layout.css

15 Exercício Utilizando as tags DIV e formatação CSS, crie o layout abaixo:

16 Menu de Navegação Utilizaremos uma lista não ordenada para criar um menu de navegação Abrir arquivo menu_navegacao.html

17 Menu de Navegação Lista não ordenada sem estilização.

18 Menu de Navegação Centraliza a div Define largura e altura da div Cor e tipo da borda Alinhamento do texto dentro da div

19 Menu de Navegação Retina o marcador de lista Define as margem da lista com relação a div Define a largura e altura de cada elemento da lista Flutua os elementos da lista para a esquerda Define a margem de um elemento para o outro Define o padding dos elementos com sua margem Define a cor de fundo

20 Menu de Navegação Retira o sublinhado os elementos da lista