1. Document Flow
Antes de colocar um elemento em um design de página da Web ou criar um layout, é necessário definir as dimensões do elemento. Por padrão, uma página Web tem uma largura de 100%, e os elementos dentro da página terão esse padrão também, a menos que uma dimensão mais específica for aplicada aos mesmos. Assim, se você tem um parágrafo em sua página, ele vai ocupar 100% da largura do navegador, mesmo se existir apenas uma palavra nele. A caixa que compõe o parágrafo será de 100% de largura.
Para posicionar elementos, primeiro é necessário determinar como você vai posicionar seus elementos usando a propriedade CSS
position ou elementos flutuando com a propriedade
float.
·
Normal flow – os elementos são posicionados como eles aparecem no HTML.
·
Absolute position - coloca o elemento em uma localização precisa na página.
·
Relative position - coloca os elementos no fluxo normal, com posicionamento a partir dessa posição.
·
Floating – pega os elementos do fluxo normal e empurra-os para os lados direito ou esquerdo do documento.
2. Propriedade position
O foco dessa propriedade é posicionar pequenos detalhes do layout, para diagramar o site utilize Float.
Considere a janela do navegador como um sistema de coordenadas:
O princípio de posicionamento CSS estabelece que você pode posicionar um elemento em qualquer lugar na tela usando um sistema de coordenadas.
A propriedade position pode assumir 4 valores diferentes: Static, Relative, Absolute e Fixed.
Position Static:
Esse é o valor default de todo elemento HTML, ou seja, ele vai seguir o fluxo comum da sua página.
h1{ position: static; }
Position Relative:
Utilizando o position Relative o elemento passa a aceitar as propriedades Top, Bottom, Left e Right. Com elas você pode alterar o posicionamento do elemento.
No exemplo o h1 se posicionou de acordo com o left e top enquanto o h2 manteve o posicionamento comum, ou seja, não atendeu as valores do left e top. Isso se deve porque elementos com position static (default) não podem ser posicionados.
Position Absolute:
O position Absolute é um grande quebra galho no Css. Com ele você pode posicionar qualquer elemento de acordo com o elemento pai que tenha um position diferente de static.
Com o positon absolute o elemento deixa de fazer parte do fluxo comum do documento e o espaço destinado a ele deixa de existir no documento. Você pode então usar as propriedades left, right, top, e bottom para definir as coordenadas e posicionar o elemento.
O elemento H2 assumiu o topo da DIV, respeitando o fluxo normal do documento, enquanto o h1 passou a se posicionar com uma distância de 20px do topo e 20px da esquerda, porém fora do fluxo, ficando por cima dos demais elementos.
Um detalhe importante é que você pode usar medidas negativas e posicionar os elementos em locais que antes seriam impossíveis de serem alcançados.
Positon Fixed:
O position fixed se comporta de maneira semelhante ao absolute, deixando de fazer parte do fluxo comum da página. Porém a grande diferença dele é que ele passa a se referenciar ao window do seu navegador, ou seja, a área que aparece para o usuário independente de barra de rolagem.
O elemento H2 se posicionou na parte inferior da página devido ao bottom: 0 e o H1 se pocionou no topo com o top:0. A página tem barra de rolagem vertical devido ao height da DIV mas mesmo assim o H2 respeitou o window.
3. Propriedade float:
Float é uma propriedade CSS de posicionamento. Ele permite que você posicione seus projetos de páginas da Web exatamente como você deseja que eles sejam exibidos.
O float cuida de toda a diagramação do site, desde os elementos que definirão as áreas mestres do site até os pequenos detalhes de imagens e ícones.
No design para web, uma imagem inserida continua a fazer parte do fluxo da página. Isto significa que, se forem feitas alterações no tamanho ou se elementos ao seu redor mudarem, a página irá automaticamente ser reajustada (“reflow“). Isso difere da página onde os elementos são posicionados de forma absoluta. Elementos posicionados de forma absoluta são removidos do fluxo da página web. Elementos posicionados absolutamente não afetarão quaisquer outros elementos da página, quer estes estejam em contato, ou não.
- Para que são usados os floats?
Além de simples exemplos, como posicionar uma imagem ao lado de um bloco de texto, floats são usados para criar layouts para web.
a. Propriedade clear;
Elementos que contêm elementos float não calculam sua altura como é de se esperar. De fato, se o elemento pai contém apenas elementos flutuadores, navegadores vão renderizar a altura em zero (como se fosse “height:0“).
Se você der um “clear” antes de fechar a tag do elemento pai, você conserta isso.
A propriedade clear pode assumir os valores left, right, both ou none. A regra geral é: se clear, for por exemplo definido both para um box, a margem superior deste box será posicionada sempre abaixo da margem inferior dos boxes flutuados que estejam antes dele no código.
- Limpar o float para começar uma nova linha
Vamos dizer que você tem uma série de elementos flutuantes.
Então, digamos que você quer criar uma pausa nesta grade de elementos, a fim de iniciar uma nova linha. Porque, você sabe, isso faz sentido apenas visualmente falando.
- Dando “clear” somente à esquerda ou à direita
Os dois exemplos acima são exemplos genéricos de como fazer o uso de “clear” para fazer a “limpeza”, ou seja, dar clear tanto à direita, quanto à esquerda. Porque floats podem ser tanto à direita, como à esquerda, e você pode, evidentemente, dar um floatsomente à esquerda ou somente à direita. Isso pode ser útil quando fazer a limpeza de ambos os lados (“clear:both“) seja problemático.
Se tivesse sido dado um clear em ambos os lados (“clear:both“) no exemplo acima, a segunda imagem teria sido empurrada para baixo, onde termina o bloco de texto.
- Usando “clear” exatamente onde você precisa
A propriedade CSS “clear” faz exatamente o que “diz na caixa”. O problema reside em onde e como aplicar um elemento à página com a propriedade clear correta.
- Aplicar “clear:both” ao elemento imediatamente seguinte ao que você precisa que seja “limpo”. Tomemos um exemplo perto do topo de um layout de web page com o cabeçalho e rodapé de largura total, com o conteúdo principal flutuando à esquerda e uma barra lateral à direita. A fim de que o rodapé aparece no lugar certo, você deve limpar a flutuação antes dele. Neste simples exemplo, você pode aplicar aplicar clear:both na própria div do rodapé.
Esta técnica é maravilhosa, já que ela funciona bem sem a necessidade de códigos supérfluos. No entanto, ela às vezes falha em sites dinâmicos. E se, por exemplo, você teve que acrescentar um novo elemento de página acima do rodapé e, consequentemente, abaixo dos outros conteúdos da página? Agora você precisaria dar um clear neste elemento ao invés de no rodapé. Muitas vezes é mais fácil pensar sobre onde é preciso dar um clear ao invés de em qual elemento é preciso dar um clear.
- Aplicar “clear” e limpar o float em um elemento vazio. DIVs são muito boas porque, geralmente, você não tem nenhum estilo aplicado a elas (como em um elemento de parágrafo “p”, por exemplo) e elas não têm nenhuma funcionalidade especial (como um “<br
O método da DIV vazia:
...parte de elemento flutuante.
</div>
<div class="clear"></div>
<p> ... ahhhh, recebi um "clear"! </p>
CSS:
div.clear { clear: both; }
b. Problemas de pushdown e possíveis soluções;
Esta questão merece uma atenção especial, porque frequentemente as pessoas têm problemas com questões de “empurrões”. Olhando novamente o exemplo dado no início deste artigo, a div do conteúdo principal flutua à esquerda da div da barra lateral. Esta é uma estrutura comum em muitos blogs.
Quer sejam elementos fixos ou fluidos, ambas as DIVs têm uma largura especificada. Eles supostamente comportam-se como elementos flutuantes, ou seja, se um elemento dentro da área do conteúdo principal tem a largura maior que toda esta área (por exemplo, uma imagem muito larga) ele simplesmente se extende através e cobre qualquer coisa que esteja “no caminho”. A forma como o IE6 trata isso é bem diferente. Se um elemento tem a largura maior que a de seu elemento pai, no IE6 a barra lateral vai ser simplesmente empurrada para baixo (“pushdown“), quebrando completamente o layout.
A solução? A melhor solução é não colocar elementos com largura maior que a de seu elemento pai. Para se proteger melhor, e se seu layout funciona de outra forma (não especifique alturas!), você pode trabalhar com “overflow:hidden” para esconder algo que seja preciso. Ainda há outra solução, que seria usar posicionamento absoluto para posicionar a barra lateral mais à direta. Entretanto, que posicionamento absoluto retira o elemento do fluxo da página – algo para se levar em consideração.
i. Falso posicionamento absoluto!
Muitos projetos de websites são baseados em um layout de colunas com um cabeçalho e rodapé. Com layouts posicionados absolutamente, é quase impossível posicionar o rodapé se as colunas podem crescer verticalmente. Com layouts flutuantes, alterações de conteúdo inesperados podem causar que colunas inteiras irem para baixo.
Nesta abordagem procura-se uma solução baseada em encontrar uma maneira para calcular o deslocamento à esquerda de uma posição fixa, ao contrário de cálculo a partir da extremidade direita do elemento precedente. Isso é feito usando uma combinação de posição: relativo , à esquerda: 100% e um negativo da margem esquerda .
Nesse método, tem a construção de uma grade de linhas e itens. Nós podemos colocar qualquer número de itens em uma linha e qualquer número de linhas no elemento que contém:
<div id="canvas">
<div class="line">
<div class="item" id="item1">
<div conteúdo class="sap-content"> aqui </ div>
</ Div>
</ Div>
</ Div>
... E assim por diante. Cada item tem um extra sap-content div com diversas finalidades:
· impede bug no IE6 ,
· que nos dá uma maior flexibilidade para adicionar preenchimento (exemplo abaixo), e
· permite-nos jogar com posição: overflow (sem quebrar a grade!).
O genérico CSS aplicados a estes elementos é o seguinte:
. Linha {
float: left;
largura: 100%;
display: block;
position: relative;
}. Item {
position: relative;
float: left;
esquerda: 100%;
}
Para posicionar um determinado item, tudo o que precisamos de fazer é dar-lhe um margem esquerda negativa e uma largura . Por exemplo:
#item1{
A margem esquerda: -100%;
largura: 30%;
}
Com algum estilo extra, para fins de demonstração, é parecido com este:
Exemplo de falso posicionamento absoluto em ação.
O CSS genérico posiciona cada item no lado direito da tela, com cada item de largura com base em seu conteúdo e todos os itens flutuava na ordem de origem de sua HTML . A margem esquerda é agora deslocado para a direita a partir do lado da tela, em vez de a partir do elemento à sua esquerda.
Vantagens
Podemos alinhar todos os itens para uma posição predefinida no grid (como com o posicionamento absoluto), mas os itens ainda podem afetar o fluxo normal e, graças a clear -tem muitas das mesmas vantagens do fluxo normal de elementos. Outra vantagem da técnica é que ela reduz grande parte da fragilidade dos flutuadores. Quando o conteúdo de uma caixa flutuando é maior do que a caixa em si, ele empurra a caixa ao lado direito (e, por consequência, a caixa muitas vezes cai para baixo). Com o falso posicionamento absoluto, a caixa à direita permanece no lugar, não importa o quê.
Desvantagens
Para um projeto de duas colunas de largura fixa, isso pode não ser a sua técnica de escolha.
Além disso, o falso posicionamento absoluto não vai funcionar para cada situação. Se você deseja alinhar elementos à esquerda, você não pode usar uma unidade que é diferente da unidade em que a largura da tela é definido, porque você não pode calcular o deslocamento.
Um problema que subsiste: quando um elemento maior do que o da canvas precede os outros elementos do HTML fonte , os elementos à direita na mesma linha, será empurrado para a direita por um valor igual à diferença de largura entre o elemento da primeira e da tela.
c. Problemas cross browser e possíveis soluções;
Cross-Browser significa a habilidade de um site ou aplicação web de suportar múltiplos navegadores indiferente da tecnologia, seja HTML, CSS ou algum script client-side, como Javascript. Mais que suportar múltiplos navegadores, o ideal é que este site seja visualizado de forma idêntica independente do sistema operacional, resolução ou navegador conforme foi planejado.
Para resolver este problema seguem algumas dicas:´
1) Identifique a resolução do seu público-alvo
Antes de abrir qualquer programa para desenhar o layout, veja qual resolução seus usuários mais utilizam, então poderá criar as telas para seu público-alvo. Para realizar tal tarefa utilize um serviço de Web-Analytics, como o Google Analytics que fornece não somente esta, mas diversas estatísticas sobre seu site. Este processo facilita o planejamento das alterações sejam elas pequenas atualizações ou grandes reformas.
2) Trabalhe em cima das Web Standards
Procure trabalhar em cima das Web Standards, e se houver Javascript certifique-se que é não-obstrutivo, assim as chances do seu site estar visível e funcionar para um maior número maior de usuários aumenta.
3) Faça testes em diversos navegadores
Testar para mim é uma das fases mais importantes no processo de desenvolvimento, seja em criação de sites ou programação de um software, embora muitas vezes por falta de tempo ou verba esta fase, principalmente em projetos web, é esquecida ou colocada em segundo plano. Realize todos os testes de todas, ou as principais, páginas do seu site nos mais variados navegadores.
4) Realize os testes primeiro em navegadores modernos
E quando realizar os testes, faça primeiro em navegadores que estão atualizados e tem amplo suporte as novas tecnologias, como o Mozilla Firefox e Google Chrome, e posteriormente rebaixe seu projeto aos outros navegadores.
d. Template Layout
A propriedade float é muito simples de se entender. O problema não é o funcionamento, mas os efeitos que a propriedade float causa nos elementos próximos. Se você pede para duas colunas ficarem flutuando à esquerda e outra coluna à direita, o rodapé sobe. Ou se você coloca um elemento envolvendo outros elementos com float, esse elemento perde a altura. Estes são problemas corriqueiros que já tem soluções inteligentes e que não apresentam chateações mais graves.
Infelizmente o float não é o ideal para a diagramação e organização dos elementos do layout. Ele resolve muitos problemas, mas deixa a desejar em diversos sentidos. O float está completamente ligado a ordem dos elementos no HTML. Existem técnicas que você consegue fazer quase que qualquer organização visual sem encostar no código HTML. Mas há outras necessidades que invariavelmente você precisará modificar a ordem dos elementos no meio do HTML para que a diagramação do site saia conforme o esperado. Essa organização do HTML pode alterar desde programação server-side e até resultados de SEO e acessibilidade. Por isso é interessante que o HTML fique organizado de forma que ele supre as necessidades dessas bases. Sua organização visual deve ser independente desta organização.
i. Template based positioning
Tendo em vista estes e outros problemas o W3C criou um novo módulo. Na verdade ele não é o único, e nem pode ser para que tenhamos diversas formas de trabalhar. O módulo em questão é chamado de Template Layout. Esse módulo consiste em uma forma de criarmos e organizarmos os elementos e informações do layout de forma menos espartana e mais flexível.
Podemos dividir a construção do layout em duas grandes partes: 1) Definição dos elementos mestres e grid a ser seguido. 2) Formatação de font, cores, background, bordas etc.
As propriedades nesta especificação trabalham associando uma política de layout de um elemento. Essa política é chamada de template-based positioning (não tem nada a ver com a propriedade position, pelo contrário é uma alternativa) que dá ao elemento uma grid invisível para alinhar seus elementos descendentes.
Porque o layout deve se adaptar em diferentes janelas e tamanhos de papéis, as colunas e linhas do grid deve ser fixas ou flexiveis dependendo do tamanho.
O W3C mostra alguns casos comuns:
· Páginas complexas com múltiplas barras de navegação em áreas com posições fixas como publicidade, submenus e etc.
· Formulários complexos, onde o alinhamento de labels e campos podem ser facilmente definidos com as propriedades deste módulo com a ajuda das propriedades de margin, padding e tables.
· GUIs, onde botões, toolbars, labels, ícones etc, tem alinhamentos complexos e precisam estar sempre alinhados caso o tamanho ou a resolução da tela mudam.
· Medias que são paginadas, como medias de impressão onde cada página são divididos em áreas fixas para conteúdos de gêneros diferentes.
Template-based positioning são uma alternativa para a propriedade position com o valor absolute. Antigamente lembro-me que quase todos os desenvolvedores tentavam organizar e diagramar layouts utilizando position. Não que seja errado, mas definitivamente não é a melhor forma. Costumo dizer em meus cursos e palestras que position é para detalhes. Nada muito grande, mas para pequenos detalhes. Usamos position para posicionarmos elementos que não tem relação direta com sua posição no código HTML. Ou seja, não importa onde o elemento esteja, o position:absolute; irá posicionar o elemento nas coordenadas que você quiser.
Sintaxe e funcionamento
O módulo Template Layout basicamente define slots de layout para que você encaixe e posicione seus elementos. O mapeamento dos slots é feito com duas propriedades que já conhecemos que este módulo adiciona mais alguns valores e funcionalidades, são as propriedades position e display.
A propriedade display define como será o Grid, ou seja, quantos espaços úteis terá o layout.
A propriedade position irá posicionar seus elementos nestes slots.
Veja o código HTML abaixo:
<div class=”geral”>
<nav class=”menu”>...</nav>
<aside class=”menulateral”>...</aside>
<aside class=”publicidade”>...</aside>
<article class=”post”>...</article>
<footer>...</footer>
</div>
Agora iremos definir a posição destes elementos. O código CSS seria assim:
.geral {
display: “aaa”
“bcd”
“eee”;
}
nav.menu {position:a;}
aside.menulateral {position:b;}
aside.publicidade {position:d;}
article.post {position:c;}
footer {position:e;}
.bmp)
.bmp)
.bmp)
.bmp)
.bmp)
.bmp)
.bmp)