O css
/* Deixar as margens 0 em todo o site */
* {margin:0; pading:0;}
/* Border das imagens 0 */
img {border:0;}
/* cor e letra todo o site */
body {
background-color:#d9d9df;
font-family:Arial, Helvetica, sans-serif;
}
/* formatação */
h1, h2 {font-size:14px;font-weight:bold; }
p {font-size:12px}
.nota {font-size:11px; color: #3333FF;}
/* Estrutura geral do site */
#geral {
width:730px;
height:650px;
margin:0 auto; /* centra o div geral */
}
/* Topo do site e altura */
#topo {
width:730px;
height:156px;}
/* border-bottom:2px solid #fbc970;*/
/* Espaço menus */
#menus {width:730px; height:38px; background-image:url(IMAGENS/bg_menu.jpg);}
#menus ul { list-style-type:none; float:left; background-image:url(IMAGENS/bg_menu.jpg);}
#menus ul li {display:inline;}
#menus ul li a {padding:10px 45px; float:left; text-decoration:none; color:#77787b; border-left: 1px solid #a09a94}
#menus ul li a:hover {color: #000;}
/*CONTEUDO DO SITE*/
#conteudo {
width:730px;
height:392px;
background-color:#feefd6;
border-top: 2px solid #ecebef;
}
/* Coluna esq */
#coluna_esq {
width:550px;
height:392px;
padding-left:0px;
border-right: 3px solid #d9d9df;
float:left;
}
/* Coluna esqtop */
.coluna_esqtop {
width:544px;
height:100px;
padding-left:33px;
float: right;
}
/* Formatação */
.coluna_esqtop img{margin:5px; float:left;}
.coluna_esqtop h1 {color:#a2a2a3; padding:5px 0;}
/* Links */
.coluna_esqtop p a{color:#a2a2a3; text-decoration:none;}
.coluna_esqtop p a:hover {text-decoration:underline;}
/* Parte de baixo da coluna esquerda */
.coluna_esqbot {
width:453px;
height:230px;
background-image:url(Imagens/bg_evento.jpg);
background-repeat:no-repeat;
margin:14px 0 0 37px;
padding:10px 20px 10px;
_margin:4px 0 0 5px;
}
/* Formatação */
.coluna_esqbot h1 {color:#666666; padding-bottom:5px;}
.coluna_esqbot h2 {color: #a2a2a3; padding-top:5px;}
.coluna_esqbot h3 {color: #a2a2a3; padding-top:0px; font-size:12px;}
.coluna_esqbot h4 {color: #a2a2a3; padding-top:5px;font-size:12px;}
.coluna_esqbot p a{color:#0000CC; text-decoration:none;}
.coluna_esqbot p a:hover {text-decoration: underline;}
.coluna_esqbot img {float:left; margin:26px 5px;}
/* Parte de baixo da coluna esquerda para as paginas que nao index*/
.coluna_esqbotni {
width:453px;
height:500px;
background-image: url(Imagens/bg_contactos.jpg);
background-repeat:no-repeat;
margin:14px 0 0 37px;
padding:10px 20px 10px;
_margin:4px 0 0 5px;
}
/* Formatação */
.coluna_esqbotni h1 {color:#666666; padding-bottom:5px;}
.coluna_esqbotni h2 {color: #a2a2a3; padding-top:5px;}
.coluna_esqbotni h3 {color: #a2a2a3; padding-top:0px; font-size:12px;}
.coluna_esqbotni h4 {color: #a2a2a3; padding-top:5px;font-size:12px;}
.coluna_esqbotni p a{color:#0000CC; text-decoration:none;}
.coluna_esqbotni p a:hover {text-decoration: underline;}
.coluna_esqbotni img {float:left; margin:8px 5px;}
#coluna_dta {
width:167px;
height:382px;
padding: 5px;
float:left;
background-color:#FFFFFF;
}
/* Formatação */
#coluna_dta h1 {float: left;}
#coluna_dta h2 { color:#a2a2a3; ; font-size:10px;}
#coluna_dta h3 { color:#a2a2a3; font-size:10px;}
#coluna_dta h4 { color:#a2a2a3; font-size:10px; }
#coluna_dta h5 { color:#a2a2a3; font-size:10px;}
#coluna_dta h6 {font-size:14px;font-weight:bold; padding-bottom:4px;}
.linha { height:3px; background-color:#d9d9df;}
/* Coluna direita baixo */
#coluna_dta_bot {
height:100px;
padding-top:70px;
margin-bottom:15px;
margin-left:14px;
}
#coluna_dta_bot h1 { color:#a2a2a3; font-size:9px; margin-left:19px; font-variant:small-caps;}
#coluna_dta_bot h2 { color: #000000; font-size:9px; margin-left:19px; font-variant:small-caps;}
/* Inicio do rodape */
#Rodape {
width:730px;
height:49px;
border-top:0px solid #fae5c3;
background-color:#d9d7df;
padding-top:0px;
color:#000000;
text-align:center;
font-size:10px;
}
O html
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CRB</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
<!--
.style3 {color: #000000}
.style4 {color: #a2a2a3}
.style5 {
font-size: 12px
}
-->
</style>
</head>
<body>
<div id="geral">
<div id="topo"><img src="IMAGENS/Topo.jpg" /></div>
<div id="menus">
<ul>
<li><a href="index.html" style="border:none;">menu[/url]</li>
<li><a href="XXX">menu[/url]</li>
<li><a href="XXX">menu[/url]</li>
<li><a href="XXX">menu[/url]</li>
<li><a href="XXX">menu[/url]</li>
<li><a href="contct">menu[/url]</li>
</ul>
</div>
<div id="conteudo">
<div id="coluna_esq">
<div class="coluna_esqtop">
<img src="Imagens/477x104.jpg" alt= "imagem 01" />
</p>
</div>
<div class="coluna_esqbot">
<h1>Crb</h1>
<h2> Texto crb</h2>
<p> </p>
<h3 class="style5">Espaço reservado para uma breve nota introdutória ao site.</h3>
</div>
</div>
<div id="coluna_dta">
<h1 class="style4">Contactos</h1>
<div class="linha">
<h2> Morada</h2>
<div class="linha">
<h6 class="style4">Localização</h6>
<div class="linha">
<h2> Junto às </h2>
<h2>GPS: coordenadas gps</h2>
</div>
<div id="coluna_dta_bot">
<h2> Clique na Imagem</h2>
<img src="Imagens/localiz.jpg" alt="Clique sobre a imagem" /> </div>
<div class="linha">
</div>
</div>
</div>
</div>
<div id="Rodape"> © <span class="style3"> 2009</span>
Webdesign: JF</div>
</div>
</body>
</html>