Template Layout

1) Documento Flow

Quando um navegador começa a tornar um documento HTML, que começa no topo da janela e trabalha o seu caminho através do conteúdo do documento, a alocação de espaço, conforme necessário. A menos que o tamanho do documento é especificamente limitado por uma instrução de CSS, o navegador expande o documento verticalmente para acomodar todo o conteúdo. Cada novo nível de bloco elemento HTML (DIV, P, tabela, formulário, etc) é processado em uma nova linha. Inline elementos HTML (IMG, SPAN, entrada, etc) são prestados na horizontal como eles são encontrados até a linha de corrente atinge o pai / contendo elementos de contorno do bloco, em que ponto de prestação continua na próxima linha  vertical. Isso é chamado de fluxo de documentos normal.

2) Propriedade Position 

As propriedades de posicionamento CSS permitem que você posicione um elemento. Ele também pode colocar um elemento atrás do outro, e especificar o que deve acontecer quando o conteúdo de um elemento é muito grande.

Os elementos podem ser posicionados usando a parte inferior, superior, esquerda, e propriedades adequadas. No entanto, essas propriedades não funcionará a menos que a propriedade position deve ser definida em primeiro lugar. Eles também funcionam de forma diferente, dependendo do método de posicionamento.

 I) Posicionamento fixo

Um elemento com posição fixa está posicionado em relação à janela do navegador.

Não vai passar mesmo se a janela é rolada.

II)Posicionamento Relativo

Um elemento em relação posicionado está posicionado em relação à sua posição normal(de origem).

 O conteúdo de elementos posicionados relativamente pode ser movido e sobrepõem-se outros elementos, mas o espaço reservado para o elemento ainda é preservado no fluxo normal.

Elementos relativamente posicionados são muitas vezes utilizados como blocos de contêineres para elementos posicionados absolutamente.

III)Posicionamento absoluto

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.

No caso, se o DIV pai não tivesse position definido, o div filho iria se referenciar pelo BODY mesmo. Se caso o div pai não tivesse position definido, e se ele também fosse envolvido por outro div com position, o div filho iria se referenciar por este terceiro div.
Logo, o div com position absolute referencia sua posição pelo div mais próximo que o envolve e que também tenha um position definido.

 Elementos posicionados absolutamente são removidos do fluxo normal. O documento e de outros elementos comportam-se como o elemento posicionado absolutamente não existe.

Elementos posicionados absolutamente podem sobrepor-se outros elementos.

 3)Propriedade Float

Um elemento pode estar 'flutuando' à esquerda ou à direita com uso da propriedade float. Isto significa que todo o conteúdo de um elemento com a propriedade float serão deslocados para a direita ou para a esquerda do "elemento pai". 

A propriedade float permite que você posicione um objeto a direita ou a esquerda de outro, por exemplo, o código abaixo cria uma pagina com 2 caixas coloridas, uma na esquerda e outra na direita.









  

a) A propriedade clear

A propriedade clear é usada para controlar o comportamento dos elementos que se seguem aos elementos floats no documento.
Por padrão, o elemento subsequente a um float, ocupa o espaço livre ao lado do elemento flutuado.

 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.

b) Problemas de pushdown e pissíveis solução 

Para iniciar este assunto vamos esclarecer o que é um problema pushdown. Quando um elemento dentro da área do conteúdo principal tem largura maior que toda a área, ele sobrepõe qualquer outro elemento que está sobre aquela área. No internet Explore 6 trata-se este problema empurrando a barra lateral para baixo “pushdown” já que o elemento colocado é maior que o elemento pai.

Solução para o problema Pushdown:

A melhor solução para a causa deste problema é não colocar elementos com largura maior que a do elemento pai, para que ela se encaixe perfeitamente ao local destinado. Para uma melhor adaptação do layout utilizamos overflow:.

Overflow serve para indicar ao navegador o que fazer com algum conteúdo que ultrapasse o elemento pai, segundos as dimensões que lhe foram atribuídas. Ele permite ocultar o conteúdo de uma camada para mostrar somente o conteúdo que caiba na área destinada, configurar para aparecer o conteúdo independente se sobrepor outro conteúdo, para ativar a barra de rolagem e outras funções. Se usar a combinação do overflow com alguns atributos podemos escolher a função que o navegador deve fazer caso isso aconteça:

• visible:  Este valor indica que se deve exibir todo o conteúdo da camada, ainda que não caiba no tamanho com a que a tenhamos configurado. No Internet Explorer ocorre que a camada cresce em tamanho o suficiente para que caiba todo o conteúdo que colocamos dentro. No Firefox ocorre que a camada tem o tamanho marcado, mas o conteúdo continua sendo visto, embora fora do espaço da camada , podendo sobrepor-se a um texto ou a uma imagem que haja embaixo. O conteúdo não se oculta em nenhum caso, ou seja, sempre estará visível.
• hidden: Este valor indica que os conteúdos que, pelo tamanho da camada, não caibam nela, se devem ocultar. Por isso, a camada terá sempre o tamanho configurado, mas os conteúdos em, algumas ocasiões, poderão não se ver por completo.
• scroll: Este valor indica que a camada deve ter o tamanho que se tenha configurado inicialmente e que, além disso, se devem mostrar barras de rolagem, para mover o conteúdo da camada dentro do espaço da mesma. As barras de rolagem sempre aparecem, solicitadas ou não.
• auto: Com este valor também se respeitarão as dimensões atribuídas a uma caixa. O conteúdo será ocultado, mas aparecerão as barras de rolagem para movê-lo. No entanto, neste caso, as barras de rolagem poderão aparecer ou não, dependendo se são necessárias ou não para exibir todo o conteúdo da camada.

c) Problemas crossbrowser e possíveis soluções 

Desde que os navegadores são realizados por diferentes empresas ou organizações de desenvolvimento de software, com seus próprios interesses, as diferenças nos navegadores foram patentes. Existem uns organismos que definem como devem de ser linguagens como HTML, CSS ou Javascript, porém às vezes as interpretações são distintas por parte das empresas desenvolvedoras de software, ou inclusive estas se permitem o luxo de criar novas etiquetas ou funcionalidades, inclusive decidir quais suportam.

À medida que os navegadores evoluem, as especificações também melhoram, por isso que as diferentes versões do mesmo software de exploração web também podem mostrar as páginas de maneira distinta entre si. Os desenvolvedores do web têm que lidar com tudo isso, pois os programas com os quais o público visualizará nossos trabalhos podem ser muito distintos e o aspecto das webs pode mudar bastante de uns a outros. O melhor que podemos fazer é realizar páginas web que se vejam igual em todos os navegadores. Essas soluções que se adaptam a todo tipo de navegadores dizemos que são Cross-Browser.

Uma vez esclarecidas as bases, há que dizer que o cross browser pode se aplicar a muitas tecnologias, que são as que entendem os navegadores e com as que trabalham os desenvolvedores. A primeira vez que escutei falar de Cross-Browser foi com Javascript e o trabalho com camadas. Os programas mais populares para o web naqueles momentos eram Netscape Navigator e Internet Explorer e a maneira de controlar o sistema de camadas era notavelmente distinta. Portanto, havia que encontrar mecanismos para que as páginas web se visualizassem perfeitamente em vários navegadores.

Com CSS (Folhas de estilo em cascada) também se fala de Cross Browser, porque distintos navegadores ou suas versões, interpretam mais ou menos etiquetas e atributos de estilo. Também porque um mesmo atributo pode ser interpretado com sutis diferenças que fazem com que o trabalho não se veja perfeito em dois navegadores ao mesmo tempo. Há então que utilizar pequenos truques para que o efeito seja o mesmo em todos os navegadores. Às vezes os truques são utilizar um atributo ao invés de outro, porém muitas vezes se propõe trapaças que fazem com que se veja bem o resultado, a custo de ter um código mais complexo ou inclusive incorreto sintaticamente.

Com HTML, embora também haja mudanças entre distintos navegadores, são muito menores e de efeito mínimo, por isso que não se costuma utilizar aqui o termo.

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:´

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

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

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

Quando se lida com IE6 é que, se você aplicar uma margem (CSS “margin”) no mesmo sentido que o float (“left” ou “right”), ela deve ser o dobro da margem.

Para o IE7, existe um pequeno truque sobre sua maneira peculiar de não respeitar margens inferiores (CSS “margin-bottom”) em elementos filhos dentro de objetos flutuantes.

-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

consiste em uma forma de criarmos e organizarmos os elementos e informações do layout de forma mais flexível.

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 irá definir como será o Grid. Quantos slots e etc.

A propriedade position irá posicionar seus elementos nestes slots.

I)Template-based positioning:

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 flexíveis dependendo do tamanho.

O template trata se da estrutura do site ou blog ou esqueleto, é onde vamos definir quantas divisões terá no site, onde ficará a barra de menu e outras coisas de estruturação.
Já o layout é a parte do tema, imagem de fundo, cor e todas as funções que envolvem a parte gráfica do site. O layout não altera  a estrutura do site nem a posição dos elementos.

Referencia:

http://www.criarweb.com/artigos/atributo-overflow-de-css.html

http://www.maujor.com/index.php

http://www.w3c.br/Home/WebHome