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

Você está no BLOG do Maujor. IR PARA O SITE

Teste seu conhecimento 12

Publicado em: 2009-12-3 — 10.311 visualizacoes         

Á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!

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

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.

Um comentário na matéria: “Teste seu conhecimento 12”

  1. MaujorNo Gravatar disse:

    Desafio encerrado
    Relação dos autores que apresentaram a solução certa:
    Alexandre Oliveira;
    Cláudio Sambuichi;
    Erik Wilder de Oliveira;
    Giovanni Pires da Silva;
    Júlio Greff;
    Luiz Tiago de Oliveira.

    O autor Abdias Cleison (centrou os textos Lorem ipsum) e a autora Daniela Alves (não capitalizou o nome do arquivo) acertaram a solução, mas foram desclassificados por infringir as regras.

    Ver soluções neste link

Comentário:





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

Subscribe without commenting

topo