Template Layout

Olá pessoal

hoje vou escrever sobre TEMPLATES LAYOUT, onde abordaremos tópicos sobre Document Flow, Propriedade Position e Propriedade Float.

Uma vez que o assunto principal são os templates, é muito importante que seja destacada aqui a sua definição. O que é um TEMPLATE então?

De acordo com o Wikipédia (http://pt.wikipedia.org/wiki/Web_template):

“Template (ou "modelo de documento") é um documento sem conteúdo, com apenas a apresentação visual (apenas cabeçalhos por exemplo) e instruções sobre onde e qual tipo de conteúdo deve entrar a cada parcela da apresentação — por exemplo conteúdos que podem aparecer no início e conteúdos que só podem aparecer no final.”

Mas, e falando de documento web, a definição é a mesma?

De acordo com o Curso CSS3 da W3C (http://www.w3c.br/pub/Cursos/CursoCSS3/css-web.pdf), na pagina 37, fala que a parte mais fácil de desenvolver um site com CSS é o planejamento e a diagramação do layout, mas que por falta de recursos mais avançados é onde os desenvolvedores mais encontram problemas. Fala também do float, que considera a parte mais importante do CSS, pois é o float que 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.  Fala também que o 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 por estar completamente ligado a ordem dos elementos no HTML. Tendo em vista estes e outros problemas o W3C criou um novo módulo. 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. Visitando a página através do link acima, podemos obter  informações com mais profundidade sobre esse  assunto, como sua sintaxe e funcionamento.

Bom, depois desse resumo creio que agora podemos seguir com a abordagem dos tópicos.
                                             

                                                   


1. DOCUMENT FLOW


                         

O fluxo de documentos podem ser modificados por CSS através das seguintes propriedades:

• flutuar
• posição

Usando estas propriedades modifica a maneira como os elementos são processados ​​por padrão. Por exemplo, se usarmos flutuante, em seguida, o fluxo do documento irá aparecer como mostrado abaixo.

                  

As setas representam o impacto de flutuar sobre os elementos que se encontram ainda em fluxo normal. Tenha em mente, no entanto, que, apesar do fato de que nós ainda podemos recuperar o fluxo normal para flutuar usando compensação, não há nenhuma maneira direta de fazer o mesmo para o posicionamento.

fonte:http://onwebdev.blogspot.com.br

2.PROPRIEDADE POSITION

De acordo com o site Tableless(http://tableless.com.br/propriedade-position-do-css/#.UUekl8dQB2M) a propriedade position não serve para a criação de estruturas de layouts, mas você a usará para coisas mais simples. Segundo o site existem 3 tipos de valores que usamos na propriedade position: relative, absolute e fixed.

Position Fixed

O position: fixed; irá fixar a posição do elemento na coordenada que você definir. A medida que a página é rolada, o elemento continua fixo na posição que você definiu e o conteúdo da página rola normalmente. Veja um exemplo de position fixed.

Position Relative

Todos os positions precisam de um ponto para iniciar o cálculo da coordenada para assim posicionar o elemento na tela. Ao contrário do que muitos acham, esse ponto não é o ponto central do elemento, o ponto base é o canto superior esquerdo do elemento. A partir deste canto, o browser irá calcular a coordenada que você definiu e irá posicionar o elemento no viewport.

O position relative posiciona o elemento em relação a si mesmo. Ou seja, o ponto zero será o canto superior esquerdo, e ele começará a contar a partir dali.

                               

Position Absolute

O Position Absolute é um tanto diferente do Relative. Enquanto o elemento com Position Relative utiliza seu próprio canto para referenciar sua posição, o elemento com Position Absolute se utiliza do ponto superior esquerdo de outros elementos. Estes elementos são os parentes dele do elemento com position absolute. Mais especificamente o pai.

3.PROPRIEDADE FLOAT

Float é uma propriedade CSS de posicionamento. Se você está familiarizado com projetos para mídia impressa, você pode pensar, de forma semelhante, numa imagem em um layout onde o texto a circunda quando necessário.

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.

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.

Floats são igualmente úteis para layouts de pequenas instâncias.

     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.

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, iss faz sentido apenas visualmente falando.

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 float somente à 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.

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é.


 - 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 />”). Onde for preciso limpar o float, apenas insira: <div style=”clear: both;”> </div>. Usar estilos in-line não é muito “atraente”, então é melhor fazer uma classe “clear” e criar uma regra que faça a limpeza do float, mas isso é apenas uma questão de gosto.


Se clicar no link http://desenvolvimentoparaweb.com/css/css-float-consideracoes-dicas-e-macetes-para-bons-layouts-na-web/  vc poderá saber mais sobre  CSS  “overflow:auto”, dar o clear com a pseudo classe ":after" e  "pushdown"


  b. Problemas com cross browser

No site Tableless http://tableless.com.br/ vc encontra um tutorial sobre como evitar as incompatibilidades entre os browsers.

Bom pessoal, por hoje é isso, espero ter ajudado. Fiquem com Deus e até o próximo post!