Ir para conteúdo
Fórum Script Brasil
  • 0

Como ajustar conteúdo HTML à largura da página?

yankleber

Perguntado por yankleber,

 Share

Pergunta

yankleber

yankleber

Postado
Postado

Amigos,

A dúvida com certeza será ridiculamente simples para a maioria de vocês, mas vamos lá...

Eu estou começando a construir uma página baseada em um design que eu criei no Photoshop. OK, ela possui alguns elementos de fundo (no caso duas barras horizontais e uma foto de um carro) que deverão ter suas larguras ajustadas de acordo com a resolução horizontal do monitor do usuário (vejam a imagem em anexo). Todo o resto da página será centralizado sobre ela.

A solução que me veio à cabeça foi colocar esses elementos em um fundo de página mas o problema é que o fundo de página é alinhado à esquerda e dependendo da largura da tela do cliente ele simplesmente será cortado à direita, quando o ideal seria cortar dos dois lados proporcionalmente mantendo o fundo centralizado.

Alguma ideia?

Obrigado!

:)

 

warbg.jpg

Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 0
yankleber

yankleber

Postado
  • Autor
Postado

Amigos,

Enquanto esperava desenvolvi uma solução. Talvez seja meio tosca e exista forma melhor, mas lá vai... de repente até ajuda alguém!

A ideia é basicamente capturar a largura da janela do browser do cliente, subtrair esse valor do tamanho total da imagem e dividir por dois. O resultado será a posição para a qual deslocaremos a imagem de fundo para a esquerda.

Por exemplo, no meu caso a imagem de fundo tem 1920px. Se a largura do browser do cliente for 1600px, então a conta resultará em 160px. Daí é só modificar o valor de background-position para -160px, assim:

<style type="text/css">
body {
    background-image: url(warbg.jpg); // url da imagem a ser usada como fundo
    background-repeat:no-repeat;
}
</style>

<script>
    function AdjustBG()
    {
        var cw = document.body.clientWidth;
        var disp = (1920-(cw+16))/2;
        document.body.style.backgroundPosition = "-" + disp + "px 0px";
    }
    
    window.onresize = function(event) {
        AdjustBG();
    }
</script>

</head>

<body onload="AdjustBG();">
</body>
</html>

Observe que a função AdjustBG é chamada duas vezes: primeiro no carregamento da página e depois dentro do evento onresize caso o cliente redimensione a janela do browser.

:)

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...