Backgrounds diferentes na esquerda e direita do site
Thursday, 23 de August de 2007
Algo que os designers da empresa que trabalho sempre fazem, e eu não sabia um modo de fazer usando os padrões, era o de usar backgrounds diferentes para as laterais de uma página. Eu também nunca tinha parado para pensar em um modo de fazer. Normalmente quando precisava fazer isso, eu usava uma imagem grande, em torno de 1400-1600px de largura, para ser o background da página. Ou iria reclamar com o designer!
Então eu participei do concurso do site cssoff, e o vencedor do primeiro concurso usou essa técnica que eu vou descrever agora:
Em volta de todo o conteúdo do site, coloque duas divs, e de um id para elas, por exempo, #bgright e #bgleft. No exemplo elas estarão envolta da div #principal.
A div #principal estará centralizada, com um tamanho fixo (800px), e a seguinte margin:
margin: 0 auto 0 -400px;
Atente ao detalhe da margem esquerda tem um valor negativo que é a metade do tamanho da div. Isso é importante para centralizar a div #principal usando essa técnica.
A div #bgleft só precisa ter um background a sua escolha.
A div #bgright precisa ter um background a sua escolha e margin-left: 50%.
Pronto!
Página de exemplo: Exemplo para background laterais diferentes
O único porém dessa técnica, é que você vai ter uma ou duas divs sem sentido envolvendo todo o site.
Nota:
A ordem das divs tem que ser exatamente essa. #bgleft, #bgright com margin-left: 50% e a #principal com um tamanho fixo e margin: 0 auto 0 -x, onde x é metade do tamanho da div principal.
Caso a ordem das divs #bgleft e #bgright forem invertidas e aplicar margin-right: 50% na bgleft, o site não irá centralizar no Safari vs. 3.0.3 Windows. Nos outros browsers em que testei irá se comportar normalmente.
Nota2:
Você pode remover a div #bgleft, e o background esquerdo passa a ser a tag body. Desse modo é uma tag inútil a menos no html.
Dúvidas e sujestões? Entre em contato ou deixa um comentário abaixo!
André em 23-07-2008 às 6:40 pm
E se quiser usar uma imagem de fundo por exemplo?? no right rola legal mas e no left??
Caio em 23-07-2008 às 7:02 pm
André, dependendo da imagem, dá para usar normalmente.
As vezes é necessário fazer algumas “manobras” para ficar do modo como você quer.
Mais 2 exemplos:
http://www.avipam.com.br
http://www.ficsa.com.br
Use o firefox + firebug, dê um inspect no código e habilite e desabilite a regra que coloca as imagens para você ver como elas estão colocadas.
André em 4-08-2008 às 4:22 pm
Ah sim, mas estou falando no caso se não for uma imagem “pattern”, ou seja a imagem não se repetiria, do lado direito consegui posicionar numa boa, mas do lado esquerdo não consigo de jeito algum, tem alguma dica para isto?? e parabéns pelo Blog, está me saindo muito útil
André em 4-08-2008 às 5:34 pm
Ah fiz alguns testes aqui e cheguei ao resultado que esperava, apesar de achar mais fácil fazer com table, mas uma table no meio dum tableless fica até feio né, este tópico me ajudou muito valeu mesmo!!! parabéns