• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

Nazgulled

[CSS] Simples site com 3 colunas sem tabelas

14 mensagens neste tópico

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.

tableless9kl.th.jpg

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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!

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Alguem pode dar uns sites porreiros de css ?

www.o-directorio.info :confused:

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora