Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

AerSoftware

Que tiver paciencia.. hehe

Recommended Posts

Oi pessoal, tudo bem? Espero que sim, gostaria de alguma ajuda, se alguém tiver um pouquinho de paciência pra explicar.

 

Eu dei uma olhada no site http://www.maujor.com/index.php e ali ele tem alguns exemplos de como fazer o css. Mas notei que esses estilos são dentro do próprio arquivo html. Tem como eu criar um arquivo .css que com todos os estilos de páginas, e tal e depois só chamar o estilo dentro desse arquivo?

 

E outra coisa tb. Notei no site que ele fala que não é recomendável usar tabelas pra criar sites modernos e tal. Mas não entendi bem como entende isso agora. Bom, eu tenho esse site: http://www.guiahqbrasil.8x.com.br/.

 

O que eu fiz nele, criei uma tabela la em cima com duas colunas, depois criei uma tabela menor embaixo e outra maior mais embaixo. Essa maior eu dividi em 3 colunas. A coluna da esquerda é o menu, a da direita é o login e a do meio tem outra tabela dividida em duas partes. Cada uma dessas tabelas tem uma include, que chama as respestivas páginas que serão apresentadas dentro delas (menu, login, apresentação, estatísticas, etc..)

 

Bom, minha dúvida é, como eu faria esse layout sem usar as tabelas, usando somente o css? Alguém poderia me dar um exemplo de como ficaria o fonte?

 

Fico grato desde já pela ajuda. Abraços..

 

 

 

Allan Elias Ramos http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post


Link para o post
Compartilhar em outros sites

Allan, dou de dica a você: pesquise mais sobre o assunto do comecinho mesmo. No próprio site que você indicou tem muita coisa do começo. Apesar de eu acha-lo um excelente profissional, acredito que o conteúdo do site ainda peca em algumas coisas. Mas o trabalho que ele faz é ótimo.No tableless.com.br você vai achar muita coisas, não se engane ao ver o blog, leia os artigos e estudos, leia tudo que possível. Leia, leia e leia.Depois você volta aqui e vai ver que muita coisa que você perguntou ai é mais simples do que você imagina.Esqueça esse modo "tabelas de pensar", não pense em colunas, pense no conteúdo do site. Como ele ficaria mais lógico.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Esqueça esse modo "tabelas de pensar", não pense em colunas, pense no conteúdo do site. Como ele ficaria mais lógico.

<{POST_SNAPBACK}>

hehehe. aí que vai ser dificil boiler. Eu criei um site ha muitos anos e depois nunca mais fiz nada relacionado a net. To tentando ha pouco tempo e eu ainda tinha o conceito de Frames pra fazer isso.. hehe.. agora descobri que o conceito é Tabelas mas que já esta ultrapassado.. hehehe.. vou dar uma olhada nesse site que tu me indicou (tableless.com.br) e ver se eu consigo entender, pq ta complicado.. hehe.. abraços.

 

 

 

Allan Elias Ramos http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu denovo... hehe

 

Li praticamente todo o site tableless.com.br, consegui saí do zero, mas a parte das divs me complicou um pouco.

 

Consegui fazer as includes que neste site ta dividido por tabelas dentro das divs assim:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Guia Hq Brasil</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style>@import "css.css";</style></head><body><div id="geral">     <h1>Guia HQ Brasil</h1>     <div id="topo">          Imagem de logotipo     </div>     <div id="menu">          Conteúdo do menu     </div>     <div id="apresentacao">          <?php include "apresentacao.htm"; ?>     </div>        <div id="estatistica">          <?php include "estatisticas.php"; ?>     </div>     <div id="login">          <?php include "login.htm"; ?>     </div>     <div id="rodape">          Conteudo do rodape     </div></div></body></html>

Ficou assim o site. Pelo que entendi, esse é o caminho né? Mas aí no arquivo css eu me compliquei na hora de botar cada div no lugar. Alguém pode dar uma ajuda?

 

Agradeço desde já.. abraços..

 

 

 

Allan Elias Ramos http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olha, primeiro você precisa tirar o !DOCTYPE dos includes. Se possível deixa só o conteúdo mesmo sem head, body e outras tags básicas. Se você for ver o código do arquivo final vai notar que ele tem mais de um !DOCTYPE, o que não é correto.

Para posicionar as divs você precisa estudar float, a propriedade do css que faz o elemento no html flutuar.

De uma olhada nesse videotutorial http://www.tableless.com.br/videotutorial/videotutorial1

 

No começo é assim mesmo, parece muito confuso, porque é como se você aprendesse a fotmatar no Word e de repente ele já não fosse mais nada.

Mas depois de um pouco de prática é que você vai sentir as diferenças. O melhor é ir com calma. Migrar aos poucos.

Qualquer coisa grita ai.

Um abraço.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Hmm.. vou dar uma olhada no Float, li sobre ele mas nao tinha percebido que é com ele que tenho que trabalhar.. quanto a tirar as tags, ficaria assim?

 

<html><style>@import "css.css";</style><div id="geral">    <h1>Guia HQ Brasil</h1>    <div id="topo">         Imagem de logotipo    </div>    <div id="menu">         Conteúdo do menu    </div>    <div id="apresentacao">         <?php include "apresentacao.htm"; ?>    </div>      <div id="estatistica">         <?php include "estatisticas.php"; ?>    </div>    <div id="login">         <?php include "login.htm"; ?>    </div>    <div id="rodape">         Conteudo do rodape    </div></div></html>

Ou tiro também a tag <html></html>??

 

Outra coisa que fiquei meio perdido. Aquela <div id"geral">, percebi que ela engloba todas outra divs.. seria mais ou menos como uma tabela grande e as outras tabelas dentro dela?

 

 

 

Allan Elias Ramos http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post


Link para o post
Compartilhar em outros sites

cara, quando ele disse tirar os doctypes dos inclues, era dos INCLUDES, ou seja, das paginas externas q você tah chamando... e naum da pagina q chama... ;)

 

outra coisa, utilize esse codigo abaixo como base pra sites tableless:

<?xml version="1.0" encoding="iso-8859-1"?><!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" lang="pt">

do jeito como você estava fazendo, eh do jeito html, e naum xhtml... exitem mtos otros, mas esse eh o mais simples para quem tah começando entre outras coisas... ;)

 

o div geral eh quem comanda, eh a div pai, vamos dizer assim... seria como a tabela master mesmo... ;)

 

faz uma busca, estud bastante pq ainda tah mto cru ainda... leia sobre floats, posicionamentos, margens, etc... ;) falow ae...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Aaah bom, entendi.. hehe.. não tinha me ligado que ele falou das includes. Então o certo seria deixar essas páginas que estão sendo chamdas somente entre a tag <html></html>, certo?

 

Aí nesse código index, adaptado pro cabeçalho que você passou seria assim?

 

<?xml version="1.0" encoding="iso-8859-1"?><!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" lang="pt"><style>@import "css.css";</style><head><title>Guia Hq Brasil</title></head><body><div id="geral">    <h1>Guia HQ Brasil</h1>    <div id="topo">         Imagem de logotipo    </div>    <div id="menu">         Conteúdo do menu    </div>    <div id="apresentacao">         <?php include "apresentacao.htm"; ?>    </div>      <div id="estatistica">         <?php include "estatisticas.php"; ?>    </div>    <div id="login">         <?php include "login.htm"; ?>    </div>    <div id="rodape">         Conteudo do rodape    </div></div></body></html>

Ah, só mais uma coisinha, aqueles boxes também não servem pra identar as divs ou é só com o float mesmo??

 

Valeu pela ajuda pessoal, ta sendo de grande valia. Abraços.

 

 

 

Allan Elias Ramos http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post


Link para o post
Compartilhar em outros sites

q boxes??? otra coisa, os includes naum saum pra ficar entre as tags html naum, senaum duplica a html... eh soh olhar o codigo fonte do teu html... vai ver q tuh vai ter 3 <html> e isso eh errado... você tem q colocar somente o conteudo... tipo se no include você soh tem tabela, você vai colocar soh o codigo <table> até o </table>... se ligo???

Compartilhar este post


Link para o post
Compartilhar em outros sites

Mas funciona isso? Bom, nao testei, mas vou testar hj.. de qualquer jeito funciona eu colocar um certo conteúdo numa página html ou até php e tirar as tags html? Ele consegue ler como se fosse um arquivo html ou é o index com essas tags todas q faz a validação?Eu li algo sobre boxes, nao sei se existe mesmo.. hehe..Outra coisinha, essa é mais uma questão de gosto (creio). É melhor criar um arquivo .css só pra toda a estrutura do site ou seria mais recomendável criar vários, de acordo com as páginas mostradas?Allan Elias Ramos

Compartilhar este post


Link para o post
Compartilhar em outros sites

Hi, deu pau.. hehe.. fiz o index assim:

 

<?xml version="1.0" encoding="iso-8859-1"?><!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" lang="pt"><style>@import "css.css";</style><head><title>Guia Hq Brasil</title></head><body><div id="geral">   <h1>Guia HQ Brasil</h1>   <div id="topo">        Imagem de logotipo   </div>   <div id="menu">        Conteúdo do menu   </div>   <div id="apresentacao">        <?php include "apresentacao.htm"; ?>   </div>    <div id="estatistica">        <?php include "estatisticas.php"; ?>   </div>   <div id="login">        <?php include "login.htm"; ?>   </div>   <div id="rodape">        Conteudo do rodape   </div></div></body></html>

e deu o erro q ta neste site.

 

Tirei também as tags html das includes. Na verdade tirei todas tags. Deixei só o texto puro mesmo. Mas ficou uma dúvida, as tags h1, <br>, <p>, essas coisas de identação, eu posso manter nesses arquivos?

 

 

 

Allan Elias Ramos http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post


Link para o post
Compartilhar em outros sites

esqueci q era php... coloca assim:

PHP

[*]echo '<?xml version="1.0" encoding="iso-8859-1"?' .'>'

 

vai funcionar...

 

em relação a a tirar as tags, saum soh as antes do body cara, tipo <html>, <head> e todo seu conteudo e <body> e claro seus fechamentos...

 

na parte da identação, tem problema naum... soh naum garanto q va ficar direitinho na index qnd for impressa na tela... pq ae a identação teria q ser igualzinha como se estivesse na index... ;)

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olha, o problema persistiu. Até dei uma atualizada nos meus arquivos do site, tirando eles da pasta css e botando pra raíz, pq é isso q vou usar realmente. Mas o problema no index.php persistiu mesmo com a modificação indicada.

 

O código ficou assim:

 

echo '<?xml version="1.0" encoding="iso-8859-1"?>'<!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" lang="pt"><style>@import "estilos/padrao.css";</style><head><title>Guia Hq Brasil</title></head><body><div id="geral">   <h1>Guia HQ Brasil</h1>   <div id="topo">        Imagem de logotipo   </div>   <div id="menu">        Conteúdo do menu   </div>   <div id="apresentacao">        <?php include "apresentacao.html"; ?>   </div>    <div id="estatistica">        <?php include "estatisticas.php"; ?>   </div>   <div id="login">        <?php include "login.html"; ?>   </div>   <div id="rodape">        Conteudo do rodape   </div></div></body></html>

E no site continou o mesmo erro.

 

 

 

Allan Elias Ramos :(

Compartilhar este post


Link para o post
Compartilhar em outros sites

pow, tem q fechar e abrir o php ;)

PHP

[*]echo '<?xml version="1.0" encoding="iso-8859-1"?>'

 

por isso:

PHP

[*]<? echo '<?xml version="1.0" encoding="iso-8859-1"?>?>

 

qq coisa falae...

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.