laboratório de informática css posicionamento de elementos 2º semestre 2009 > pucpr > bsi...
TRANSCRIPT
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.