Passo 3 - Escolher e Especificar o Método de Posicionamento para os Containers

Analisando a estrutura escolhida para o layout, você deve decidir qual será o método de posicionamento de cada container. Por exemplo:

• O layout deve ter largura fixa ou variar de acordo com o tamanho da janela do browser?
• O layout será centralizado na página?
• Quais containers deverão ser fixos ou mantidos no fluxo normal do (X)HTML?
• Quais deles terão posicionamento absoluto?

Esta escolha não é fácil, e você certamente fará escolhas mais acertadas à medida que adquirir experiência.

Inicialmente, para começar um novo layout, defina o código CSS no próprio (X)HTML, na tag <style>. Isso evitará que você manipule mais de um arquivo na sua primeira página de layout. Este código CSS poderá ser posteriormente separado em seu arquivo próprio para poder ser aplicado à várias páginas de seu website.

O exemplo da Figura 1 será utilizado para ilustrar a definição do posicionamento de cada container. Vamos começar?

Analisando a Figura 1 pode-se perceber algumas características gerais de cada container. Vamos realçar cada um deles com uma cor de plano de fundo para termos ideias de como posicioná-los.

• container – abrange a tela inteira.Ele está posicionado a uma distância bem pequena do topo do browser, e como na figura não dá para perceber se ele está centralizado ou a uma certa margem esquerda e direita, podemos considerar que ele está centrado na página. Assim, podemos definir uma margem superior de 10px e o restante das margens deixarmos com valor auto, que fará com que esse container fique horizontalmente centralizado na página. Além disso, é bastante comum estabelecer um tamanho mínimo para esse container. Dessa forma, se a janela do browser for menor que o necessário para dispor os elementos, estes não serão sobrepostos uns sobre os outros para poder caber na janela. Com isso, podemos definir o seguinte CSS para esse container:
#container{ margin: 10px auto; width: 650px; background: #6E934A; }
• header – está posicionado dentro de container, acima de todos os outros. Ele está a uma margem também pequena do topo do container e compreende toda a largura de seu pai. Assim, podemos definir o seguinte CSS para header:
#header { background: #8074CB; height: 50px; }
• mainnav – está posicionado abaixo de header e também compreende toda a largura de container. Aplicando uma cor de plano de fundo para ele, tem-se:
#mainnav{ background: #4D4197; height: 30px; }
• menu – está posicionado à direita de contents. Como vimos em aulas anteriores, para posicionar um elemento do lado do outro se pode utilizar a propriedade float:right;. Nesse caso, usando essa propriedade, o próximo elemento, que é o container contents, ficará do lado esquerdo de menu. É necessário também estipular uma largura para menu. Dado que especificamos uma largura total de 650px para container, colocaremos uma largura de 200px para o menu, sobrando 450 para contents. Assim, o CSS para posicionar menu é:
#menu { background: #DBBD4B; width:200px; float:right; height: 500px; }
• contents – como o div#menu foi posicionado com a propriedade float:right, automaticamente posiciona-se contents do lado esquerdo dele. Assim, podemos aplicar somente uma cor de fundo para ver onde ele está posicionado.
#contents { background: #8074CB; height:500px; }
• footer – é posicionado abaixo de contents e menu. Abrange toda a largura de container.
#footer { background: #4D4197; height: 30px; }