Laboratório de Informática CSS Posicionamento 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 aula Começaremos a entender que usar tabelas para layout é errado; Leitura obrigatória: – Porque utilizar tabelas para layout é estupidez ; Porque utilizar tabelas para layout é estupidez

427/10/09 Material referente ao assunto da aula Propriedade position do CSS: – ade-position-do-css ade-position-do-css Flutuando elementos: br.html.net/tutorials/css/lesson13.asp Posicionando elementos: br.html.net/tutorials/css/lesson14.asp

Material referente ao assunto da aula CSS – Guia de Bolso; – Editora AltaBooks; – 2008; – Download de um capítulo. Download de um capítulo 527/10/09

6 Tags HTML referenciadas na aula (em Português –site Referenciando)Referenciando Tag de estilo: ; Tag de link: ; Tag de script:.

727/10/09 Tags HTML referenciadas na aula (em Inglês – site SitePoint)SitePoint Tag de estilo: ; Tag de link: ; Tag de script: ;<script>

Propriedades CSS referenciadas na aula (em Inglês – Sitepoint)Sitepoint float: determina o posicionamento de um elemento em relação ao fluxo; float clear: controla o comportamento de um elemento em relação ao estado de float dos anteriores; clear position: tipo de posicionamento de um elemento. position

Propriedades CSS referenciadas na aula (em Inglês – Sitepoint)Sitepoint width: largura de um elemento, obrigatório nos elementos com float; width left / right: distância em relação ao limite esquerdo ou direito do elemento sendo posicionado; leftright top / bottom: distância em relação ao limite superior ou inferior do elemento sendo posicionado. topbottom

1027/10/09 Exemplos da aula Exemplos em: – 09li/2009/10/27/posicionamento-de- elementos-em-css/ 09li/2009/10/27/posicionamento-de- elementos-em-css/

Lembre-se do Box model!

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

Visualizar o Box Model com Firebug Instalar o Firebug: – (Na PUCPR já está instalado) – 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 pai Usar 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ático position: static Padrão, como os elementos são colocados por padrão; 3027/10/09

Posicionamento relativo position: relative Posição em relação ao posicionamento estático; Usa propriedades top, left, bottom e right; 3127/10/09

Posicionamento absoluto position: absolute Posiçã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 fixo position: fixed Posiçã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.