Como montar essa parte do Layout

A div #conteudo-rodape deve ter a mesma largura que o resto do conteudo, 1000px.

Olha, quando se trabalha com esse tipo de layout e cada parte tem um tamanho diferente, tem duas formas de se fazer isso:

1. Você tem que alinhar todos os blocos no centro usando "position:absolute". Ficaria assim por exemplo:

.divTopo{float:left; position:absolute; width:1000px; left:50%; margin-left:-500px; clear:both;}
.divMeio{float:left; position:absolute; width:1000px; left:50%; margin-left:-500px; clear:both;}
.divRodape{float:left; position:absolute; width:1240px; left:50%; margin-left:-620px; clear:both;}

Nesse caso, o position tem q ser absolute, daí você diz que a imagem tem que ficar a 50% de distância da tela à direita (usando left:50%), então você usa o margin-left:"metade da largura da div". Dessa forma ela sempre vai ficar alinhada ao centro.

O clear:both é apenas para garantir que em telas muito largas, os blocos não vão ficar um do lado do outro.

2. A segunda forma, eu não tenho certeza se vai funcionar ou não, mas seria algo como colocar a largura da div em 100% e usar "background:url(sua imagem) no-repeat center;". Isso só funcionaria se a sua div conseguisse ficar no tamanho real de 100% da tela.

Eu prefiro a primeira forma. Isso talvez signifique um pouco mais de trabalho para refazer uma parte do código, mas em compensação, funciona que é uma maravilha.

Boa sorte!

>
A div #conteudo-rodape deve ter a mesma largura que o resto do conteudo, 1000px.

Poisé cara, mas a imagem de fundo tem mais de 1000px de largura :S

>
Olha, quando se trabalha com esse tipo de layout e cada parte tem um tamanho diferente, tem duas formas de se fazer isso:

1. Você tem que alinhar todos os blocos no centro usando "position:absolute". Ficaria assim por exemplo:

.divTopo{float:left; position:absolute; width:1000px; left:50%; margin-left:-500px; clear:both;}
.divMeio{float:left; position:absolute; width:1000px; left:50%; margin-left:-500px; clear:both;}
.divRodape{float:left; position:absolute; width:1240px; left:50%; margin-left:-620px; clear:both;}

Nesse caso, o position tem q ser absolute, daí você diz que a imagem tem que ficar a 50% de distância da tela à direita (usando left:50%), então você usa o margin-left:"metade da largura da div". Dessa forma ela sempre vai ficar alinhada ao centro.

O clear:both é apenas para garantir que em telas muito largas, os blocos não vão ficar um do lado do outro.

2. A segunda forma, eu não tenho certeza se vai funcionar ou não, mas seria algo como colocar a largura da div em 100% e usar "background:url(sua imagem) no-repeat center;". Isso só funcionaria se a sua div conseguisse ficar no tamanho real de 100% da tela.

Eu prefiro a primeira forma. Isso talvez signifique um pouco mais de trabalho para refazer uma parte do código, mas em compensação, funciona que é uma maravilha.

Boa sorte!

Essa sua divTopo, divMeio, divRodape seria a minha conteudo-topo, conteudo e conteudo-rodape?

Eu testei esses códigos e não deu muito certo :S

Amanhã posto denovo no ar, com essas alterações, se puder dar uma olhada dai!

Obrigado

Coloquei no ar do jeito que fica: http://www.buthy.com.br/fisk

Não sei se talvez o problema nao seja na #base-rodape ou #rodape

Segue o CSS:

#conteudo-topo {
width:1000px;
height:5px;
position:absolute;
left:50%;
margin-left:-500px;
margin-top:-20px;
clear:both;
background:url('../images/bg-conteudo-topo.png') no-repeat center;
}
#conteudo {
width:1000px;
height:auto;
position:absolute;
left:50%;
margin-left:-500px;
clear:both;
margin-top:-15px;
background:url('../images/bg-conteudo-meio.png') repeat-y center;
}
#conteudo-rodape {
width:1240px;
height:45px;
position:absolute;
left:50%;
margin-left:-620px;
clear:both;
background:url('../images/bg-conteudo-rodape.png') no-repeat center;
}

#base-rodape{
width:100%;
height:290px;
position:absolute;
bottom:0;
}
#rodape{
width:1000px;
margin:0 auto;
padding-top:15px;
color:#fff;
}

Valeuu!

Obs: Não usa position em elementos que seguem o fluxo da página

Obs2: Fazer a estrutura do layout com positions, ainda mais em um layout simples como esse, além de ser uma tremenda gambiarra só te trará problemas.

_________

Coloca a imagem de fundo como background centralizado em uma div 100%, acho que ja resolve seu problema.

>
Obs: Não usa position em elementos que seguem o fluxo da página

Obs2: Fazer a estrutura do layout com positions, ainda mais em um layout simples como esse, além de ser uma tremenda gambiarra só te trará problemas.

_________

Coloca a imagem de fundo como background centralizado em uma div 100%, acho que ja resolve seu problema.

Ok cara, fiz isso...

Mas resoluções onde tem barra de rolagem na horizontal já fica torto :S

Mas fazer o que... acho que dá pra deixar assim!

Obrigado!

tentei ver mas o site não estava carregando...

>
tentei ver mas o site não estava carregando...

Hotel da Web é PÉSSIMO mesmo... Credo!

Tenta daqui a pouco... sempre dá umas quedas...

É barato, mas assim que vencer estarei trocando!

Abraços!