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 13

Publicado em: 2010-02-22 — 13.053 visualizacoes         

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.

imagem da renderizaçãop final.

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!

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: 2010-02-22 (segunda-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2010/02/22/teste-seu-conhecimento-13/trackback no seu site.

25 comentários na matéria: “Teste seu conhecimento 13”

  1. Marcelo Mello RamosNo Gravatar disse:

    Muito bom post.

  2. eder proteçãoNo Gravatar disse:

    Preciso de um livo sobre html5 simples e completo.
    Tem alguma sujestao

  3. Rodrigo SuzartNo Gravatar disse:

    Parabens pelo seu blog. esta maravilhoso.

  4. Portao automaticoNo Gravatar disse:

    Parabens pelo blog!!

  5. ArthurNo Gravatar disse:

    Maujor,
    tiro munhas duvidas seu site e blog a muito tempo. Eles têm me salvo muitas vezes com dúvidas sobre CSS.
    continue com seu trabalho, da uma visitada no meu blog

    Um forte Abraço
    Vlw

  6. marcelo portoesNo Gravatar disse:

    Estava indo bem mas quando coloquei tudo na mesma pasta o html não econtrou as imagems

  7. TransportadorasNo Gravatar disse:

    Parabens pelo seu blog
    Ana

  8. BrunoNo Gravatar disse:

    As imagens precisam estar alinhadas dulado das outras

  9. IuriNo Gravatar disse:

    Adorei o blog , muito construtivo e crítico, vou deixar meu site se quizerem dar uma ocnferida:
    Pop Radio Mix – Musicas Gratis – Radio Online – Tubarao Santa Catarina – Músicas Grátis

  10. FernandoNo Gravatar disse:

    Não acredito que eu não pensei no position:absolute..

  11. carlosNo Gravatar disse:

    Parabens pelo seu blog

  12. DaianeNo Gravatar disse:

    Aprendendo mais uma, eu tentei algumas coisas há alguns dias, mas não cheguei na idéia do float:left; bacana. =)

  13. MaujorNo Gravatar disse:

    Desafio encerrado.
    Tivemos 4 soluções certas.
    Publicado o resultado neste link.

  14. Erick Major dos SantosNo Gravatar disse:

    Olá Maujor,
    acompanho seu site e blog a muito tempo. Eles têm me salvo muitas vezes com dúvidas relativas as CSS. Mas neste momento gostaria de propor um desafio para todos daqui do seu blog. Trata- se de gerar um botão com bordas arredondadas e com uma imagem dentro, imagem que define o propósito do botão. Há soluções na internet usando links, porém creio que o botão deve ser feito utilizando “input button” e “label”, que ao meu ver, mantém a semântica da web.
    Espero que tenha gostado da minha sugestão.
    Sucesso em seu site. Forte abraço!

  15. Juliano DasilvaNo Gravatar disse:

    Compreendo. Pior que já é mania. Na minha cabeça não tem como ser um designer e não pensar no usuario primeiro. Proxima vez, eu vou cumprir o desafio ao pé da linha. Brigado! P.S: Estou curioso para o resultado. Tá pior que resultado de vestibular.

  16. MaujorNo Gravatar disse:

    Juliano
    Soluções certas são aquelas em acordo com as regras do desafio.
    Observe que no texto da matéria está escrito:
    *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, para participar, há que se respeitar as regras do desafio, sejam elas quais forem.
    Este é o espírito do desafio!

  17. Juliano DasilvaNo Gravatar disse:

    Falta de atenção somente em relação a renderização. Leve em conta que quando faço qualquer markup penso muito em varias situações como por exemplo resolução da tela da menor a maior. Você irá falar sobre as soluções certas e porque são certas?

  18. MaujorNo Gravatar disse:

    Maicon, Matheus e Juliano
    As regras não deixam dúvidas.
    Regra 4 – A renderização deve ser no Firefox 3.5.8 e IE7+
    Nada foi dito de cross-browser, Safari, IE6 etc.

    Regra 2 – Não pode definir dimensões de imagem.

    Notar que existe um screen-shot mostrando como deve ser a posição das imagens e textos.

  19. Maicon PintoNo Gravatar disse:

    As imagens precisam estar alinhadas uma ao lado da outra?

  20. Matheus MatosNo Gravatar disse:

    Maujor, a regra número dois não entendi direito.
    Pode-se definir tamanho as imagens?

    Isso quer dizer que eu posso definir tamanhos maiores para as imagens?

  21. Juliano DasilvaNo Gravatar disse:

    Tem que ser cross-browser ou seja funcionar em todos os browsers tipo ie6, ie7, safari, firefox?

  22. MaujorNo Gravatar disse:

    @Jose Henrique
    A renderização é igual no Firefox e IE.

  23. José HenriqueNo Gravatar disse:

    Majour você poderia postar screen do resultado renderizado no ie7 também!

    Meu resultado foi apenas atingido no firefox!

  24. MaujorNo Gravatar disse:

    @Carlos
    Leia as regras e em especial a regra 1.

  25. CarlosNo Gravatar disse:

    Poço colocar id’s ou class nas tags html?

Comentário:





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

Subscribe without commenting

topo