Ferramentas de Utilizador

Ferramentas de Site


dev_web:css:snippet:simples_site_com_3_colunas_sem_tabelas

Simples site com 3 colunas sem tabelas

Código 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=iso-8859-1" />
<title>Untitled Document</title>
<!-- CSS AQUI -->
</head>
<body>
<div id="header"></div>
<div id="left">
  <div class="nav-box">
    <div class="nav-header">Em Construção</div>
    <div class="nav-body">Em Construção</div>
  </div>
  <br />
  <br />
  <div class="nav-box">
    <div class="nav-header">Em Construção</div>
    <div class="nav-body">Em Construção</div>
  </div>
  <br />
  <br />
  <div class="nav-box">
    <div class="nav-header">Em Construção</div>
    <div class="nav-body">Em Construção</div>
  </div>
</div>
<div id="center">
  <div class="nav-header">Laguna CMS Brevemente</div>
  <div class="center-body"><img src="My Pictures/dest_lat_rede10.gif" width="50" height="50" alt="" align="right" style="margin-left: 5px" />
  O Laguna CMS é um sistema de gerenciamento de conteúdo dinamico, está neste momento em desenvolvimento, não se sabe a data
  de lançamento, mas esperamos qe seja em breve!<br />
    <br />
    <br />
    <br />
    <br />
    <div style="text-align: center">Postado por kingless em 30/06/2006</div>
  </div>
</div>
<div id="right">
  <div class="nav-box">
    <div class="nav-header">Em Construção</div>
    <div class="nav-body">Em Construção</div>
  </div>
  <br />
  <br />
  <div class="nav-box">
    <div class="nav-header">Em Construção</div>
    <div class="nav-body">Em Construção</div>
  </div>
</div>
</body>
</html>

Código CSS

<style type="text/css">
<!--
body {
   margin: 0;
   background-color: #CCCCCC;
}
#header {
   background-color: #CC0000;
   height: 125px;
}
#left {
   position: absolute;
   left: 10px;
   top: 145px;
   width: 180px;
}
#center {
   margin: 20px 205px 0 205px;
}
#right {
   position: absolute;
   right: 10px;
   top: 145px;
   width: 180px;
}
div.nav-box {
   border: 1px solid #000000;
   padding: 5px;
}
div.nav-header {
   background-color: #CC0000;
   height: 22px;
   padding: 3px 0 0 5px;
}
div.nav-body {
   margin-top: 5px;
   background-color: #F2F2F2;
   text-align: center;
}
div.center-body {
   padding: 10px;
   background-color: #F2F2F2;
}
-->
</style>
Tópico de discussão no fórum: Simples site com 3 colunas sem tabelas
dev_web/css/snippet/simples_site_com_3_colunas_sem_tabelas.txt · Esta página foi modificada pela última vez em: 2018/05/26 22:08 por staff