Problemas Em Alinhar Tags Div

SSparsbrod · Dezembro 15, 2003

Olá pessoal !

Estou tentando fazer o alinhamento de 3 tabelas em DIV, lado a lado, junto com CSS, mas não estou conseguindo. Alinhar as tabelas quando são iguais em medidas e não tem nenhum conteúdo é até fácil, o problema é quando cada uma tem um conteúdo diferente em texto.

No momento em que coloco um texto com diferentes quantidade de linhas em cada uma das tabelas, elas assumem posições diferentes. Alguém sabe como posso resolver esse problema ?

Acho que a solução está no CSS, mas é difícil encontrar um exemplo prático desse caso. Com frequência encontro sites construídos em DIV com muitas tabelas ao lado mas não dá para ver como estão escritas as CSS. Alguém pode me ajudar ?

Abaixo, vai um pedaço do código em XHTML.

<body>

<h1>artigos</h1>

<p>99.9% dos sites na Internet estão obsoletos</p>

<p>Site em Web Standards, site encontrado</p>

<p>Por que atualizar seu site</p>

</div>

<h1>serviços</h1>

<p>Teste artigo 1</p>

<p>Teste artigo 2</p>

<p>Teste artigo 3</p>

</div>

<h1>clientes</h1>

<p>Teste artigo 1</p>

<p>Teste artigo 2</p>

<p>Teste artigo 3</p>

</div>

Obrigado,

Sergio

David Elias · Dezembro 15, 2003

Que bom finalmente mais alguém a seguir os standards ;)

Bom vou tentar te ajudar.

Normalmente faço com floats, mas há pessoal que diz o IE fica marado, já tentaste com posição absoluta? Mas se calhar como é o conteudo que fica no meio da página, não é? talvez com floats funcione melhor.

<div class="global_middle">

  <div class="colum_articles"></div>

  <div class="colum_services"></div>

  <div class="colum_clients"></div>

  <!-- tenta com isto -->
  <div class="clear_both">&nbsp;</div>

</div>

E agora o css

div.colum_articles,
div.colum_services,
div.colum_clients {
  float: left;
  width: 200px;
}

.clear_both { clear: both; }

Talvez era melhor mostrares o css que tens.

SSparsbrod · Dezembro 15, 2003

E aí Elias, tudo bem !

Poisé, estou mudando completamente meu "modus operandi". Estou querendo me adequar aos Web Standars e não só, a trabalhar nos conceitos tableless.

No início é bem difícil pois tenho que assimilar muitas coisas. Não que eu não saiba CSS, mas nunca havia aplicado em escala tão ampla.

Enquanto você postou aqui eu já estava fuçando e acabei conseguindo montar as tabelas como eu queria. Agora eu coloquei em posição absoluta, mas com isso, minhas páginas que antes estavam alinhadas ao centro do browser, acabei alinhando a esquerda. E também percebi que estava usando erroneamente os atributos de margem no CSS. Tirei e usei "left e top" mesmo.

você colocou um atributo que eu nunca vi, o { clear: both; }, para que serve ?

E por falar em Tableless, me ocorreu uma idéia: o que acha de abrirmos um fórum sobre o conceito tableless e web standards ? :D

Abraços !

Maujor · Dezembro 15, 2003

Ola Elias,

Ola SSparsbrod,

Projeto com CSS e adequação as Standards!!

Conte comigo! Dê uma olhadinha AQUI

David Elias · Dezembro 16, 2003

você colocou um atributo que eu nunca vi, o { clear: both; }, para que serve ?

Vou tentar explicar :)

Imagina um div que contem outros tres divs alinhados lado a lado com float

+--------------------------------+
| +-------++-------++-------+ |
| | | | | | | |
+|--------|-|------- |-|--------|+
| | | | | |
+-------++-------++-------+

Agora com um com um div e clear: both (ou como o float dos divs é left poderia ser clear:left) fica assim

+--------------------------------+
| +-------++-------++-------+ |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| +-------++-------++-------+ |
| +----------------------------+ |
| | elemento com clear:left | |
| +----------------------------+ |
+--------------------------------+

Ou seja quando fazes float, qualquer elemento a seguir ao elemento com float irá colocar-se ao seu lado. Assim se colocares clear o elemento não irá para o seu lado.

Deu para perceber?

E por falar em Tableless, me ocorreu uma idéia: o que acha de abrirmos um fórum sobre o conceito tableless e web standards ?

E porque não? :)

Projeto com CSS e adequação as Standards!!
Conte comigo! Dê uma olhadinha AQUI

Tive a ler um bocado e parece ser uma boa fonte para o assunto, parabéns ;)

SSparsbrod · Dezembro 16, 2003

Oi Maurício !

Fala Elias !

Mauricio, realmente muito bom seu projeto, vou estudar pra caramba ;-)

Elias, não sei se entendi muito bem mas depois vou fazer uns testes, mas de qualquer modo, como faço para voltar a alinhar meu site no centro. No modo absoluto, minhas tabelas DIV ficam legais, mas se eu centralizo, descamba tudo.

Depois vou ler o site do Mauricio para ver se encontro uma luz. Quanto ao Forum, parace que o Mauricio já tem um. Estou certo ?

Abração

Maujor · Dezembro 16, 2003

Ola,

Vamos por partes:

1-) SSparsbrod, a montagem de layout com CSS, não é tão simples quanto a tirar um sublinhado do link, ou colorir uma barra de rolagem :-), mas também não tem mistérios profundos. Como você já se mostrou disposto a "estudar pra caramba" logo, logo vai estar dominando a técnica. O Elias já te deu a dica : float e clear.

2-) Eu não tenho fórum CSS! Sou moderador do fórum CSS da DWOnline (uma comunidade voltada para Dreamweaver)

3-) Estou montando uma área de tutoriais voltada para CSS Layout para inserir no meu site a partir de fevereiro/2004. Por enquanto lá tem este LAYOUT CSS somente.

Dezembro 21, 2003

Bem legal o forum dwonline, tem bastante material para galera pesquisar. S]o que seu link estã errado, quando a gente clica nele da como n"ao existente pois estã faltando um `w` no endereço, dë uma conferida, ok?

Entrar

Problemas Em Alinhar Tags Div

Pergunta

SSparsbrod

Link para o comentário

Compartilhar em outros sites

7 respostass a esta questão

Posts Recomendados

David Elias

Link para o comentário

Compartilhar em outros sites

SSparsbrod

Link para o comentário

Compartilhar em outros sites

Maujor

Link para o comentário

Compartilhar em outros sites

David Elias

Link para o comentário

Compartilhar em outros sites

SSparsbrod

Link para o comentário

Compartilhar em outros sites

Maujor

Link para o comentário

Compartilhar em outros sites

Guest - Fernando -

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades