Jump to content
Nazgulled

Simples site com 3 colunas sem tabelas

Recommended Posts

Nazgulled

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]

Share this post


Link to post
Share on other sites
Drone

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

tks pelo script!

Share this post


Link to post
Share on other sites
skin

Está muito simples e muito bom :) continua com estes exemplos :D .


Our lives begin to end the day we become silent about things that matter - Martin Luther King

Share this post


Link to post
Share on other sites
skin

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


Our lives begin to end the day we become silent about things that matter - Martin Luther King

Share this post


Link to post
Share on other sites
PaLobo

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

Eu sei... :D 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.  :)

Share this post


Link to post
Share on other sites
kingless

Só encontrei hoje :P Agora já sei mais ou menos como criar sites tableless.... Nazgulled thanks :)

Share this post


Link to post
Share on other sites
kingless

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

lagyj4.th.png

:P

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

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.

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

Share this post


Link to post
Share on other sites
ASA01

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

Share this post


Link to post
Share on other sites
Battousai

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.