Jump to content

  2. →
  3. →
  4. →
  5. →

Photo

Tableless... Layout Simples...

Started By [=]Montanha[=], 02/12/2005, 10:16

  • Faça o login para participar
10 replies to this topic

#1 [=]Montanha[=]

[=]Montanha[=]

    O Defenestrador!

  • Usuários
  • 794 posts
  • Sexo:Masculino
  • Localidade:het konijn bijt
  • Interesses:Photoshop, Illustrator, CorelDraw, Ilustração, poderes mutantes da mente e Defenestração! het konijn bijt

Posted 02/12/2005, 10:16


Bom Galera, bom dia!
Estou começando a estudar por contra própria esse lence de Tableless, CSS e etc...
Bom, minha dúvida é a seguinte:
quero contruir um Layout simples com 3 elementos principas: Topo, conteúdo e rodapé.
No Topo e conteúdo, tudo normal. Meu problema é com o rodapé. Como faço para ele ir se alinhando à base do conteúdo conforme o conteúdo vai crescendo?
É com DIV mesmo que se faz isso?

Desde já agradeço a ajuda!

Muito obrigado!

Aí, falow!

----------------------------------------------

Ainda bem que ningué respondeu a este tópico, pq eu já resolvi meu problema, mas surgiu um outro... ehehehehe!!

Seguinte:
Estou montando meu layout no mesmo esqueminha que falei anteriormente.
Aí, quero colocar mais 3 DIVs dentro do conteúdo. Defino a largura das 3 e posicionamento relativo. Nisso acontece que horizontalmente as DIV ficam alinhadas, mas verticalmente, ficam umas a linhadas às bases das outras... O que estou fazendo de errados?

Aí, falow!

Edição feita por: Fábio Gonçalves, 02/12/2005, 19:46.

(\_/)
(ò.ó)
(><)
het konijn bijtt!

#2 MaRaCa

MaRaCa

    Normal

  • Usuários
  • 118 posts
  • Sexo:Não informado

Posted 02/12/2005, 13:40

você poderia postar um exemplo para vermos?

#3 [=]Montanha[=]

[=]Montanha[=]

    O Defenestrador!

  • Usuários
  • 794 posts
  • Sexo:Masculino
  • Localidade:het konijn bijt
  • Interesses:Photoshop, Illustrator, CorelDraw, Ilustração, poderes mutantes da mente e Defenestração! het konijn bijt

Posted 02/12/2005, 16:25

Abaixo o meu teste...
Olha o teste q eu fiz...

Aí, falow!

(\_/)
(ò.ó)
(><)
het konijn bijtt!

#4 aetom

aetom

    Turista

  • Usuários
  • 59 posts
  • Sexo:Não informado

Posted 03/12/2005, 09:42

Faz assim.. entra no site abaixo...

pesca araguaia

eu usei 3 frames horizontais e 3 verticais.... essa é a minha index.htm

dentro da index do meio.. e coloquei a pagina q ja estava com 3 divs.....

Attached Files


Edição feita por: aetom, 03/12/2005, 09:42.

______________________
Thomas Souza
www.mediatom.com.br
Design gráfico e web

#5 [=]Montanha[=]

[=]Montanha[=]

    O Defenestrador!

  • Usuários
  • 794 posts
  • Sexo:Masculino
  • Localidade:het konijn bijt
  • Interesses:Photoshop, Illustrator, CorelDraw, Ilustração, poderes mutantes da mente e Defenestração! het konijn bijt

Posted 05/12/2005, 10:50

Faz assim.. entra no site abaixo...

pesca araguaia

eu usei 3 frames horizontais e 3 verticais.... essa é a minha index.htm

dentro da index do meio.. e coloquei a pagina q ja estava com 3 divs.....

Bom, Amigo!
Valew a intensão, mas eu acho que não era bem isso que eu desejava.
Eu sinceramente não gosto de trabalhar com frames.
Na verdade o que eu quero de desenvolver um layout em Tableless, isto é sem tabelas,quer dizer, onde as tabelas são usadas apenas para exibir dados tabulares e se usa CSS para alinhar os objetos no Layout.
valew!

Abrax!

Aí, falow!

(\_/)
(ò.ó)
(><)
het konijn bijtt!

#6 [=]Montanha[=]

[=]Montanha[=]

    O Defenestrador!

  • Usuários
  • 794 posts
  • Sexo:Masculino
  • Localidade:het konijn bijt
  • Interesses:Photoshop, Illustrator, CorelDraw, Ilustração, poderes mutantes da mente e Defenestração! het konijn bijt

Posted 06/12/2005, 10:38

Galera,
gostaria de agradecer aos que se habilitaram a responder meu tópico, mesmo sendo a minha dúvida um tanto quanto estúpida!

Então, mas acho que consegui sozinho resolver a minha dúvida. Vou postar o meu código destes experimento que eu fiz: [>>Experimento 001<<]e gostaria que me corrigissem o código caso ele esteja errado!

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tableless</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="css/estilo.css" rel="stylesheet" type="text/css">
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="topo">Topo</div>
<div id="conteudo">
  <div id="menu">
    <p>Menu</p>
    <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </div>
  <div id="centro">
    <p>Centro da p&aacute;gina</p>
    <p>Bl&aacute;</p>
    <p>Bl&aacute;</p>
    <p>Bl&aacute;</p>
    <p>Bl&aacute;</p>
    <p>bl&aacute;</p>
    <p>bl&aacute;</p>
  </div>
  <div id="banners">
    <p>Banners</p>
    <p>Banners</p>
  </div>
</div>
<div id="rodape">Rodap&eacute;</div>
</body>
</html>


CSS

/* CSS Document */
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
font-style: normal;
}
#topo {
width: 778px;
height: 80px;
background-color: #006699;
}
#conteudo{
width: 778px;
background-color: #FF0000;
vertical-align: top;
}
#rodape{
background-color: #CCCCCC;
width: 778px;
height: 20px;
overflow: visible;
}
#menu {
width: 200px;
background-color: #009900;
position: relative;
color: #FFFFFF;
font-size: 12px;
overflow: visible;
margin: 0px;
float: left;
}
#centro{
width: 500px;
background-color: #99FF00;
position: relative;
float: left;
}
#banners{
width: 78px;
background-color: #3399FF;
position: relative;
float: left;
}


Todos os códigos foram gerados no Dreaweaver.
Desde já o meu muito obrigado!

Aí, falow!

Edição feita por: [=]Montanha[=], 06/12/2005, 10:39.

(\_/)
(ò.ó)
(><)
het konijn bijtt!

#7 aetom

aetom

    Turista

  • Usuários
  • 59 posts
  • Sexo:Não informado

Posted 06/12/2005, 22:14

Fala ai montanha... tudo certo....

cara é o seguinte.. eu queria entender direito esse esquema de tableless.. mas nao consigo..... eu to fazendo o site clica aki pra ver o layout e nao to conseguindo fazer com tableless e nem com include (pq nao sei mesmo) vc poderia me dar um toque de como eu faria.... depois de dar uma olhada no layout?

nao sei como falar pra pagina X executar as paradas do css entende?

por favor!

vlw demais

pow.. meu nome aparece como turista.. mas eu to todos os dias aki.. sem falta... ainda recebo por e-mail os topicos....

Edição feita por: aetom, 06/12/2005, 22:15.

______________________
Thomas Souza
www.mediatom.com.br
Design gráfico e web

#8 [=]Montanha[=]

[=]Montanha[=]

    O Defenestrador!

  • Usuários
  • 794 posts
  • Sexo:Masculino
  • Localidade:het konijn bijt
  • Interesses:Photoshop, Illustrator, CorelDraw, Ilustração, poderes mutantes da mente e Defenestração! het konijn bijt

Posted 07/12/2005, 07:53

Bom aetom, o negócio é o seguinte: despois que eu descobri o "poder" das CSS resolvi ir pesquisando o funcionamento delas e como criar um layout com elas, sem utilizar tabelas, que é o famoso "Table Less"

No meu caso, eu estava com dificuldades no alinhamento das DIVs, mas como dá para ser visto no meu código eu resolvi o problema, não sei se de forma correta, mas resolvi! eheheheheheh!!

Para você fazer sua Página ler as CSS na Tag <head> da sua página você coloca assim:

<link href="estilo.css" rel="stylesheet" type="text/css">


Onde estilo.css é a folha de estilo que você criará. Em geral, todas as tags de HTML podem ter seus atributos modificados pela CSS

Entre os sites brasileiros, um que você encontrará bastente material é o CSS para Webdesign Tem muita coisa bacana lá que poderá te ajudar.

É isso aí!

Grande Abraço!

Aí, falow!

ah! com relação ao "Turista", refere-se à quantidade de posts que você tem.

(\_/)
(ò.ó)
(><)
het konijn bijtt!

#9 aetom

aetom

    Turista

  • Usuários
  • 59 posts
  • Sexo:Não informado

Posted 07/12/2005, 12:10

vlw demais montanha....

vou pesquisar no site q vc postou..... qqr coisa eu coloco outro topico aki\!!

abrçs
______________________
Thomas Souza
www.mediatom.com.br
Design gráfico e web

#10 Frisson

Frisson

    Turista

  • Usuários
  • 27 posts
  • Sexo:Não informado
  • Interesses:Artes, Design, Internet, Informática, Livros, Cinema, Teatro, Viagens, Fotografia

Posted 07/12/2005, 12:28

:huh:
Este tópico realmente foi interessante. Por q vc mesmo postou, vc mesmo respondeu as suas dúvidas.
Qt ao nome, normalmente usam tableless. Estranhei vc tê-lo separado, mas, enfim...
De fato, é um excelente caminho: código limpo, reaproveitamento, separação entre layout e programação, condições de inserção de itens necessárias a acessibilidade.

Ok, valeu! (y)
Ana Cláudia Oliveira
Webdesigner
Vitamina Bits
vitaminabits@yahoo.com.br

#11 getpaulo

getpaulo

    Normal

  • Usuários
  • 82 posts
  • Sexo:Não informado
  • Localidade:MG
  • Interesses:Apreender

Posted 12/12/2005, 17:59

Galera, para pesquiza sobre tableless tambem tem o site Tableless.com.br
getpaulo

"Mas, a todos quantos o receberam, aos que crêem no seu nome, deu-lhes o poder de se tornarem filhos de Deus; aos quais não nasceram do sangue, nem da vontade da carne, nem da vontade do varão, mas de Deus. JOÃO 1:12,13"

Voltar para Dreamweaver


1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

  1. Fórum WMO
  2. → Desenvolvimento
  3. → HTML, CSS e Metodologias
  4. → Editores HTML
  5. → Dreamweaver
  6. Privacy Policy
  7. Regras ·
IPB Skin By Virteq