Teste seu conhecimento 13

Figuras com textos descritivos

DESAFIO ENCERRADO Confira as soluções.

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

Estamos de volta com mais um desafio, o primeiro do ano de 2010. E veio bem a tempo, pois (infelizmente) neste País o ano só começa depois do Carnaval. Como sempre, 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 de dimensões desconhecidas e suas respectivas descrições, uma ao lado da outra com o respectivo texto descritivo ocupando a largura da imagem (lembre-se: a largura da imagem é desconhecida, ou seja, você não pode medir a imagem e definir a medida do texto). O resultado final deve ser uma renderização como mostrado na figura a seguir.

.

Download do HTML e imagens para o Desafio

Regras gerais:

1. 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);
2. Considerar que as dimensões das imagens são desconhecidas, isto é se forem inseridas imagens maiores a solução apresentada é válida;
3. Use somente regras CSS para obter o efeito proposto;
4. A renderização deve ser no Firefox 3.5.8 e IE7+
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: desafio13 (exatamente isso: desafio13).

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: desafio13 (exatamente assim: desafio13).

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!