Laboratório de Informática CSS Posicionamento de Elementos 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.

Apresentação em tema: "Laboratório de Informática CSS Posicionamento de Elementos 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula."— Transcrição da apresentação:

1 Laboratório de Informática CSS Posicionamento de Elementos 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula

2 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;

3 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

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

5 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 6 Tags HTML referenciadas na aula (em Português –site Referenciando)Referenciando Tag de estilo: ; Tag de link: ; Tag de script:.

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

8 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

9 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

10 1027/10/09 Exemplos da aula Exemplos em: – http://www.brunocampagnolo.com/20 09li/2009/10/27/posicionamento-de- elementos-em-css/ http://www.brunocampagnolo.com/20 09li/2009/10/27/posicionamento-de- elementos-em-css/

11 Lembre-se do Box model!

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

13 Visualizar o Box Model com Firebug Instalar o Firebug: – (Na PUCPR já está instalado) – http://www.getfirebug.com Tecla F12! 1327/10/09

14 Propriedade Float Determina o posicionamento de um elemento em relação ao fluxo da página; 1427/10/09 Valores: – left; – right; – none;

15 float: left O elemento é posicionado à esquerda; Os seguintes ficam à direita; 1527/10/09

16

17 float: right O elemento é posicionado à direita; Os seguintes ficam à esquerda; 1727/10/09

18

19 Problema: o contâiner pai se adapta aos elementos colocados depois do elemento com o float 1927/10/09

20 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

21 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

22

23 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

24

25 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

26

27 Resolvendo o problema da adaptação do contâiner pai Usar um espaçador (spacer) com clear; 2727/10/09

28

29 Tipos de posicionamento Posicionamento Estático (position: static); Posicionamento Relativo (position: relative); Posicionamento Absoluto (position: absolute); Posicionamento Fixo (position: fixed); 2927/10/09

30 Posicionamento estático position: static Padrão, como os elementos são colocados por padrão; 3027/10/09

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

32 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

33

34 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

35 3527/10/09 Próximas aulas de CSS CSS Posicionamento: layouts; Menus, Botões e Forms.