Meu layout está certo ?
Eu dei uma lida nos tutoriais e resolvi fazer um layout para o meu site(com base nos exemplos, ctrl+c + ctrl+v), gostaria de saber se está correto.
Depois criarei um arquivo css
>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<title>Centrar uma página com CSS</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<head>
<style type="text/css">body {
margin:0;
padding:0;
background:#ffffff;text-align:center; / hack para o IE /
}
#tudo {
width: 760px;
margin:0 auto;
padding: 10px;text-align:left; / "remédio" para o hack do IE /
}
#conteudo {
padding: 5px;
background-color: #eeeeee;
}
#topo{
width:auto;
height:60px;
background-color:#333;
border-top:1px solid #666;
border-bottom:2px dotted #666;
color:#0f0;
text-align:center;
}
#conteudoEsq {
position:absolute;
width:190px;
top:150px;
left:270px;
color:#99f;
padding-bottom:20px;
border-bottom:3px double #666;
}
#conteudoDir {
position:absolute;
width:140px;
top:150px;
right:270px;
color:#99f;
padding-bottom:20px;
border-bottom:3px double #666;
}
#colEsq {
background:#444;
}
#sepEsqcolCentral {
margin-left:200px;
padding-left:2px;
background:#666;
}
#colDir {
background:#444;
margin:0px;
}
#sepcolCentralDir {
margin-right:150px;
padding-right:2px;
background:#666;
}
#colCentral {
background:#22232F;
color:#991;
padding:2px 10px;
text-align:justify;
border-bottom:1px solid #666;
}
</style>
</head>
<body>
<div id="tudo">
<div id="conteudo">
<h1>Pagina Centrada com CSS sem scroll ate 800x600</h1>
<div id="topo">
<h1>TOPO</h1>
</div>
<div id="conteudoEsq">
<h3>COLUNA ESQUERDA</h3>
<p>Lorem .... </p>
<p>gfdg</p>
<p>df</p>
<p>sdfsd</p>
<p> </p>
<p>gd</p>
<p>fg</p>
<p> </p>
</div>
<div id="colEsq">
<div id="sepEsqcolCentral">
<div id="colDir">
<div id="conteudoDir">
<h3>COLUNA DIREITA</h3>
<p>gdfgdf</p>
<p>fd</p>
<p>fsd</p>
<p>f</p>
<p>sdf</p>
<p> </p>
<p>gd</p>
<p>fgLorem ipsum ... </p>
</div>
<div id="sepcolCentralDir">
<div id="colCentral">
<h1>COLUNA CENTRAL</h1>
<h3>Abaixo a folha de estilo
deste layout:</h3>
..............
<h3>E abaixo o código HTML</h3>
<p>.......
</p>
<p>g</p>
<p>g</p>
<p>g</p>
<p>g </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Discussão (3)
Carregando comentários...