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

Teste seu conhecimento 11

Publicado em: 2009-11-16 — 18.675 visualizacoes

Imagens fixas na tela

DESAFIO ENCERRADO Confira as soluções.

screenshot

Leia com atenção o post. Soluções contrariando qualquer item do post não serão consideradas. Atenção especial para a forma de nomear e enviar o arquivo.

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.

A imagem acima é um screenshot do que se pretende obter. Duas imagens, uma embaixo da outra no canto superior direito da tela, na posição e disposição exata como mostrado na figura. As imagens devem permanecer no lugar mesmo que o usuário redimensione a janela do navegador.

Você deverá fazer o download das duas imagens a seguir e usá-las exatamente como estão sem editar ou mudar o nome.

imagem vermelha imagem vermelha

Neste desafio a marcação HTML é fornecida a seguir. Você deverá usar esta marcação e não pode retirar ou acresentar nada na marcação fornecida exceto acrescentar as regras de estilo para obter o efeito e colocar seu nome no elemento h1.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Teste seus conhecimento 11 - Proposta de solução</title>
<style type="text/css">
* {margin:0;padding:0} 
/* Acresente suas regras de estilo aqui */
</style>
</head>
<body>
<h1>Coloque seu nome aqui</h1>
<p><a href="#">Anterior</a> | <a href="#">Próximo</a></p>
</body>
</html>

OBS: Use os ícones do canto superior direito do quadro acima para baixar a marcação HTML.

Regras gerais:

  1. Não pode alterar o HTML fornecido, exceto o conteúdo do elemento h1: coloque o seu nome;
  2. Os elementos h1, p e a da marcação são para facilitar meu trabalho na navegação da publicação dos resultados e você não poderá definir regras CSS para estes elementos. Apenas coloque seu nome em h1 e faça de conta que não existem elementos na seção body;
  3. Considerar que as dimensões das imagens são desconhecidas;
  4. A renderização deve ser no Firefox 3x;
  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), não envie as imagens e não zip o arquivo;

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.

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!

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

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

69 comentários na matéria: “Teste seu conhecimento 11”

  1. AlessandroNo Gravatar disse:

    OK.. desculpe. É que estando na página inicial do Blog, cliquei diretamento no link de “Resultados” e as figuras não carregaram.

  2. MaujorNo Gravatar disse:

    @Alessandro
    Leia no post o item 4 das Regras Gerais!

  3. AlessandroNo Gravatar disse:

    Porque as figuras das páginas com as soluções do desafio 11 não estão aparecendo no meu Internet Explorer 7.0.5730.13 no Windows XP ??? elas só estão aparecendo no meu Firefox 3.6.2.

  4. MaujorNo Gravatar disse:

    Eu gostaria muito que fosse diferente, mas lamentavelmente os desafios serão somente de CSS e mesmo assim condicionados a minha disponibilidade de tempo que não é muita.

  5. Ciro NunesNo Gravatar disse:

    Lembrando que o pseudo-elemento :before não é uma pseudo-classe. Infelizmente cheguei tarde nesse desafio, mas o próximo estarei firme. hehehe. Parabéns a todos e vamos continuar estudando!

  6. Vagner AnicetoNo Gravatar disse:

    @Luciane Carvalho “Vagner, as figuras devem estar à direita e uma abaixo da outra… vc esta vendo de outra forma?
    Não se esqueça que este desafio era para FF 3.x”

    Agora eu entendi. Estava o tempo todo usando o Firefox 3.0.14 no linux (Mandriva 2009.1) e nenhuma, nenhuma mesmo das soluçẽs renderiza corretamente. Em todas as imagens ficam à esquerda e não à direita. podem testar, e somente na solução(muito boa por sinal) do Matheus o texto não fica entre as imagens. No Firefox no windows funciona normalmente. Por isto eu estava quebrando a cabeça. Para jogar as imagens para esquerda no firefox no linux tem que usar display:block; text-align:right e é muito mais difícil não burlar a regra 2.

    Maujor, como as engines de renderização dos navegadores podem se comportar de maneiras diferentes em sistemas operacionais diferentes, tem como especificar isso se houver outros desafios(ex: tem que funcionar no firefox 3.x no windows)?

    Outra coisa, será que rola alguns desafios em Javascript/jQuery ou até mesmo PHP, para quem é programador possa participar?

  7. RaphaelDDLNo Gravatar disse:

    Nossa, essa foi nova, nunca tinha visto alguém usar (ou algum tuto sobre) before e after o.O

    Agora vou procurar mais especificamente sobre estes pseudo-classes..

    Muito bacana, fiquei de cara D:

  8. HazNo Gravatar disse:

    Ah tá! Entendi por que meus comentários estavam sendo apagados, eu tava falando desses :before e :after. Achei que não era essa a solução porque tentei de diversas formas, mas devo ter feito alguma coisa errada.

    De qualquer forma, valeu Maujor, deu pra aprender DEMAIS com esse desafio. Continue com eles.

    E vai a minha dica, que tal um MaujorDesafia.com? Assim, quando a gente quiser desafio a gente já sabe aonde ir!

  9. Rhamsés SoaresNo Gravatar disse:

    Esse desafio foi dificil mesmo. Eu vou estudar a solução para entender ela completa.

    @Leobaltar – Apoiado cara. Seria legal ter uns desafios de Jquery também….daqui a pouco o maujor vai ter que lançar o site de desafios né?! Fica a dica

  10. Leo BalterNo Gravatar disse:

    Aproveito pra mais uma sugestão: desafios também com jQuery, por favor!

  11. Luciane CarvalhoNo Gravatar disse:

    Vagner, as figuras devem estar à direita e uma abaixo da outra… vc esta vendo de outra forma?
    Não se esqueça que este desafio era para FF 3.x

  12. Vagner AnicetoNo Gravatar disse:

    Porque as figuras não estão à direita e juntas? isso não contava no desafio?

  13. KinrpgNo Gravatar disse:

    Esse foi fera… Eu desconhecia a peseudo content…. =D

    Tenho que prestar mais atenção quando ler KKKKKKKKK

    Esperando o proximo desafio =D

  14. Marcelo ContiNo Gravatar disse:

    Olá. Infezlimente não consegui participar por causa do tempo.
    Muito curto e imprevissivel. A ação foi muito boa e acompanhei a divulgação.

    Gostaria de ver o resultado!
    Valeu!

  15. Luciane CarvalhoNo Gravatar disse:

    Parabéns pelo desafio, realmente muito bom!!!
    Leandro, eu acho ideal ter um dia específico, mas a duração poderia ser de 24 horas….
    O que acha Maujor?

  16. LeandroNo Gravatar disse:

    Parabens pelo desafio. O que eu mais gostei até agora.
    A galera participou bastante pena q poucos conseguiram.

    Fica a dica: os desafios poderiam ser tipo num dia determidado, por exemplo, toda segunda, aí teriamos segunda e terça pra fazer e quarta a resposta, ou algo do tipo. o q acham?

  17. Leonardo TavaresNo Gravatar disse:

    Maujor parabéns pelo desafio! As soluções apresentadas são todas interessantes. Matheus Eduardo mereceu o destaque.
    E que venha mais desafios do dinossauro das css 🙂
    Abraço!

  18. Leo BalterNo Gravatar disse:

    Tentei varios tipos de soluções nao cheguei a acertar, faltou pouquíssima coisa. Adorei o desafio. CSS não é meu forte e não sou webdesigner, mas acho bem importante sempre melhorar.

    Espero que o próximo tenha um nível de dificuldade bem similar. Foi uma tremenda distração produtiva.

    Valeu, Maujor!

  19. Marcelo de AndradeNo Gravatar disse:

    nao sabia dessas pseudo-classes O_O”

    * correndo e estudando mais css *

  20. Allan BorgesNo Gravatar disse:

    Nossa,quase acertei,as 6:30 estava lendo sobre as pseudo-classe :before e :after,mas não deu tempo

  21. MaujorNo Gravatar disse:

    Resultado do Desafio 11
    O desafio foi aberto por volta de meio-dia e fechado 7 horas depois.
    Neste intervalo tivemos mais de 1.300 acessos à matéria e 47 comentários.
    Foi estafante para mim, mas valeu pelo interesse e participação dos meus leitores. Recebi mais de 50 soluções.

    Os autores que enviaram a solução em acordo com as regras foram:
    André Krumm;
    Matheus Eduardo;
    Rafael de Almeida;
    Walter_Okuma.

    Destaque especial para a solução de Matheus Eduardo.

    Parabéns e muitíssimo grato a todos que participaram.

    Confira as soluções em http://zip.li/UEai

  22. Rui AndradaNo Gravatar disse:

    Mandei o meu também, mas acho que me equivoquei um pouco. mas não sei ao certo, vamos ver o que errei.
    Maujor valeu pelo desafio, próximo com certeza estarei dentro. agradeço muito ao seu trabalho porque, acredito que você ajuda muito as pessoas com suas atitudes.

    Tudo de Bom

  23. Luiz TiagoNo Gravatar disse:

    Tá feito! Quero ver se tá aceitável e certo!! =P

  24. KinrpgNo Gravatar disse:

    Ai ai ai pessoal… Apelei pra pseudo class e muitas outras coisas nada ve…

    Tenho 48 minitos ainda.

    To tentando.

  25. Alexandre Tavares SergioNo Gravatar disse:

    É… Minha solução não rolou. Agora tenho de ir para casa e esperar a publicação da resposta.

    O que percebi é que temos de colocar as duas imagens no mesmo container para poder flutuar com elas, uma ancorando a outra.

    Como fazer isso é que não consegui visualizar. Se pudesse editar o html seria tranquilo, mas ai o desafio não seria realmente um desafio, não é mesmo?

    Boa sorte aos que continuam tentando!

    Maujor, parabéns pelos desafios! Estou aprendendo muito com eles.

  26. MaujorNo Gravatar disse:

    Desasfio encerra hoje (16/11/2009) às 19:00h Brasília.

  27. Luciane CarvalhoNo Gravatar disse:

    Não utilizei nada de diferente…. =) vou enviar…

  28. Allan BorgesNo Gravatar disse:

    tem como apenas me dizerem se usaram ou não css3?

  29. Leo BalterNo Gravatar disse:

    Também acabei de achar uma solução, espero que essa vingue.

  30. Alexandre Tavares SergioNo Gravatar disse:

    Acabei de enviar uma solução. Não achei legal o que eu fiz, mas que funcionou, funcionou…

  31. Luciane CarvalhoNo Gravatar disse:

    Maujor, o que vc acha dessa idéia:
    Depois de corrigido os códigos vc postar os erros comentados? sem autor é claro… Assim podemos saber onde estamos errando e aprender com o erro… =) o que acha?

  32. Luciane CarvalhoNo Gravatar disse:

    Putz, já consegui 2 soluções… qual delas será a correta??

  33. PabloNo Gravatar disse:

    estou desistindo dessa … não me ocorre uma opção sem saber o tamanho da primeira imagem

  34. Luiz TiagoNo Gravatar disse:

    Vai ver que ele pediu a solução para o Firefox 3.x para ninguém ficar tentando background com múltiplas imagens…

  35. Leo BalterNo Gravatar disse:

    Vou começar a parar de procurar com CSS3, porque não vai dar pra fazer funcionar no Firefox desse jeito.

  36. HazNo Gravatar disse:

    *especulando* também acredito que a solução seja mais simples do que a maioria está tentando fazer…

    Vamos ver…

  37. MaujorNo Gravatar disse:

    @Luciene
    Não.
    Leo
    O desafio não é para Safari.

  38. Leo BalterNo Gravatar disse:

    Dicas? Consegui solucionar apenas no Safari 4 até o momento.

  39. Matheus EduardoNo Gravatar disse:

    Consegui! Mas não pode contar como.. =X
    Bom, não precisei de CSS3 pelo menos, tentei usar umas propriedades do 3 só pra ficar melhor, mas nem precisa.

    To aguardando resultados pra ver como seria diferente do que eu fiz.

  40. Luciane CarvalhoNo Gravatar disse:

    Opsss.. esqueci e escrevi a tag corretamente.. =)
    Vai a pergunta novamente
    Dependendo o css, é possível ( indiretamente ) mudar a posição das tags e . Existe algum padrão de posição para essas tags? Por exemplo: As imagens devem ficar acima dessas tags, ou ao lado, sei la!
    Existe?

  41. Luciane CarvalhoNo Gravatar disse:

    Dependendo o css, é possível ( indiretamente ) mudar a posição das tags e . Existe algum padrão de posição para essas tags? Por exemplo: As imagens devem ficar acima dessas tags, ou ao lado, sei la!
    Existe?

  42. Alexandre Tavares SergioNo Gravatar disse:

    Também não deu em nada usando border-image…

    Já estou achando que não tem nada a ver com CSS3…

  43. Fábio EmersonNo Gravatar disse:

    Sei não, mas acho q essa solução não usa mais que 30 caracteres de css 😉

  44. Alexandre Tavares SergioNo Gravatar disse:

    Esse está realmente difícil, mas sinceramente, até que pode vir a ser útil em um projeto que estou criando para a reformulação do meu site pessoal.

    Ainda não achei a solução, mas acho que vai além do background… Só não sei onde ainda…

  45. Renzo de SáNo Gravatar disse:

    Consegui na segunda tentativa =D

    Solução mais simples impossivel rsrsrs

    Ótimo teste ;D

  46. Luciane CarvalhoNo Gravatar disse:

    =) vou fazer…

  47. Felipe BorcardNo Gravatar disse:

    gostei desse desafio estou quebrando a testa (risos) TESTANDO..

  48. Vagner AnicetoNo Gravatar disse:

    Acho que consegui. A regra mais difícil pra mim foi a 2.

  49. Marcos PaivaNo Gravatar disse:

    Na verdade, creio que seja mais facil que isso senhores.

    Com uma imagem inserida no html e a outro no body, o real problema é que “não conhecemos o tamanho das imagens”….rsrs

    Realmente aí complica um pouco….creio que seja isso.

  50. John GóesNo Gravatar disse:

    é … tentei tentei mas não consegui =/
    esperarei pelo resultado =P

  51. MaujorNo Gravatar disse:

    Pessoal.
    Mais uma vez! Vamos ler as regras do desafio antes de enviar as respostas.
    Parem de enviar soluções com uso de medidas CSS para background, width, height, pois as dimensões das imagens são desconhecidas.
    No h1 é para colocar somente seu nome. Por que estão colocando @, links para seu site, etc????
    Por que estão enviando as imagens com a solução????

    O desafio é para o Firefox 3. Então não interessa soluções para Chrome, Safari, IE, Konqueror.

  52. HazNo Gravatar disse:

    O tenso é a regra 3. :/
    Fico pensando se não tem nada a ver com as propriedades -moz-, dei uma olhada na documentação, mas não encontrei nada muito útil.

  53. Allan BorgesNo Gravatar disse:

    humm,equivoquei-me de acordo com a regra :3 Considerar que as dimensões das imagens são desconhecidas;

    hehe,é ta foda !

  54. Allan BorgesNo Gravatar disse:

    lol,consegui sem usar css3 e claro sem acrescentar nada na marcação nem estilizar p ou h1,mandarei.

  55. RaphaelDDLNo Gravatar disse:

    O FF 3.6 também. E como o maujor pediu FF3X, x considera-se qualquer sub-versão, ou seja, rola fazer para o 3.6 😀

  56. Allan BorgesNo Gravatar disse:

    Também tentei com css3,mas somente o safari tem suporte a múltiplas imagens com background…atualmente.

  57. Vagner AnicetoNo Gravatar disse:

    A primeira coisa que pensei foi em usar multiplos backgrounds também, mas ví que não ia rolar. Estou tentando outra coisa agora.

    Maujor, tem um caracter acentuado sem estar codificado e o charset é iso. Não era para ser utf-8? Acabei de abrir o código aqui para começar a tentar e já não renderizou direito.

  58. RaphaelDDLNo Gravatar disse:

    @Alexandre
    Eu tb usei o CSS3 simples igual você e sem resultado no FF :/
    Vo ter que pensar em outra coisa D:

  59. MaujorNo Gravatar disse:

    Definir altura para body supõe conhecimento das dimensões da imagem, portanto não pode!
    Vou dar uma segunda chance para quem eviou e errou.
    Até agora uma solução certa.

  60. Alexandre Tavares SergioNo Gravatar disse:

    Tentei com o CSS3, com múltiplas imagens para o background, mas o Firefox aqui não mostrou o resultado.

    O Chrome entendeu direitinho o código…

    Seria muito melhor se os navegadores conversassem pura e simplesmente através do W3C, não é?

  61. CaioNo Gravatar disse:

    Tenho nem idéia de como começar, vou esperar sair o resultado pra ver… :/

  62. RafaelNo Gravatar disse:

    Mandei outra solução que não usa as dimensões da imagem

  63. MaujorNo Gravatar disse:

    Lucas Colombo
    A regra 3 é clara!
    Não pode usar as dimensões das imagens.

  64. Lucas ColomboNo Gravatar disse:

    Não posso usar a altura da imagem?

    Se melhorar a minha pergunta vão saber do que estou falando.

  65. RafaelNo Gravatar disse:

    Mandei, espero que aceite minha solução!

    Só testei no Firefox 3.5…

  66. Mateus Manosso BarszczNo Gravatar disse:

    Vamos lá para mais um teste! 😀

    Valeu Maujor!

  67. MaujorNo Gravatar disse:

    @Mozies
    Se não pode alterar o HTML, então como você vai inserir os scripts na página?
    Resumo: a resposta é não.

  68. RaphaelDDLNo Gravatar disse:

    Opa! Vou entrar nessa também!
    E desta vez, vou me atentar ao charset quando salvar o arquivo, como você me explicou ^_^ v

  69. MoziesNo Gravatar disse:

    Pode usar jquery, yahoo ui, java script? Sim, não?

Comentário:





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

Subscribe without commenting

topo