Laboratório de InformáticaCSSPosicionamento de Elementos

2º Semestre 2009 > PUCPR > BSI

Bruno C. de Paula

Resumo da aula

Conhecemos, no semestre passado diversos seletores e propriedades do CSS;Também trabalhamos com propriedades para dimensionamento (box model) de elementos;Nosso objetivo hoje será iniciar o trabalho com posicionamento de elementos;

Resumo da aulaComeçaremos a entender que usar tabelas para layout é errado;Leitura obrigatória:–Porque utilizar tabelas para layout é estupidez;

427/10/09

Material referente ao assunto da aula

Propriedade position do CSS:–http://www.tableless.com.br/proprieda

de-position-do-cssFlutuando elementos:http://www.pt-br.html.net/tutorials/css/lesson13.aspPosicionando elementos:http://www.pt-br.html.net/tutorials/css/lesson14.asp

Material referente ao assunto da aula

CSS – Guia de Bolso;–Editora AltaBooks;–2008;–Download de um c

apítulo.

527/10/09

627/10/09

Tags HTML referenciadas na aula (em Português –site Referenciando)

Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>.

727/10/09

Tags HTML referenciadas na aula (em Inglês – site SitePoint)

Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>;

Propriedades CSS referenciadas na aula (em Inglês – Sitepoint)

float: determina o posicionamento de um elemento em relação ao fluxo;

clear: controla o comportamento de um elemento em relação ao estado de float dos anteriores;

position: tipo de posicionamento de um elemento.

Propriedades CSS referenciadas na aula (em Inglês – Sitepoint)

width: largura de um elemento, obrigatório nos elementos com float;

left / right: distância em relação ao limite esquerdo ou direito do elemento sendo posicionado;

top / bottom: distância em relação ao limite superior ou inferior do elemento sendo posicionado.

1027/10/09

Exemplos da aula

Exemplos em:–http://www.brunocampagnolo.com/20

09li/2009/10/27/posicionamento-de-elementos-em-css/

Lembre-se do Box model!

Box model para elementos em blocoIE (6 e 7) x Resto do Mundo

Visualizar o Box Model com FirebugInstalar o Firebug:– (Na PUCPR já está instalado)–http://www.getfirebug.com

Tecla F12!

1327/10/09

Propriedade Float

Determina o posicionamento de um elemento em relação ao fluxo da página;

1427/10/09

Valores:– left;– right;–none;

float: left

O elemento é posicionado à esquerda;Os seguintes ficam à direita;

1527/10/09

float: right

O elemento é posicionado à direita;Os seguintes ficam à esquerda;

1727/10/09

Problema: o contâiner pai se adapta aos elementos colocados depois do elemento com o float

1927/10/09

Propriedade clear

Controla o comportamento de um elemento em relação ao estado de float dos elementos anteriores;

Valores possíveis:–clear: left;–clear: right;–clear: both;

2027/10/09

clear: left

Busca o elemento anterior com valor de float igual a left;

Move o elemento com clear igual a left obrigatoriamente abaixo do elemento com float igual a left.

2127/10/09

clear: right

Busca o elemento anterior com valor de float igual a right;

Move o elemento com clear igual a right obrigatoriamente abaixo do elemento com float igual a right.

2327/10/09

clear: both

Busca o elemento anterior com valor de float qualquer;

Move o elemento com clear igual a right obrigatoriamente abaixo do elemento com float qualquer.

2527/10/09

Resolvendo o problema da adaptação do contâiner paiUs ar um espaçador (spacer) com

clear;

2727/10/09

Tipos de posicionamento

Posicionamento Estático (position: static);

Posicionamento Relativo (position: relative);

Posicionamento Absoluto (position: absolute);

Posicionamento Fixo (position: fixed);

2927/10/09

Posicionamento estáticoposition: staticPadrão, como os elementos são

colocados por padrão;

3027/10/09

Posicionamento relativoposition: relativePosição em relação ao posicionamento

estático;Usa propriedades top, left, bottom e

right;

3127/10/09

Posicionamento absolutoposition: absolutePosição em relação ao canto superior

esquerdo ou canto superior direito do elemento pai;

Usa propriedades top, left, bottom e right;

“Escapa” ao float;

3227/10/09

Posicionamento fixoposition: fixedPosição em relação à janela do

navegador;Usa propriedades top, left, bottom e

right;“Escapa” ao float;

3427/10/09

3527/10/09

Próximas aulas de CSS

CSS Posicionamento: layouts;Menus, Botões e Forms.