Como construir uma largura fixa Floating layout Centrado para HTML5 e CSS3 Programação

De largura fixa layouts são comuns, mas eles parecem um pouco estranho se o navegador não é a largura especificada no CSS3. Se o navegador é muito estreito, o layout não vai funcionar, e a segunda coluna (geralmente) desça para a próxima linha.

Se o navegador é muito grande, a página parece estar amassado na margem esquerda com uma grande quantidade de espaço em branco à direita.

A solução natural é a de fazer um projeto de largura fixa relativamente estreita que está centrado no interior de toda a página.

image0.jpg

Alguns chamaram esse tipo de design (com largura fixa flutuante centrada no navegador) a gelatina disposição, porque não é muito fluida e não é fixo.

Fazendo um corpo substituto com um todo div

Em qualquer caso, o código HTML requer apenas um novo elemento, uma todos div que encerra tudo o mais dentro do corpo:

fixedWidthCentered.html 
Corrigido layout Largura Centrado
Coluna esquerda
Coluna direita
Rodapé

O conteúdo da página inteiras estão agora encapsulado em um div especial. Esta div será redimensionada para uma largura padrão (tipicamente 640 ou 800 pixels). o todos elemento será centrada no corpo, e os outros elementos serão colocados dentro todos como se fosse o corpo:

#all {width: 800px; height: 600px; margin-left: auto-margin-right: auto-border: cinza 1px solid -} # cabeçalho {background-color: # e2e393-border-bottom: 3px black-texto- sólida align: center-width: 800px; height: 100px; padding-top: 1em -} # esquerda {float: left; width: 200px; clear: left; border-right: 1px preto-height sólida: 400px; padding-right: .5em -} # direito {float: left; width: 580px; height: 400px; padding-left: .5em -} # rodapé {width: 800px; height: 60px; text-align: center-background-color: # e2e393 -border-top: 3px double black-padding-bottom: 1em-clara: both-}

Como as obras de layout de gelatina

Este código é muito semelhante ao estilo, mas tem algumas novas funcionalidades importantes:

  • o todos elemento tem uma largura fixa. largura deste elemento vai determinar a largura da parte fixa da página.

  • todos também precisa de uma altura fixa. Se você não especificar uma altura, todos será 0 pixels de altura, porque todos os elementos dentro dele estão flutuando.

  • Centro. Lembre-se, para centralizar divs (ou quaisquer outros elementos de bloco) você definir margin-left e margin-right tanto a auto.

  • Faz não flutuador todos. o margin: auto truque não funciona em elementos flutuantes. todos não deve ter um flutuador atributo definido.

  • Certifique-se as larguras interiores somam todosDe largura. E se todos tem uma largura de 800 pixels, certifique-se que as larguras, bordas e margens de todos os elementos dentro todos somam exatamente 800 pixels. Se você for mesmo um pixel mais, algo se alastrem e estragar o efeito. Você pode ter que mexer com as larguras para fazer tudo funcionar.

  • Ajuste as alturas: Se o seu projeto tem uma altura fixa, você também vai precisar mexer com as alturas para começar tudo de olhar exatamente correto. Cálculos vai chegar perto, mas você geralmente precisa passar algum tempo de qualidade mexer com medidas exatas para obter tudo certo.

Limitações do layout de gelatina

layouts Jello representam um compromisso entre layouts fixos e fluidas, mas eles não são perfeitos:

  • largura mínima implícita: navegadores muito estreitos (como celulares) não pode tornar o layout da maneira que quiser. Felizmente, o conteúdo ainda será visível, mas não exatamente o formato que você queria.

  • espaço na tela desperdiçado: Se você faz parte rendido da página estreito, um monte de espaço não está sendo usado em navegadores de alta resolução. Isso pode ser frustrante.

  • Complexidade: Embora esta técnica layout é muito mais simples do layouts baseados em tabelas, ainda é um pouco envolvidos. Você tem que planejar suas divs para fazer este tipo de trabalho layout.

Semelhante

menu