Laboratório de Informática 1 e 2 (2009)

Nas próximas 3 semanas, descansamos um pouco de nosso trabalho com a linguagem JavaScript.
Voltamos hoje a nosso último tópico referente a CSS: como posicionar nossos layouts.

Apresentação referente à aula

Trabalharemos na aula de hoje com as propriedades:

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

Exemplos referentes à aula:

• Posicionamento padrão, sem float
• Exemplo de aplicação de float:left
• Exemplo de float left com problema com o contâiner pai
• Uso do clear left
• Exemplo com float right
• Exemplo com clear right
• Aplicando a propriedade clear both
• Resolvendo o problema do container pai usando spacer
• Usando mais de um float
• Usando mais de um float (sem spacer)
• Usando mais de um float com float right
• Posicionamento estático
• Posicionamento relativo
• Posicionamento absoluto
• Posicionamento absoluto + relativo
• Posicionamento fixo
• Exemplo de layout de 2 colunas
• Exemplo de layout de 3 colunas