Conheça o Plugfeed | » Início » Desenvolvimento » CSS e Tableless » Criando um layout simples, parte 2
Conheça o Plugfeed | » Início » Desenvolvimento » CSS e Tableless » Criando um layout simples, parte 2 -->
 
Avaliação: | Publicado em: 04/09/2006
Criando um layout simples, parte 2
Leonardo L Procopio (mas pode me chamar de Léo!). Sou formado em Analise e Desenvolvimento de Sistemas. Trabalho com desenvolvimento deskop e web. Meu objetivo e transmitir o que sei de forma simples e descontraída!
Criando um layout simples, parte 2

Salve, salve!!!
Aqui estou novamente, e dando continuidade ao artigo passado, eu vou agora explicar o código css de nosso layout tableless!
Pelo visto você já deve ter refletido e entendeu qual é o certo, então vamos começar!!!

Utilize seu editor favorito, a nosso pagina é bem simples e de fácil confecção.
Utilizamos um documento xhtml e um css externo. A estrutura do xhtml é a seguinte:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>Duas Colunas</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<div id="tudo">
    <div id="topo">
        <h1>Duas Colunas</h1>
    </div>
    <div id="colEsq">
         <h3>Menu</h3>
         <p>texto, com texto, com texto</p>
         <p>texto, com texto, com texto</p>
         <p>texto, com texto, com texto</p>
         <p>texto, com texto, com texto</p>
         <p>texto, com texto, com texto</p>
         <p>texto, com texto, com texto</p>
         <p>texto, com texto, com texto</p>
         <p>&nbsp;</p>
    </div>
    <div id="colDir">
         <h2>Conteudo</h2>
         <p>quanto mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!</p>
         <p>quanto mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!</p>
    </div>
    <div id="rodape">
         Desenvolvido...
    </div>
</div>
</body>
</html>

Até ai sem muito mistério certo?! (se você encontrar alguma duvida na marcação xhtml é só falar em!).
Utilizamos a tag <div> pra dividir o documento em áreas. Ele é o comando mais recomendado pra isso, pois alem de ser um bloco, ele fui desenvolvido para essa função.
Faça um teste no seu navegador (fica acanhado não fiel!!)
Percebeu alguma coisa? Não? Olha de novo!
Você percebe que o documento esta dividido em áreas, ou melhor, em blocos. Mas ta feio pacas, e não é esse o nosso objetivo. Afinal, você quer fazer uma estrutura de simples, como se encontra na maioria dos sites.
Então, o próximo passo é colocar o comando que vincula o arquivo css a nossa pagina:
<link href="nomedoarquivo.css" rel="stylesheet" type="text/css" />
Bom já que não vamos mais altera o código xhtml, vamos nos dedicar ao css. Segue o mesmo esquema, abra o seu edito e crie um arquivo e salve com a extensão css (se for seguir o nosso exemplo salve como formatacao.css).
A chamada desse arquivo usando o comando link, ficará assim:
<link href="formatacao.css" rel="stylesheet" type="text/css" />
E lembre-se você deve colocar esse comando dentro do <head>  </head>(qualquer duvida, de uma olhada no código!)

Nosso primeiro passo em busca da formatação, vai ser deixar todos os elementos com margem 0. Ao meu ver isso é útil, pois assim podemos dar “vida” a eles sem que o mesmo não tenha nada!
* {
    margin: 0;
}

Até aqui tudo tranquilim, mas nosso objetivo é colocar o site com uma largura de 770px e que ele fique centralizado no monitor.
Então vamos começar a executar essa missão, largura 770px e alinhamento!
#tudo {
    width: 770px;
    margin: 5px auto;
}
Até aqui, já da pra ver uma certa mudança na apresentação do documento. Mas perai... tem uns brothers que estão me olhando meio estranho... Já sei, você estão utilizando Internet Explorer (IE). Mas já vamos dar um jeito nisso. Quando nos utilizamos o comando margin: 5px auto; estamos dizendo que o <div id=”tudo”> deve ter 5px de margem superior e inferior, e sua margem direita e esquerda deve ser automáticas. Ou seja, o navegador (browser se preferir!) vai ver a resolução (no meu caso é 1024) e vai ver o tamanho do Div (no nosso caso 770px), misteriosamente (to zuando!) ele faz o seguinte  calculo:
(1024 – 770) / 2  = 127
Ele pego o resultado da subtração da resolução pela tamanho do Div e dividiu esse resultado por dois (entenda como margem esquerda e direita!). Colocando esse resultado automaticamente nessas margens.
Ufa! Mas tem um probleminha! O IE não consegue entender margin: auto (será que ele não sabe fazer conta!?). Então temos que fazer determinadas “Gambiarras, remendos, truques, golpes” ou se preferir Hackes, para que ele de o resultado que pretendemos.
Uma solução simples e boa é formatar a tag body para que todo o seu texto seja centralizado (o IE centraliza tudo!).
body {
    text-align: center;
}
Mas Léo, alem de centralizar a Div, centralizo até o texto! Muita calma nessa hora... vamos reverter esse probleminha declarando no #tudo alinhamento do texto a esquerda:
#tudo {
    width: 770px;
    margin: 5px auto;
    text-align: left;
}
Bom, estamos progredindo! Agora vamos formatar o topo!
#topo {
    height: 110px;
    text-align: center;
    background-color: #339999;
}
Agora nos vamos colocar as colunas nos lugares!
#colEsq {
    width: 170px;
    float: left;
    background-color: #6699ff;
}
Testa para ver como ta ficando! Tu percebe que o conteúdo do colDir esta indo pra debaixo do colEsq, e nos não queremos isso (positivo!?), então:
#colDir {
    width: 600px;
    float: left;
    background-color: #fff;
}
E ai fera, sapatim?!
Então, agora vamos ter que colocar o rodape no seu devido lugar!
#rodape {
    background-color: #339999;
    height: 20px;
    text-align: center;
    clear: both;
}
A diferença nessa marcação é que utilizamos o comando clear pra limpar! Ou seja, ele controla o que vai aparecer ao seu lado (clear: both diz que não vai aparecer nada nos lados!).
Até ai tudo na moral!  Mas quando o texto do colDir é grande, a colEsq não acompanha esse crescimento. Mas como não queremos deixar assim, uma das soluções é colocar uma imagem de fundo com as cores das colunas:


É só acrescentar o comando no #tudo:
#tudo {
    width: 770px;
    margin: 5px auto;
    text-align: left;
background-image: url(fundo.gif);
}
Resolvido mais um problema!
E ai esta o seu esqueleto pronto!
Lógico que você não vai deixar ele todo feio assim (pois essas cores, ta igual a 9ª divisão do carnaval!). Altere o código, acrescente mais detalhes, comece descolando os textos, formatando,  pois só assim você vai conseguir aprender mesmo! Qualquer duvida vocês sabem onde me encontrar!!

================
msn: leonardomerce@hotmail.com
twitter.com/eek_

relatosnoturno.blogspot.com
Este artigo é a parte 2 de 2 da seguinte série:
  1. Criando um layout simples, parte 1
  2. Criando um layout simples, parte 2

Muito bom Léo, pensei que você não ia falar sobre o codigo!
Agora deu p/sentir firmeza!
Grande abraço vei!
oi...
parabéns viu...
otima dica...
preciso de ajuda pra criar uma layout cara!!!
me add no msn se vc tem.. ate
Leonardo Procópio <leonardolp@gmail.com>
Já t add mano!!
Abração!
Po, valeu mesmo pela dica, é muito importante para nós que estamos iniciando com o Tabless e CSS. Abraço!
desconhecido
bom para inicienta ter uma deia logica de estrutura : Não avaliado
Norival Hubner <norival.hubner@gmail.com>
bem legal o seu artigo, vc tem futuro. o excesso de girias pode te tirar muitos pontos!
Cid Rocha <cidjarc@gmail.com>
Muito bom para quem esta iniciando como eu.

Mas fiquei com uma duvida;

Quero coloar mais um coluna no lado direito.

No IE6 ficou legal, mas no Firefox 2 essa terceira coluna foi para baixo.

qua seria o procedimento para tratra ess terceira coluna?
Leonardo L Procópio <leonardolp@gmail.com>
Cid Rocha, você terá que fazer uma coluna igual a esquerda, e só que na propriedade float muda para right.
E onde esta a o conteudo (colDir), reduz o seu tamanho (que esta 600), assim a coluna direita vai flutuar até a direita e o conteudo vai se encaixar entre elas.
Grande abraço!
cara fiz tudo direitinho e deu certo no IE mas no fire fox a coldir continua embaixo da colesq.
oq fazer?
Leonardo L Procópio <leonardolp@gmail.com>
David, faça o seguinte, coloque uma cor de fundo na coluna direita para servir como debug, assim você ira saber o tamanho, se tem algo furando, coisas assim.
Esse codigo do artigo esta funcionando correto, eu testei agora e rolou tranquilo, qualquer coisa posta o seu codigo para darmos uma analisada!
Grande abraço! : Não avaliado
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>Obo&eacute; Shop</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="formatacao.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style5 {
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
.style7 {font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #FFFFFF; }
a:link {
color: #3A0A7A;
text-decoration: none;
}
#tudo #menu_hor .style9 {
}
a:visited {
color: #3B0F7B;
text-decoration: none;
}
a:hover {
color: #3B0F7B;
text-decoration: underline;
}
a:active {
color: #3B0F7B;
text-decoration: none;
}
.style9 {font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; }
#tudo #menu_hor .style9 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #40117C;
text-decoration: none;
}
.style14 {color: #D47B17; font-family: Arial, Helvetica, sans-serif; font-size: 11px;}
.style15 {color: #FFFFFF}
-->
</style>
</head>

<body>
<div id="tudo">
<div id="topo">
<table width="779" height="128" border="0" cellpadding="0" cellspacing="0" background="Imagens/topo.gif">
<tr>
<th width="344" scope="row">&nbsp;</th>
<td width="435" valign="top"><br />
<table width="323" border="0" cellpadding="0" cellspacing="0">
<tr>
<th width="89" align="left" class="style5" scope="row"><a href="index.html"> Meu Cadastro </a></th>
<td width="79" align="left" background="index.html" class="style7"><a href="index.html">Meus Pedidos </a></td>
<td width="151" align="left" class="style7"><a href="index.html"> Central de Atendimento </a></td>
</tr>
<tr>
<th colspan="10" align="left"scope="row"><form id="form1" name="form1" method="post" action="">
<label for="select"></label>
<select name="select" id="select">
<option value="" selected="selected">Oque voc&ecirc; procura?</option>
<option>Automotivo</option>
<option>Beb&ecirc;s</option>
<option>Beleza &amp; Sa&uacute;de</option>
<option>Brinquedos</option>
<option>Cama, Mesa &amp; Banho</option>
<option>Casa &amp; Jardim</option>
<option>CDs</option>
<option>Cine &amp; Foto</option>
<option>DVDs &amp; VHS</option>
<option>Eletrodom&eacute;sticos</option>
<option>Eletr&ocirc;nicos</option>
<option>Eletroport&aacute;teis</option>
<option>Esporte &amp; Lazer</option>
<option>Flores</option>
<option>Games</option>
<option>Alimentos e Bebidas</option>
<option>Im&oacute;veis</option>
<option>Inform&aacute;tica</option>
<option>Inst. Musicais</option>
<option>Livros</option>
<option>Livros Importados</option>
<option>Moda &amp; Acess&oacute;rios</option>
<option>Papelaria</option>
<option>Perfumaria</option>
<option>Pet Shop</option>
<option>Rel&oacute;gios &amp; Presentes</option>
<option>Suplementos &amp; Vitaminas</option>
<option>Telefones &amp; Celulares</option>
<option>T&ecirc;nis</option>
<option>UD</option>
<option>Vinhos</option>
</select>
<label>
<input name="textfield" type="text" size="18" />
</label>
</form> </th>
</tr>
<tr>
<th colspan="10" align="left" class="style14 style15" scope="row"><table width="320" border="0" cellpadding="0" cellspacing="0">
<tr>
<th width="73" align="left" class="style5" scope="row">Televendas:</th>
<td width="184" background="index.html"><span class="style9"><a href="index.html">4003-3000 / </a></span><span class="style9"><a href="index.html">(0xx85) 4003-3000 </a></span></td>
<td width="63" align="right" class="style7"><form id="form2" name="form2" method="post" action="">
<label>
<input type="image" src="Imagens/botao.gif" value="ENVIAR" alt="botão enviar com efeito aqua" />
</label>
</form>
</td>
</tr>
</table></th>


</tr>
</table></td>
</tr>
</table>
</div>
<div id="menu_hor">
<table width="779" height="70" border="0" cellpadding="0" cellspacing="0">
<tr>
<th height="54" align="left" background="Imagens/menu_hor.gif" scope="row"><table width="779" height="70" border="0" cellpadding="0" cellspacing="0">
<tr>
<th width="76" align="right" scope="row"><span class="style9"><a href="index.html">Inform&aacute;tica</a></span></th>
<td width="78" align="right" class="style9"><a href="index.html">Eletr&ocirc;nicos</a></td>
<td width="97" align="right" background="index.html" class="style9"><a href="index.html">Eletroport&aacute;teis</a></td>
<td width="116" align="right" background="index.html" class="style9"><a href="index.html">Eletrodom&eacute;sticos</a></td>
<td width="101" align="right" background="index.html" class="style9"><div align="center"><a href="index.html">Telefones<br />
&amp; Celul&aacute;res </a></div></td>
<td width="59" align="right" background="index.html" class="style9"><div align="center"><a href="index.html">Cine<br />
&amp; Foto </a></div></td>
<td width="40" align="right" background="index.html" class="style9"><a href="index.html">DVDs</a></td>
<td width="51" align="right" background="index.html" class="style9"><a href="index.html">Livros</a></td>
<td width="58" align="right" background="index.html" class="style9"><a href="index.html">Esporte<br />
&amp; Lazer </a></td>
<td width="86" align="right" background="index.html" class="style9"><a href="index.html">Brinquedos</a></td>
<td width="17">&nbsp;</td>
</tr>
<tr>
<th colspan="100%"height="29" scope="row"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="779" height="29">
<param name="movie" value="Imagens/imagens _flash/barrinha_12x.swf" />
<param name="quality" value="high" />
<embed src="Imagens/imagens _flash/barrinha_12x.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="779" height="29"></embed>
</object></th>
</tr>
</table></th>
</tr>
</table>

</div>
<div id="colEsq">
<h3>Menu</h3>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>texto, com texto, com texto</p>
<p>&nbsp;</p>
</div>
<div id="colDir">
<h2>Conteudo</h2>
<p>quanto mais, mais quanto!quanto mais, mais quanto!quanto
mais, mais quanto!quanto mais, mais quanto!quanto
mais, mais quanto!quanto mais, mais quanto!quanto
mais, mais quanto!quanto mais, mais quanto!quanto
mais, mais quanto!quanto mais, mais quanto!quanto,mais, mais quanto!quanto mais, mais quanto!quanto
mais, mais quanto!quanto mais, mais quanto!quanto
mais, mais quanto!quanto mais, mais quanto!quanto
mais, mais quanto!quanto mais, mais quanto!quanto
</p>
<p>quanto mais, mais quanto!quanto mais, mais quanto!quanto
mais, mais quanto!quanto mais, mais quanto!quanto
mais, mais quanto!quanto mais, mais quanto!quanto
mais, mais quanto!</p>
</div>
<div id="rodape">
Desenvolvido...
</div>
</div>

</body>
</html>
<style>
{
margin: 0;
}
#tudo {
/width: 770px;/
margin: 5px auto;
text-align: left;
}
body {
text-align: center;
}
#topo {
height: 128px;
text-align: center;
background-image: url(imagenstopo_fundo.gif)
}
#menu_hor {
height: 70px;
text-align: center;
background-image: url(imagensmenu_hor_fundo.gif)
}
#colEsq {
width: 170px;
float: left;
background-color: #6699ff;
}

#colDir {
/width: 600px;/
float: left;
text-align: right;
background-color: #fff;
}
#rodape {
background-color: #339999;
height: 20px;
text-align: center;
clear: both; #tudo #menu_hor .style9 {
}
</style>
<style>
{
margin: 0;
}
#tudo {
/width: 770px;/
margin: 5px auto;
text-align: left;
}
body {
text-align: center;
}
#topo {
height: 128px;
text-align: center;
background-image: url(imagenstopo_fundo.gif)
}
#menu_hor {
height: 70px;
text-align: center;
background-image: url(imagensmenu_hor_fundo.gif)
}
#colEsq {
width: 170px;
float: left;
background-color: #6699ff;
}

#colDir {
/width: 600px;/
float: left;
text-align: right;
background-color: #dd2255;
}
#rodape {
background-color: #339999;
height: 20px;
text-align: center;
clear: both;
}
</style>
olá!
fiz tudo novamente com o próprio scrpt do forum e continua sem dar certoo no fire fox, a coldir vai pra baixo da colesq!
por gentileza gostaria de uma ajuda !!
Leonardo L Procópio <leonardolp@gmail.com>
Aqui funcionou certim.
coloca somente esse css e veja:
<style type="text/css">
<!-- .style5 { font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; } .style7 {font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #FFFFFF; } a:link { color: #3A0A7A; text-decoration: none; } #tudo #menu_hor .style9 { } a:visited { color: #3B0F7B; text-decoration: none; } a:hover { color: #3B0F7B; text-decoration: underline; } a:active { color: #3B0F7B; text-decoration: none; } .style9 {font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; } #tudo #menu_hor .style9 { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #40117C; text-decoration: none; } .style14 {color: #D47B17; font-family: Arial, Helvetica, sans-serif; font-size: 11px;} .style15 {color: #FFFFFF} -->
</style>
<style> { margin: 0; } #tudo { /width: 770px;/ margin: 5px auto; text-align: left; } body { text-align: center; } #topo { height: 128px; text-align: center; background-image: url(imagenstopo_fundo.gif) } #menu_hor { height: 70px; text-align: center; background-image: url(imagensmenu_hor_fundo.gif) } #colEsq { width: 170px; float: left; background-color: #6699ff; } #colDir { /width: 600px;/ float: left; text-align: right; background-color: #dd2255; } #rodape { background-color: #339999; height: 20px; text-align: center; clear: both; } </style>
: Não avaliado
Cara agora deu certo com o Fire Fox mais não da certo com IE, ele fica só no centro com o IE!
Será q tem solução?

Leonardo L Procópio <leonardolp@gmail.com>
faça assim, substitua o ultimo style por esse:
<style> { margin: 0; } #tudo { margin: 5px auto; text-align: left; } body { text-align: center; } #topo { height: 128px; text-align: center; background-image: url(imagenstopo_fundo.gif) } #menu_hor { height: 70px; text-align: center; background-image: url(imagensmenu_hor_fundo.gif) } #colEsq { width: 170px; float: left; background-color: #6699ff; } #colDir { padding-left: 170px; text-align: right; background-color: #dd2255; } #rodape { background-color: #339999; height: 20px; text-align: center; clear: both; } </style>
grande abraço! : Não avaliado
MUITO BOM CARA.
VALEU PELA SOLIDARIEDADE. É ASSIM QUE DEVE SER UM BOM PROFISSIONAL. PARABÉNS
mais ficou com mt duvida como fazer no firework me ajude por favor eu ate te add no msn pra manter contato








Um produto Detetive.net