01. DOCUMENT FLOW
Documentos de fluxo são projetados para otimizar a visualização e legibilidade. Ao invés de ser definida como um layout pré-definido, documentos de fluxo e refluxo ajustam dinamicamente o seu conteúdo com base em tempo de execução de variáveis, como tamanho da janela, resolução do dispositivo, e preferências do usuário opcionais. Além disso, documentos de fluxo oferecem recursos avançados, como paginação e colunas.
O valor da propriedade position especifica qual linha e coluna o elemento será colocado no template. Você escreve apenas uma letra por elemento. Vários elementos podem ser colocados em um mesmo slot. Logo estes elementos terão o mesmo valor de position.
03. PROPRIEDADE FLOAT
A propriedade float em CSS foi criada para dar consistência de layout. Flutuando uma imagem ou qualquer elemento para essa matéria, empurrando para um lado e permite o fluxo do texto no outro lado. Um elemento pode ser 'flutuado' à esquerda ou à direita com uso da propriedade float. Isto significa que o box e seu conteúdo são deslocados para a direita ou para a esquerda do documento. A figura a seguir ilustra o princípio de float:
Se desejamos que um texto seja posicionado em volta de uma figura como mostrado abaixo, basta flutuarmos a imagem:
O HTML para o exemplo acima é mostrado a seguir:
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
Para conseguir o efeito mostrado, basta definir uma largura para o box que o contém e declarar para ele float: left;
#picture {
float:left;
width: 100px;
}
Floats podem ser usados para construir colunas em um documento. Para criar as colunas estruturamos as colunas no código HTML usando <div> como mostrado a seguir:
<div id="column1">
<p>Haec disserens qua de re agatur
et in quo causa consistat non videt...</p>
</div>
<div id="column2">
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
</div>
<div id="column3">
<p>nam nihil esset in nostra
potestate si res ita se haberet...</p>
</div>
A seguir definimos a largura de cada coluna, por exemplo 33%, e declaramos
float: left; para cada uma das colunas:
#column1 {
float:left;
width: 33%;
}
#column2 {
float:left;
width: 33%;
}
#column3 {
float:left;
width: 33%;
}
A propriedade float pode ser declarado com left, right, none e inherit*.
* O inherit é raramente usado.
Link: http://pt-br.html.net/tutorials/css/lesson13_ex2.php
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. Veja no exemplo acima que o texto deslocou-se automaticamente para o lado da foto de Bill Gates.
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
<h1>Bill Gates</h1>
<p class="floatstop">causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
Para evitar que o texto se posicione no espaço livre deixado pela foto do Bill Gates basta adicionar a seguinte regra CSS:
#picture {
float:left;
width: 100px;
}
.floatstop {
clear:both;
}
Link: http://pt-br.html.net/tutorials/css/lesson13_ex3.php
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 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.
POSICIONAMENTO ABSOLUTO
Para posicionar um elemento de forma absoluta a propriedade position deve ser definida para absolute. Você pode então usar as propriedades left, right, top, e bottom para definir as coordenadas e posicionar o elemento.
Para exemplificar o posicionamento absoluto escolhemos colocar quatro boxes nos quatro cantos da página:
#box1 {
position:absolute;
top: 50px;
left: 50px;
}
#box2 {
position:absolute;
top: 50px;
right: 50px;
}
#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}
#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}
POSICIONAMENTO RELATIVO
Para posicionar um elemento de forma relativa a propriedade position deve ser definida para relative. A diferença entre os dois tipos de posicionamento é a maneira como oposicionamento é calculado.
O posicionamento para posição relativa é calculado com base na posição original do elemento no documento. Isto significa uma movimentação do elemento para a esquerda, para a direita, para cima ou para baixo. Assim fazendo o elemento ocupa um espaço após ser posicionado.
Como exemplo de posicionamento relativo vamos tentar posicionar três imagens relativamente as suas posições originais na página. Notar como as imagens deixam um espaço vazio nas suas posições originais no documento:
#dog1 {
position:relative;
left: 350px;
bottom: 150px;
}
#dog2 {
position:relative;
left: 150px;
bottom: 500px;
}
#dog3 {
position:relative;
left: 50px;
bottom: 700px;
}
Link: http://pt-br.html.net/tutorials/css/lesson14_ex2.php
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%;
}
c) PROBLEMAS CROSSBROWSER 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.
O módulo Template Layout basicamente define slots de layout para encaixar e posicionar 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.
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.
Nenhum comentário:
Postar um comentário