Posicionamento

Prof. Wolley
 Centralizando contedo

rir o arquivo responsabilidade_social.html

Centralizando contedo
1. Cria um div para conteudo
2. Usar as propriedade CSS da div como Box Model
Centralizando contedo
Posicionamento da
Imagem
Posicionamento Relativo
A declarao positon: relative, quando
usada em conjunto com as propriedades
top, right, bottom e left, movimenta,
o bloco de sua posio inicial.
O bloco deslocado, mas o espao que
ele ocupava preservado.
Posicionamento da
Imagem
position:relative

O espao mantido
 Posicionamento da
Imagem
Posicionamento Absoluto
position: absolute, retira o box do seu
posicionamento na marcao e faz com
que o box seguinte na marcao HTML
se desloque para a posio 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 posio no fluxo
do documento e flutuado para a direta
ou esquerda.
O espao deixado ser preenchido pelo
prximo elemento do documento html.
Propriedades: left e right.
 Posicionamento da
Imagem
Flutuando elementos
 Posicionamento da
Imagem
Posicionamento Fixo
A declarao position: fixed, define o box fixo em
relao pagina e no se movimenta quando h uma
rolagem.
 Posicionamento de box para
Layout
Vamos criar o layout abaixo, lembre-se,
no iremos usar tabelas, vamos usar a tag
DIV e formatao CSS.
Posicionamento de box para
Layout

Link para
o
arquivo
.css

DIVs para
marcao
da reas
do site
Posicionamento de box para Layout

Arquivo
Layout.css
Exerccio
Utilizando as tags DIV e formatao
CSS, crie o layout abaixo:
 Menu de Navegao
Utilizaremos uma lista no ordenada
para criar um menu de navegao

brir arquivo menu_navegacao.html

 Menu de Navegao
Lista no ordenada sem estilizao.
Menu de Navegao
Centraliza a div
Define largura e altura da div
Cor e tipo da borda
Alinhamento do texto dentro da
div
Menu de Navegao
Retina o marcador de lista
Define as margem da lista com relao 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 Navegao

Retira o
sublinhado os
elementos da
lista