Publicado por: Paulo Fernandes | 23/jun/2008

Layout Duas Colunas

Olá.
Este é meu primeiro POST e gostaria de dizer que espero muito que este seja o primeiro de muitos. Também vou dizer que não sou muito de ficar escrevendo, gosto de ir na prática.

Se surgir alguma dúvida, postem que assim que possível, respondo.

Vamos ao artigo, que é o que interessa!

Construção do Layout

  1. Topo da página com o nome do site e uma imagem de logo a esquerda;
  2. O site terá uma barra lateral com links que ficará do lado esquerdo;
  3. O site terá uma área à direita onde ficaram o conteúdo dos links;
  4. O site terá um rodapé para informar os direitos autorais do site.

OBS: Não estou me preocupando com cores ou com imagens apenas em posicionamento dos elementos.

Agora que já definimos o que precisamos daremos inicio ao trabalho, e o nosso primeiro passo é a construção do código xHTML. Neste momento criaremos a estrutura do código e mais para frente farei aos poucos as edições nas partes corretas e no final do artigo o arquivo completo.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Layout de Duas Colunas by aprendacss.wordpress.com</title>
<style type=”text/css”></style>
</head>
<body>
<div id=”tudo”>
<div id=”topo”></div>
<div id=”menu”></div>
<div id=”conteudo”></div>
<div id=”rodape”></div>
</div>
</body>
</html>

Agora que já temos o arquivo básico vamos construir o CSS que o posicionará onde queremos, para identificação dos elementos utilizarei cores, conforme segue legenda abaixo:

  • Topo: Verde;
  • Menu: Azul;
  • Conteudo: Vermelho;
  • Rodapé: Amarelo;

O código do CSS deve ser inserido dentro da Tag style

#tudo {
width: 788px;
}
#topo {
height: 150px;
background-color: #006400;
}
#menu {
float: left;
width: 168px;
height: 400px;
background-color: #0000FF;
}
#conteudo {
float: right;
width: 600px;
height: 400px;
background-color: #FF0000;
}
#rodape {
height: 40px;
background-color: #FFFF00;
}

Pronto! Temos um layout de duas colunas.

Agora explicarei o que foi utilizado neste código para obter o efeito desejado.

Na div menu utilizei o float: left;. Utilizar a propriedade float significa remover o elemento do fluxo do documento e inseri-lo após o ultimo elemento sem flutuação. Float: left diz para remover o elemento do fluxo do documento e posiciona-lo a esquerda. Já na div conteudo utilizei o float: right;, ele faz a mesma coisa porém diz para o elemento se flutuar a direita.

Muito legal, mas se copiarem e colarem o código, notarão que o rodapé está em lugar errado. De fato para ele ficar no lugar dele precisamos acrescentar no rodapé a propriedade clear: both;. Esta propriedade diz para o elemento rodape, no caso, se posicionar após o último elemento flutuante, independente da flutuação ter sido do lado esquerdo(left) ou do lado direito(right). O rodapé irá se posicionar no fim do documento.

Tinha me esquecido de um detalhe! Vocês notaram que existem um espaço em branco entre o menu e o conteúdo? Bom este espaço é deixado devido ao modelo caixa ser diferente entre os navegadores. Mais para frente farei um POST sobre o modelo caixa.

Agora sim acabou, abaixo segue o código completo do código.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Layout de Duas Colunas by aprendacss.wordpress.com</title>
<style type=”text/css”>
#tudo {
width: 788px;
}
#topo {
height: 150px;
background-color: #006400;
}
#menu {
float: left;
width: 168px;
height: 400px;
background-color: #0000FF;
}
#conteudo {
float: right;
width: 600px;
height: 400px;
background-color: #FF0000;
}
#rodape {
clear: both;
height: 40px;

background-color: #FFFF00;
}
</style>
</head>
<body>
<div id=”tudo”>
<div id=”topo”></div>
<div id=”menu”></div>
<div id=”conteudo”></div>
<div id=”rodape”></div>
</div>
</body>
</html>

Anúncios

Responses

  1. Aeeeeee

    aprendi a fazer uma página com CSS.

    dahora o blog.

  2. Que bom! 😀 Fico feliz em ter te ajudado.

    PS: muito legal seus trabalhos no flickr!!!

  3. […] Pronto! O layout está centralizado. Lembre-se que caso deseje pode usar as técnicas CSS Reset e  Layout de Duas Colunas. […]

  4. Oi gostei muito da explicação, bastante útil e espero que continue postando novos tutoriais.

  5. Boa noite! muito boa sua explicação, fiz aqui e deu certo… qeria aprender a fazer site em usar tabelas.. mas me parece q e muito dificil. agora como que eu jogo os menus CSS; e o conteudo no site? e dificil? e quando q vc ira publicar outro artigo? meu email de contato e: marciomgo@msn.com

    Fique com Deus e ate mais…

  6. @Lecca
    Muito obrigado.
    Espero poder postar sempre.

    @MARCIO GOMES
    Os artigos vou publicando conforme vou tendo tempo, as vezes é dificil conseguir tempo, mas vamos tentando.
    para sanar suas dúvidas sugiro o forum do imasters http://forum.imasters.com.br

    abraço

  7. ué… joguei o código no dreamweaver e a pagina fica vazia… o q houve?

    • da uma olhada nas aspas parece que ela fica diferente quando vc jogo no dreamweaver

  8. Cidinha

    você não deve ter colocado o CSS

    abraço

  9. Dessa forma tudo Ok, mas não existem formas de usar percentual, exemplo: O menu lateral eu defino com 200px e o conteudo com 100% do que sobrar de espaço?

    • Rodrigo, verifique se isso funciona

      <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
      “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
      <html xmlns=”http://www.w3.org/1999/xhtml”>
      <head>
      <title>Basico</title>
      <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
      <style>
      * {
      margin:0;
      padding:0;
      }
      #div1 {
      width: 200px;
      background-color: #F00;
      height: 100px;
      float: left;
      }
      #div2 {
      width: 100%;
      background-color: #FF0;
      height: 100px;

      }
      </style>
      </head>
      <body>
      <div id=”container”>
      <div id=”div1″>div 1</div>
      <div id=”div2″>div 2</div>
      </div>
      </body>
      </html>

      • Eu colei este código no bloco de notas,e abri no navegador e não funcionou,não sei onde eu errei !!!!!!

  10. Uma explicação direta e sem rodeios,tive pesquisando em outros sites está cheio de conversa e detalhes mas na hora “H”não funciona,parabéns pra você.


Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Categorias

%d blogueiros gostam disto: