Áreas nas laterais do site

DESAFIO ENCERRADO Confira as soluções.

Leia com atenção o post. Soluções contrariando qualquer item do post não serão consideradas.

Vamos fazer este desafio focado para um “exercício de aprendizado e lazer”, deixando de lado as considerações de acessibilidade, uso na prática ou mesmo utilidade do exercício. Assim o objetivo é exercitar suas habilidades com CSS, procurando uma solução com uso da marcação HTML fornecida.

Este desafio consiste em posicionar duas imagens nas laterais de um site hipotético com 600px de largura, mas ao redimensionar a tela, não poderá aparecer barra de rolagem horizontal antes que a redução da largura da tela atinja os 600px. O resultado final deve ser uma renderização como mostrado nestas figuras. Atenção para a margem superior igual a zero!

Download do HTML e imagens para o Desafio

Regras gerais:

1. Não poderá aparecer barra de rolagem horizontal antes que a redução da largura da tela atinja os 600px;
2. A marcação HTML da página é fornecida e nela nada pode ser alterado, acrescentado ou suprimido exceto o texto do elemento h1. Substitua o texto existente (“Digite seu nome aqui”) pelo seu Nome e Sobrenome (se colocar links, @s, apelidos, etc; será desclassificado);
3. Considerar que as dimensões das imagens são desconhecidas, isto é se forem inseridas imagens maiores a solução apresentada é válida;
4. A renderização deve ser no Firefox 3.5.5+ e IE7+ Contudo no IE poderá haver a barra de rolagem antes dos 600px;
5. Desenvolva sua solução colocando o HTML e as imagens em uma mesma pasta (Não crie subpasta imagens);
6. Envie somente o arquivo com Seu_Nome.html (não use .htm e capitalize a primeira letra), não envie as imagens e não zip o arquivo;
7. O assunto do email encaminhando a solução deverá ser: desafio12 (exatamente isso: desafio12).

Putz! Cada regra boba Maujor! É, mas elas visam a facilitar meu trabalho de análise e publicação dos resultados. Por exemplo: arquivo com o nome do autor facilita identificar instantaneamente quem enviou. Colocar .html no lugar de .htm facilita montar a navegação pelos trabalhos. Padronizar para facilitar.

Alguma dúvida? Poste nos comentários.

Se você encontrar a solucão mande via email um arquivo gravado com o Seu_Nome.html (por exemplo: Jose_da_Silva.html) para maujorcss[arroba]maujor[ponto]com. E, não poste a solução nos comentários, para que outros possam tentar.

Coloque no Assunto do email que você enviar-me com a solução proposta a palavra: desafio12 (exatamente assim: desafio12).

Dependendo da quantidade de soluções recebidas decidirei quando postar a solução e informar os autores com solução certa.
Ah! não se esqueça que você pode se inscrever para receber email informando quando novos comentários forem postados nesta matéria e assim acompanhar o esclarecimento de eventuais dúvidas surgidas, a publicação dos nomes de autores com solução certa e o resultado final.

Divirta-se!

Esta matéria foi publicada em: 2009-12-3 (quinta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2009/12/03/teste-seu-conhecimento-12/trackback no seu site.