Substituir tabela por css

[Bruno Conte 4]

galera, estou fazendo um topo de um site dividido em 2 colunas.

hoje uso uma tabela com 2 colunas onde uma fica a logomarca e a outra o menu.

 

como faço para substituir a tabela por algo em css que me gere as colunas e linhas de uma tabela e deixe meu codigo mais leve e mais facil de uso.

[Gerciley 14]

Acredite, a melhor forma de alcançar isso é estudando, e muito segue um link muito interessante, onde já da pra se ter uma boa base para o que você quer:

http://www.maujor.com/w3ctuto/firstcss.html

[Micilini Roll 49]

seguinte cara!,vou lhe dar uma previa de como vai ficar isso,supondo que queremos uma tabela com 2 linhas e 2 colunas feitas totalmente em css,pois bem, a primeira coisa que iremos fazer é:

 

1-iremos fazer as 2 linhas da primeira coluna(os 2 blocos da parte de cima),para isso teremos que criar primeira uma div chamada total,que ira representar todo o conteudo da tabela(como linhas,colunas)

 

<div id="total">

</div>

 

 

2- continuando agora iremos criar 2 divs,com id de A1 e A2 com uma largura(width de 100px;) e altura(height de 50px;),e adicionar um comando na div a1 para que a div a2 fique ao lado dela ,comando chamado float:left,agora para visualizarmos as 2 divs na tela iremos adicionar uma borda de 1px cor preta do tipo solida:

 

 

<div id="a1" style="width:100px; height:50px; float:left; border:1px #000000 solid; "></div>

<div id="a2" style="width:100px; height:50px;float:left; border:1px #000000 solid;"></div>

 

3- agora iremos criar mais 2 divs ,com o nome de B1 e B2,com o mesmo style das outras divs,como pro exemplo:

 

<div id="b1" style="width:100px; height:50px; float:left; border:1px #000000 solid; "></div>

<div id="b2" style="width:100px; height:50px;float:left; border:1px #000000 solid;"></div>

 

 

 

 

4-agora se voce testar vera que ficou 4 tabelas uma do lado da outra,para contarnar isso,nos iremos criar uma div chamada QUEBRA, que ira fazer com que cada div fique uma embaixo da outra,iremos inserir esta div entre a div A2 e B1:

 

 

<div id="quebra" style="clear:both">
</div>

 

 

 

agora a sua area de codigo deve estar se pareçendo com esta:

 

 

 

<div id="total">
<div id="a1" style="width:100px; height:50px;  float:left;  border:1px #000000 solid; "></div>
<div id="a2" style="width:100px; height:50px;float:left;  border:1px #000000 solid;"></div>
<div id="quebra" style="clear:both">
</div>
<div id="b1" style="width:100px; height:50px; float:left;  border:1px #000000 solid; "></div>
<div id="b2" style="width:100px; height:50px; float:left;border:1px #000000 solid;"></div>
</div>

 

 

 

 

agora pra ficar tudo na mais perfeita ordem possivel nos iremos adicionar um style na div total,e dentro dele iremos colocar o seu width_total(que é o width da div a1 + da div a2) e o seu height(que é o height da div a1 + da div b1),ficando assim:

 

 

 

 

<div id="total" style="width:204px; height:104px;">
<div id="a1" style="width:100px; height:50px;  float:left;  border:1px #000000 solid; "></div>
<div id="a2" style="width:100px; height:50px;float:left;  border:1px #000000 solid;"></div>
<div id="b1" style="width:100px; height:50px; float:left;  border:1px #000000 solid; "></div>
<div id="b2" style="width:100px; height:50px; float:left;border:1px #000000 solid;"></div>
</div>

 

 

 

 

 

e por fim o width ficou 204px,pois alem de somar as divs voce viu que a borda das divs tinham valores iguais a 1px entao se sao 4 divs entao sera o valor da largura total mais o valor de 4px e isso sera feito a mesma coisa para a altura(height).se vc ver nao foi mais necessario adicionar a div QUEBRA,pois automaticamente assim que o valor total da tabela é apresentado que é width:204px; e height:104px; a div nao ira conseguir ficar uma do lado da outra e automaticamente uma vai pra baixo da outra!

 

(para visualizar a div total englobando todo o restante da tabela é so adicionar o comando abaixo dentro do style da div total:

 

 border:#F00 1px solid;

 

)

10- pronto agora e so seguir esta minhas dicas com 8 colunas e 10 linhas e assim por diante...

[Bruno Conte 4]

muito bom, lendo a sugestão anterior no marjor já havia feito.

 

agora estou com uma duvida.

 

criei uma div chamada topo e outras 2 uma chamada logo e outra menu.

 

ate ai blz.

 

so que a div logo ela tem o height maior que o height do topo (Isso e de proposito)

 

meu problema é, que depois fiz uma div chama conteudo para ficar o conteudo do site e a logo deve ficar em cima dele ate acabar a logo claro.

 

do jeito que fiz, ele esta simplesmente começando o conteudo apenas ao final da logo, como faço para coloca-lo colado no final do topo e nao no final da logo?

[Gerciley 14]

a div logo devera conter o atributo position: absolute!

[Bruno Conte 4]

simples em cara??

vlw

[Giovanni Ribeiro 0]

Então cara Bruno, Simplesmente você vai trocar a estrutura por div.

Não é uma tarefa facil mais tambem não deixa de ser dificil.

Mais o estudo faz a gente alcançar esses objetivos.

 

Esse site é bastante bacana para estudo.
http://www.w3schools.com/css/default.asp

 

Abs.