Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Topo elástico para seu site

Publicado em: 2012-04-30 — 17.257 visualizacoes

Uma pergunta frequente em fóruns e listas de discussão é: Como faço para que o topo do meu site (uma imagem bitmap) ocupe toda a largura da tela do usuário independente da resolução?

É sabido que imagens do tipo mapa de bits (bitmaps) usadas em sites, normalmente nos formatos PNG, JPG e GIF, ao serem redimensionadas sofrem distorções que podem comprometer seriamente a qualidade da imagem.

A solução para essa questão é a adoção do formato SVG (Scalable Vector Graphics) que embora já seja uma Recomendação do W3C ainda não é largamente usado e limita-se a construções gráficas, inviabilizando, na maioria dos casos o uso do formato SVG

Assim, se você optou por construir o topo do seu site com uso de uma bela foto JPG e pretende servi-la em toda sua largura independentemente da resolução da tela do usuário, antes de tentar uma solução que envolva uso de scripts e manipulação das dimensões da imagem, vale a pena tentar uma solução simples que consiste no seguinte:

Vamos supor que a imagem do topo ocupará toda a largura da tela, independentemente da largura ocupada pelas colunas do site. Isto é, podemos ter uma site com largura fixa (800px, 1000px etc) e topo elástico ou site com largura e topo elásticos.

Qualquer que seja a largura do layout do site (fixa ou estática) a imagem JPG que você irá usar deverá ter uma largura inicial (boa resolução) em torno de 1200px;

A imagem deverá ser inserida na marcação HTML e não como imagem de fundo com uso de CSS, conforme mostrado a seguir:

<div id="topo">
    <h1>Nome do site <br />
    <small>texto inserido na marcação </small></h1>
    <p>Mais texto na marcação</p>
    <img src="topo.jpg" alt="topo" />
</div>

<div id="conteudos">
    <h1>Conteúdos do site </h1>
</div>

Para a marcação mostrada defina as seguintes regras de estilos:


Notar que textos constantes do topo do site podem ser inseridos na marcação HTML e posicionados convenientemente no topo.

Agora só resta verificar na prática se as distorções da imagem são aceitáveis, redimensionando a janela do navegador.

Nesse link você encontra uma página demonstrando a técnica explicada nessa matéria.

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.

Esta matéria foi publicada em: 2012-04-30 (segunda-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2012/04/30/topo-elastico-para-seu-site/trackback no seu site.

9 comentários na matéria: “Topo elástico para seu site”

  1. Rodolfo sitesNo Gravatar disse:

    Muito bom, Maujor! Seus tutoriais sempre me foram muito esclarecedores, agradeço imensamente por compartilhar seu trabalho e experiências conosco.

    Parabéns, bom trabalho!

  2. Victor GuimarãesNo Gravatar disse:

    Parabéns pelo post, mas estou com um problema: a imagem de capa ocupa o centro da tela, mas com umas bordas nas laterais e uma no topo. Quero colocar este cabeçalho como um mapa de imagem que ocupe todo o navegador quando o visitante chegar no site. Estas bordas estão me atrapalhando. Por último gostaria de saber se o visitante, em qualquer resolução de tela/navegador, irá ver a imagem nas proporções corretas.

  3. AlexandreNo Gravatar disse:

    Muito boa dica.
    parabéns.

  4. BragaNo Gravatar disse:

    Excelente dica, excelente blog.
    Parabéns

  5. melhor do brasilNo Gravatar disse:

    Obrigadao amigo
    excelente post, adorei

  6. Sandro3aNo Gravatar disse:

    Muito boa a dica. Mas eu gostaria de tirar uma dúvida, estou montando um blog para mim e gostaria de colocar uma imagem bitmap como background fixa mas que se encaixasse dependendo da resolução usada pelo internauta. Seria mais ou menos igual a essa dica mas não estou conseguindo fazer se poder me ajudar ficarei agradecido. abc e até a próxima.

  7. @RaphaelPiltzNo Gravatar disse:

    Caro sr. Maujor.
    Seu blog arrebenta! 😉

  8. AndersonNo Gravatar disse:

    Muito bom, valeu!!!!

  9. Alessander RakerNo Gravatar disse:

    Excelente artigo. O pai da simplicidade nos ensinando mais uma vez.

    Muito obrigado por mais este artigo sr maujor

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo