Posicionamento Prof. Wolley

Centralizando conteúdo Abrir o arquivo responsabilidade_social.html

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

Centralizando conteúdo

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.

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

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.

Posicionamento da Imagem position: absolute

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.

Posicionamento da Imagem Flutuando elementos

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.

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.

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

Posicionamento de box para Layout Arquivo Layout.css

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

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

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

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

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

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