Pré-requisitos
Para você ser capaz de usar este artigo, você precisa ser capaz de codificar diretamente em ambos HTML e CSS . Se este não for o caso, você pode preferir usar um editor web visual para projetar seu site, em vez. Por exemplo, o Dreamweaver vem com vários templates para construir 2 ou 3 sites de colunas usando CSS. MeuDreamweaver Tutorial leva você através das etapas de criação de um site de duas colunas com base em CSS com este editor.
Meus tutoriais para o free web editores KompoZer , BlueGriffon e Nvu também pode ser usado para criar dois locais de coluna, embora não utilizando CSS.
Note que você não precisa ser um especialista em escrever código HTML ou CSS. Você só precisa de alguns conhecimentos fundamentais de trabalho caso contrário, este tutorial será incompreensível.
Usando Float para definir duas colunas
Embora existam muitos métodos de utilização do CSS para criar um local de duas colunas, este tutorial utiliza o
flutuador propriedade para mover uma coluna para o lado da outra. Em alguns aspectos, este método é mais flexível do que o método de posicionamento absoluto actualmente utilizada thesitewizard.com. Ele também permite que você adicione cabeçalho e rodapé opcional bares que abrangem ambas as colunas, se desejar.Compatibilidade
O CSS com duas colunas dada aqui foi testado para trabalhar em Internet Explorer 6 e 7, Firefox, Opera e Safari .
O código HTML para um site básico 2 Coluna
A parte HTML do código é bastante simples. Você precisa basicamente de duas
div blocos, um para cada coluna.<div id="container"> <div id="navbar"> Navegação </ div> <div id="content"> conteúdo aqui </ div> </ Div>
As palavras "Navegação" e "Conteúdo aqui" são apenas espaços reservados para a barra lateral de navegação e conteúdo principal. Você deve remover essas palavras quando você coloca o seu conteúdo real. O "container"
div bloco é apenas um bloco colocando ambas as duas colunas, e é útil se você deseja aplicar determinados estilos que afetam ambas as colunas como uma unidade.O código CSS para um Basic 2 Coluna site usando um fluido ou layout líquido (larguras relativas)
Se você quer um site onde suas larguras de página expandir ou contrair de acordo com a grande janela do navegador do seu visitante é, você deve usar larguras relativas de suas colunas. No momento em que escrevo isto, thesitewizard.com usa um esquema tão fluido bem. Por exemplo, se você mudar o tamanho da janela do navegador, o navegador irá formatar este artigo, tanto quanto possível para caber dentro da janela (a menos que você redimensioná-la muito pequena).
O código CSS para isso é simples.
# Content {
margin-left: 20%;
}
# Navbar {
float: left;
width: 20%;
}
O código CSS tem que ir ou para o
estilo seção de sua página web ou uma folha de estilo externa. Veja como personalizar o código:Mudando a Largura
O estilo acima define a coluna lateral para sua barra de navegação para 20% da largura da janela do browser. Consequentemente, a margem esquerda da coluna que contém o seu conteúdo também está definido para começar em 20% a partir da borda esquerda da janela do navegador, caso contrário, o seu conteúdo vai coincidir com a sua barra de navegação.
Se você preferir que a largura da coluna lateral ser mais amplo ou mais restrito, basta alterar tanto asmargin-leftewidthpropriedades para o mesmo valor.
Você também pode usar pixels para a largura, em vez de uma porcentagem. Por exemplo, para restringir sua coluna barra de navegação para 200 pixels, altere cada um dos20%para os valores200pxvez. O uso de pixels é útil se você tiver uma imagem (como um logotipo) que você deseja colocar na coluna do lado e não quer que a coluna para ser mais estreita do que a sua imagem.Como colocar a barra de navegação para o Direito
O código acima coloca o menu de navegação na coluna da esquerda, assim como o que você vê na desta página . Se você preferir que o menu de navegação do lado direito, como é comumente encontrada em blogs, altere o código para que ele se parece com o seguinte:
Mais uma vez, mudar de "20%" para um valor apropriado para o seu site.# Content { margin-right: 20%; } # Navbar { float: right; width: 20%; }
O código CSS para um Basic 2 Coluna site usando um layout fixo
Embora, neste momento, eu ainda uso um layout largura relativa, ou layout líquido, como algumas pessoas gostam de chamá-lo, as desvantagens que eu mencionei em meu artigo A Grande fixo Vs Relativa Largura Layout de Página Debate estão se tornando mais aguda com o grandes resoluções de monitor que estão agora disponíveis.
Como resultado, algumas pessoas preferem fixar a largura de sua janela para um valor razoável, como 800 pixels ou 1024 pixels. Para usar um layout como fixo para o seu site, definir uma largura para o bloco contendo duas colunas. Aqui é onde a DIV recipiente vazio que você criou anteriormente vem a ser útil.
O seguinte código CSS cria uma página com uma largura fixa de 800 pixels.
# Container {
width: 800px;
}
# Content {
margin-left: 200px;
}
# Navbar {
float: left;
width: 200px;
}
No entanto, se você fizer o acima, e seu site aparece em uma janela do navegador mais largo do que 800 pixels, você vai descobrir que ambas as colunas serão liberados para o lado esquerdo da janela, deixando um mar de espaço em branco à direita da tela . O que você quer, em tal caso, é para ambas as colunas a ser centralizado na janela do navegador.
A maneira compatível com os padrões de centralizar um bloco é dado abaixo:
# Container {
width: 800px;
margin-left: auto;
margin-right: auto;
}
Para que este código para funcionar no IE 6 e 7, você deve ter um Document Type Definition válido ("DTD"), ou DOCTYPE, para a sua página web para evitar desencadear IE modo 6/7 's compatibilidade com versões anteriores (também conhecido como modo Peculiaridades para a maioria dos webmasters). Por exemplo, o HTML 4.01 DTD transição é o seguinte:
! <DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN" "Http://www.w3.org/TR/html4/loose.dtd">
As margens esquerda e direita estão definidos para
auto que faz com que os navegadores compatíveis com os padrões para dar-lhes tanto um valor igual, efetivamente centralização do bloco.Como colocar um cabeçalho ou rodapé Top Abrangendo ambas as colunas sobre a 2 coluna do Site
Alguns sites têm um cabeçalho superior que abrange ambas as colunas. Eles podem tanto colocar o logotipo ou o nome do site aqui, ou talvez até mesmo anúncios em banners ou ambos. Da mesma forma, alguns locais incluem um rodapé que abrangem ambas as colunas. Entre outras coisas, o rodapé pode ser usado para coisas como avisos de direitos autorais.
Para usar um cabeçalho e rodapé usando esse layout 2 colunas, modificar o código HTML da seguinte forma.
<div id="layout"> <div id="header"> Top Header </ div> <div id="navbar"> Navegação </ div> <div id="content"> conteúdo aqui </ div> <div id="footer"> inferior rodapé </ div> </ Div>
Adicione o seguinte código CSS para a sua folha de estilo existente. Basta colocá-lo depois que os estilos que você criou anteriormente .
# Footer {
clear: both;
}
Se você deseja que o texto em seu cabeçalho a ser centralizado, adicione o seguinte. Caso contrário, não há necessidade de definir um estilo de cabeçalho.
# Header {
text-align: center;
}
O mesmo
text-align propriedade pode ser adicionado ao rodapé para centralizar o texto lá também, se desejar.Assuntos Diversos
Top Line problemas de alinhamento
Você provavelmente vai achar que o IE 6 e 7 não se alinham as principais linhas de sua esquerda e direita colunas da mesma forma como todos os outros navegadores. Se o design do site passa a ser o alinhamento sensível, você pode querer usar o condicional inclui descrito no artigo Como usar diferentes folhas de estilo CSS para navegadores diferentes (e como ocultar código CSS a partir de navegadores mais antigos) para posicionar seu texto especificamente para esses navegadores. É melhor posicionar especificamente o código para o IE 6 e 7 apenas (e nem todas as versões do IE), já que a Microsoft prometeu que o IE 8 terá melhorado CSS conformidade com padrões, então se você posicioná-lo para todas as versões do IE, o design do site vai quebrar no IE 8 e acima.Texto e gráficos ir direto para o Edge
O código dado acima apenas fornece o layout básico. Tal como está, o texto e os gráficos ir direto para a borda de cada coluna. Uma maneira de fazer algum espaço entre o texto e as bordas é adicionar a seguinte propriedade para o seuconteúdo,barra de navegação,cabeçalhoerodapéseletores DIV.
A largura exata do estofamento é, naturalmente, depende de você. Opadding: 4px;
4pxdado aqui é apenas um exemplo.
