[Resolvido] Layout CSS

[Maujor 144]

1-) O HTML não está validado. Valide!

2-) Você definiu #centro com height:300px; então o conteudo não tem como expandir.

Solução: Retire o height:300px;

3-) A coluna #esquerda está com 200px e você definiu a #direita com width:100%. Como é possível isto?

Se a largura total do site é 870px e a #esquerda tem 200px sobram 670px para a direita e não 100%.

Solução: Altere #direita: 670px;

 

Comentário: Por que um site com 870px de largura?

É ruim para resoluções de 800px e muito pequeno para resoluções maiores.

 

Erros muito básicos meu caro Diego

Você tem certeza que estudou bastante CSS para tentar fazer um layout?

Layout CSS não é fácil, requer muuuuuuito estudo.

[Diego Macêdo 6]

Na verdade o arquivo estava validado.. mas eu andei mechendo no menu_superior e esqueci de fechar a tag </a> e por isso geral aquele monte de erros na validação, pode conferir agora.

 

A minha intenção de fazer este site em CSS seria exatamente essa, estudos! Eu estou desenvolvendo e quebrando a cabeça com esses detalhes pra aprender. Mas é graças a pessoas como você que me fazem continuar tentando, pesquisando e estudando para continuar desenvolvendo.

 

Fiz as devidas alterações que você me passou e resolveu meu problema.

 

Valeu pela força mais uma vez! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

[Diego Macêdo 6]

Só mais uma dúvida (por enquanto), como eu faria pra DIV #centro ter no mínimo 300px de altura e caso o conteúdo dela seja "mais alto" que isso, ele expandir a altura automaticamente?

[Maujor 144]

1-)Mexer, validar...mexer, validar...mexer, validar ...mexer, validar ...mexer, validar

Valide de novo! O HTML já está cheio de erros

 

2-)#centro {min-height:300px;}

[Diego Macêdo 6]

Alguém poderia me dar uma ajuda quanto a fazer uns 'hacks' para esse CSS funcionar no IE 7?

 

Testei aqui no firefox 3.5 e no IE 8, tava funcionando lindo. Mas quando eu fui no meu cliente e abri o site lá (ele usa IE7), o site tava todo errado.

[Diego Macêdo 6]

Só para constar, os problemas que eu me recordo agora eram:

- Menu horizontal não estava aparecendo (sumiu!);

- A parte cinza lá no final do site onde eh copyright, estava com o texto passando da altura. Ele não estava crescendo a medida que precisasse;

- Javascript para fazer as imagens do topo ficarem mudando não funcionou. (Não sei se é problema no JS ou com o CSS);

- Estava aparecendo uma barra de rolagem dentro da DIV #CONTAINER;

 

Abaixo uma screen que eu tirei no http://browsershots.org/ (Não está mostrando os mesmos problemas que eu vi com o meu cliente)

[iE7]

 

Alguém poderia me ajudar neste problema?

[Thiago Retondar 18]

Não é bom ficar "remendando" o HTML e CSS... =(

 

Veja que há algumas coisas erradas aí:

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif a altura do topo está errada (menor)

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif o rodapé não está tecnicamente flutuado, logo não precisa de float:left, e sim clear:both

 

Analise melhor o CSS.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Diego Macêdo 6]

Tenho pouca experiência com CSS, mas estou fazendo isso como estudo mesmo.

 

Fiz o que você me informou e resolveu o problema no IE7 pra aparecer o menu.

 

- Agora o #container continua com uma barra de rolagem, tanto na horiz. como na vert.

- Rodapé no IE7 continua com o mesmo problema, todo errado. E no FF ele passou de cinza (correto) para branco depois do clear:both. E pq ele não estaria flutuando?

 

-EDIT-

Resolvi o rodapé acrescentando um "min-height" nele. Isso fez sumir as barras de rolagens.

 

Agora as imagens continuam sem se alternarem.

 

-EDIT 2-

Resolvi as imagens.

 

Obrigado Thiago! Vou dar uma pesquisada melhor sobre o "clear" para entender o pq da necessidade dele ali no rodapé.