Posicionamento

Prof. Wolley

Centralizando conteúdo

Abrir o arquivo responsabilidade_social.html

Centralizando conteúdo1. Cria um div para conteudo2. 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