Site básico de duas colunas

O Jeison Frasson escreveu (ou copiou) isso no dia 21/05/2009 Voltar

Esse é um exemplo básico de como fazer um site dividindo em duas colunas, como todos os padrões de hoje em dia.

É uma ótima solução para estudos, porem já está meio defasada já que atualmente se usa 960px ou fullscreen ao invez de 760px de largura para sites

Seguem os scripts

Arquivo index.html

<html>
<head>
	<title>Seu site</title>
	<link href="estilo.css" rel="stylesheet" type="text/css" media="screen">
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
	<div id="geral">
		<div id="topo">Ponha aki seu logotipo</div>
		<div id="coluna1">
			<ul id="menu">
				<li>Home</li>
				<li>Home</li>
				<li>Home</li>
				<li>Home</li>
			</ul>
		</div>
		<div id="centro">Aqui normalmente vai o texto</div>
		<div id="rodape">feito por mim</div>
	</div>
</body>
</html>

Salve o código abaixo na mesma pasta

estilo.css

* { 
	margin: 0; 
	padding: 0; 
	color: #000; 
	font: 10px verdana;
	}
	
img { 
	border: none; 
	}
	
body { 
	text-decoration: none; 
	background: #fff; 
	text-align:center; }
a:link, a:visited, a:hover, a:active { 
	color: #000; 
	text-decoration: none; 
	}
	
#geral { 
	width: 760px; 
	text-align:left; 
	margin: 0 auto; 
	border: 1px solid #000;
	}
	
#topo { 
	width: 100%; 
	height: 120px; 
	border-bottom: 1px solid #000;
	}
	
#centro { 
	margin-left: 122px; 
	padding: 5px;
	}
#coluna1 { 
	width: 120px; 
	float: left; 
	border-right: 1px solid #000;
	}
	
#menu li { 
	display: block; 
	list-style-type: none; 
	padding: 4px; 
	}
	
#rodape { 
	clear: both; 
	text-align: center; 
	border-top: 1px solid #000;
	}

Bom é só isso... não é bem o que fazer mesmo rsrs, para um artigo posterior vou ensinar técnicas de como fazer um site fullscreen com uma coluna fixa e o rodapé sempre no fim da página

Site básico de duas colunas

Comentar