Ir para conteúdo

POWERED BY:

Arquivado

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

MaRaCa

Layout Tableless

Por , em Desenvolvimento frontend

Recommended Posts

MaRaCa    0

MaRaCa
Postado

Olá pessoal.

 

Estou montando a estrutura de um layout. Onde na parte central do conteúdo teria que fazer três colunas, sendo a esquerda e direita para background e a central para conteudo.

 

No IE consegui montar certinho, mas no Firefox, a coluna central fica em cima da coluna Esquerda.

Alguém sabe como posso resolver este problema?

 

Segue meu css

#esquerda {width: 6px;left: 0px;position: absolute;background-color:#676767;background-image: url(imagens/blog/fundo_esq.jpg);float: left;}#central {width: 740px;position: relative;height: 300px;background-color:#ffffff;}#direita {width: 6px;right: 0px;position: absolute;background-color:#676767;background-image: url(imagens/blog/fundo_dir.jpg);float: right;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

leandro07    0

leandro07
Postado

Aqui segue as mudanças.

 

#esquerda {width: 6px;left: 0px;background-color:#676767;background-image: url(imagens/blog/fundo_esq.jpg);float: left;}#central {width: 740px;height: 300px;background-color:#ffffff;float: left;}#direita {width: 6px;right: 0px;background-color:#676767;background-image: url(imagens/blog/fundo_dir.jpg);}

Assim fica certinho no IE, no Firefox você teria que declarar um margin no div da direita.

 

Agora se você quiser colocar um float: left no div#direita é só você declarar no próximo div , que no caso seria o rodapé, um clear: both;

 

Obs: Isso pode não dar certo pois não sei como está formatado o HTML. Se não der certo , posta o código HTML aí que daí a gente ajeita direitinho.

 

Espero ter ajudado.

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hunter_    0

Hunter_
Postado

Lembrando q não basta seguir tutorial, o tutorial é apenas uma porta, so consegue perfeição e destreza no assunto se procurar se aprofundar, ou seja ler bastante, so uma dia ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

MaRaCa    0

MaRaCa
Postado

Segui as dicas do leandro e não funcionou, acabou quebrando a estrutura.

 

Vou colocar meu html e css para verificarem:

 

Segue a partir do BODY

<body><div id="mae"><div id="topo"></div><div id="esquerda"></div><div id="direita"></div><div id="central">Conteudo e outras estruturas</div><div id="rodape"></div></div></body>

Segue CSS

body {margin-top: 10px;margin-left: 0; /* zerando as margens do body */margin-right: 0; /* zerando as margens do body */margin-bottom: 0; /* zerando as margens do body */padding: 0; /* zerando os paddings do body */text-align:center;background-color: #676767;}#mae {width: 752px;left: 50%;margin: 0px 0px 0px -376px;padding:0;position: absolute;}#topo {height: 139px; /* altura */ background-color: #676767;background-image: url(imagens/topo/topnew01.jpg);}#esquerda {width: 6px;left: 0px;position: absolute;background-color:#676767;background-image: url(imagens/blog/fundo_esq.jpg);float: left;}#central {width: 740px;position: relative;height: 300px;background-color:#ffffff;}#direita {width: 6px;right: 0px;position: absolute;background-color:#676767;background-image: url(imagens/blog/fundo_dir.jpg);float: right;}#rodape {width: 752px;height: 36px;background-color: #676767;background-image: url(imagens/rodape/rodnew.jpg);clear: both;position: relative;}

O que acham que posso está fazendo errado?

Estou verificando o artigo que o micox me passou, para ver se arrumo algo.

 

 

Pessoal, creio que consegui.

 

Fiz o seguinte para funcionar no Firefox.

html>body #central {margin-left:6px;}

Assim a estrutura ficou correta no IE e no Fire

 

Se tiverem uma solução melhor, por favor me digam!

Agradeço a todos pela ajuda.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Maraca,

Lembrando q não basta seguir tutorial, o tutorial é apenas uma porta, so consegue perfeição e destreza no assunto se procurar se aprofundar, ou seja ler bastante, so uma dica

Se ainda não sabe trabalhar bem com tableless, de uma olhada no site do maujor!De uma lida nos artigos do Bruno, o de reciclagem seria uma ótima pedida pra você, tem muita coisa repetida no seu código. Limpe ele!Essa são as minhas dicas pra você! B)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito