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
- Topo da página com o nome do site e uma imagem de logo a esquerda;
- O site terá uma barra lateral com links que ficará do lado esquerdo;
- O site terá uma área à direita onde ficaram o conteúdo dos links;
- 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”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<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”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<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>
Aeeeeee
aprendi a fazer uma página com CSS.
dahora o blog.
Por: Ale em 23/Jun/2008
às 15:39:07
Que bom!
Fico feliz em ter te ajudado.
PS: muito legal seus trabalhos no flickr!!!
Por: Paulo Fernandes em 23/Jun/2008
às 15:42:03
[...] Pronto! O layout está centralizado. Lembre-se que caso deseje pode usar as técnicas CSS Reset e Layout de Duas Colunas. [...]
Por: Centralizando Layout na Horizontal « Aprenda CSS em 26/Jun/2008
às 09:21:59
Oi gostei muito da explicação, bastante útil e espero que continue postando novos tutoriais.
Por: Lecca em 26/Jul/2008
às 01:32:54
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…
Por: MARCIO GOMES em 1/Ago/2008
às 23:06:19
@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
Por: Paulo Fernandes em 12/Ago/2008
às 17:12:50
ué… joguei o código no dreamweaver e a pagina fica vazia… o q houve?
Por: Cidinha em 30/Mar/2009
às 13:30:26
Cidinha
você não deve ter colocado o CSS
abraço
Por: Paulo Fernandes em 30/Mar/2009
às 13:36:59