Simples site com 3 colunas sem tabelas

July 13, 2006 at 08:18 PM

Apesar dos enumeros sites que existem com exemplos disto, aqui vai um a pedido do kingless para transformar o seu CMS num site tableless. Postei aqui o código para servir de referência a mais gente que esteja interessada.

<!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>
  

  

  <div class="nav-box">
    <div class="nav-header">Em Construção</div>
    <div class="nav-body">Em Construção</div>
  </div>
  

  

  <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!

    

    

    

    

    <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>
  

  

  <div class="nav-box">
    <div class="nav-header">Em Construção</div>
    <div class="nav-body">Em Construção</div>
  </div>
</div>
</body>
</html>

<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>

[Artigo no Wiki]

Drone · July 18, 2006 at 11:06 PM

Estou interessado em perceber como fazer sites com CSS, este codigo que pusestes aqui nao tive qualquer tipo de problemas e ja imaginava que era assim que funcionava, mas imaginemos que tenho um sistema de noticias e essa div que tens como center ia-se repetindo para baixo, como faria isso?

é esta a unica duvida mais preocupante penso eu que de momento tenha...

EDIT: esquece axo que ja percebi, tive a ver as cenas dos menus ao lado e ja vi cm se faz mais ou menos, vou entao tentar fazer uma pagina so com divs em vez de tables 😛

tks pelo script!

skin · July 19, 2006 at 09:43 AM

Está muito simples e muito bom 🙂 continua com estes exemplos 😄 .

PaLobo · July 19, 2006 at 11:06 AM

Mais um que agradece. Estou também a tentar aprender CSS (e PHP e Python e HTML e ... muita coisa...) 🙂

Será muito mais fácel depois de ver este excelente exemplo. Como sempre... !

skin · July 19, 2006 at 11:11 AM

PaLobo posso dar-te um conselho?? não tentes aprender mts linguagens ao mesmo tempo...

PaLobo · July 19, 2006 at 11:45 AM

PaLobo posso dar-te um conselho?? não tentes aprender mts linguagens ao mesmo tempo...

Eu sei... 😄 Comecei com python, mas tive que interromper pois surgiu um projecto imprevisto para o qual vou precisar de html (já tenho uns conhecimentos base de html), CSS e PHP (e de que maneira.)

Portanto, python está em standby... sniff sniff. Estou portanto a dedicar-me fulltime a PHP, aprofundar um pouco mais os meus conhecimentos rudimentares de HTML e iniciar-me em CSS. (tudo isto para o mesmo projecto é claro.)

Mas obrigado pelo conselho skin. 🙂

kingless · August 3, 2006 at 02:26 AM

Só encontrei hoje 😛 Agora já sei mais ou menos como criar sites tableless.... Nazgulled thanks 🙂

kingless · August 3, 2006 at 03:38 PM

Já começei a fazer o template do meu CMS tableless... Ainda estou a testar e a ver se o template fica como eu quero... se ficar tudo bem eu coloco no CMS

http://img194.imageshack.us/img194/299/lagyj4.th.png

😛

PS: Só estou com alguns problemas a colocar o logo no header mas vou ver se consigo resolver...

EDIT: Já consegui colocar o logo no header 🙂

http://img280.imageshack.us/img280/863/lag1ag8.th.png

O 1º logo foi feito com tabelas e o 2º logo foi feito com divs.. é dificil encontrar diferenças entre os dois logos.

http://img387.imageshack.us/img387/5092/lag2pb8.th.png

Aqui fica o código do 1º logo (tabela);

<table width="275" height="140" border="0" cellpadding="0" cellspacing="0">
<tr>
     <td rowspan="2">
         <img src="http://img182.imageshack.us/img182/759/lagunabaner01hm5.gif" width="63" height="106" alt="laguna CMS!" /></td>
      <td>
    <img src="http://img182.imageshack.us/img182/4734/lagunabaner02fi4.gif " width="212" height="41" alt="laguna CMS!" /></td>
</tr>
<tr>
     <td>
<a href="index.php"><img src="http://img182.imageshack.us/img182/2274/lagunabaner03mw3.gif" width="212" height="65" border="0" alt="laguna cms" /></a></td>
</tr>
<tr>  <td colspan="2">
        <img src="http://img182.imageshack.us/img182/8000/lagunabaner04ap9.gif" width="275" height="34" alt="laguna CMS!" /></td>
</tr>
    </table>

2º logo (divs)

<div id="logotipo">
        <div id="baner_01"></div>
        <div id="baner_02"></div>
        <div id="baner_03"></div>
        <div id="baner_04"></div>
</div>

CSS das divs

div#logotipo {
               position: absolute;
                width: 275px;
                height:140px;
                border: 0px;
}
div#baner_01 {
                position: absolute;
                background: url( 'http://img182.imageshack.us/img182/759/lagunabaner01hm5.gif' );
                width: 63px;
                height: 106px;
}
div#baner_02 {
                background: url( 'http://img182.imageshack.us/img182/4734/lagunabaner02fi4.gif' );
                width: 212px;
                height: 41px;
                float: right;
}
div#baner_03 {
                background: url( 'http://img182.imageshack.us/img182/2274/lagunabaner03mw3.gif' );
                width: 212px;
                height: 65px;
                border: 0px;
                float: right;
}

div#baner_04 {
                position: absolute;
                background: url( 'http://img182.imageshack.us/img182/8000/lagunabaner04ap9.gif' );
                width: 275px;
                height: 34px;
                bottom: 0px;
}

Gurzi · August 6, 2006 at 04:01 PM

Alguem pode dar uns sites porreiros de css ?

karva · August 6, 2006 at 07:15 PM

excelente mesmo...

tnks

UnKnowN · August 6, 2006 at 08:43 PM

Alguem pode dar uns sites porreiros de css ?

www.o-directorio.info 😕

PaLobo · August 8, 2006 at 11:29 AM

Também tens o www.tableless.com.br.

ASA01 · October 6, 2006 at 03:46 PM

Boas

e ja agr obrigado, pelo teu exemplo.

Eu peguei no teu exemplo e modifique ao meu estilo agr tou com um "prob", eu tenho varios link's como é que faço para o link da pagina aparecer no div do body.

por exemplo

<div id="center">
<div class="center-body">

Pagina de teste<br />

<br /> "Eu quero mostrar aqui a pagina que foi pedida"

<div style="text-align: center">-----</div>

</div>

</div>

Eu consigo desenrascar o prob com php mas queria uma solução profissional 🙂

Ja agr a ideia é misturar php com isto pois isto vai ser um projecto k eu tou a criar, dpx logo ponho o projecto aqui no forum

Battousai · November 26, 2007 at 11:55 AM

Esta solução é um bocado limitada se considerarmos que as tabelas estão fixas com absolute.

Sign In

Simples site com 3 colunas sem tabelas

Recommended Posts

Guest id194

Drone

skin

PaLobo

skin

PaLobo

kingless

kingless

Gurzi

karva

UnKnowN

PaLobo

ASA01

Battousai

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information