Como montar essa parte do Layout

[Buthy 0]

Então galera, pra quem quiser dar uma conferida:

 

http://www.buthy.com.br/fisk

 

O problema é naquela imagem logo abaixo das ações promocionais e da newsletter...

Uma imagem de fundo que tem sombra...

 

O que eu fiz foi dividir esse background em 3 imagens, o topo, o meio (repeat-y), e o rodapé, que é essa imagem com a sombra...

 

Segue o css:

 

#conteudo-topo {
width:1000px;
height:5px;
margin:0 auto;
margin-top:-20px;
background:url('../images/bg-conteudo-topo.png') no-repeat center;
}
#conteudo {
width:1000px;
margin:0 auto;
background:url('../images/bg-conteudo-meio.png') repeat-y center;
min-height:500px;
}
#conteudo-rodape {
width:1240px;
height:45px;
margin:0 auto;
background:url('../images/bg-conteudo-rodape.png') no-repeat center;
}

 

#conteudo-topo:

#conteudo-meio:

#conteudo-rodape:

 

O que eu fiz foi deixar o tamanho da imagem com a sombra em 1240 x 45, e centralizar ela...

Daí fica encaixado certo...

 

Mas o problema é quando você esta navegando em janela, por exemplo, essa parte fica "quebrada" e nao se encaixa logo abaixo do #conteudo-meio... No Ipad também fica torto...

 

Teria algum outro jeito de fazer isso?

 

Muito obrigado!

 

Até mais!

[Thiago Moraes 32]

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

[ricardo_mc 19]

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!

[Buthy 0]

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

[Buthy 0]

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!

[Thiago Moraes 32]

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.

[Buthy 0]

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!

[Thiago Moraes 32]

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

[Buthy 0]

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!