Teste seu conhecimento 11
Publicado em: 2009-11-16 — 5.165 visualizacoes
Imagens fixas na tela
DESAFIO ENCERRADO Confira as soluções.
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.
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:
- Não pode alterar o HTML fornecido, exceto o conteúdo do elemento
h1: coloque o seu nome; - Os elementos
h1,peada 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 emh1e faça de conta que não existem elementos na seçãobody; - Considerar que as dimensões das imagens são desconhecidas;
- A renderização deve ser no Firefox 3x;
- Desenvolva sua solução colocando o HTML e as imagens em uma mesma pasta (Não crie subpasta imagens);
- 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!
----------------x-x-x--------------- fim da matéria ---------------x-x-x---------------
Livros do Maujor
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 http://www.maujor.com/blog/2009/11/16/teste-seu-conhecimento-11/trackback no seu site.
Pode usar jquery, yahoo ui, java script? Sim, não?
Opa! Vou entrar nessa também!
E desta vez, vou me atentar ao charset quando salvar o arquivo, como você me explicou ^_^ v
@Mozies
Se não pode alterar o HTML, então como você vai inserir os scripts na página?
Resumo: a resposta é não.
Vamos lá para mais um teste!
Valeu Maujor!
Mandei, espero que aceite minha solução!
Só testei no Firefox 3.5…
Não posso usar a altura da imagem?
Se melhorar a minha pergunta vão saber do que estou falando.
Lucas Colombo
A regra 3 é clara!
Não pode usar as dimensões das imagens.
Mandei outra solução que não usa as dimensões da imagem
Tenho nem idéia de como começar, vou esperar sair o resultado pra ver… :/
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 é?
Definir altura para
bodysupõ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.
@Alexandre
Eu tb usei o CSS3 simples igual você e sem resultado no FF :/
Vo ter que pensar em outra coisa D:
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.
Também tentei com css3,mas somente o safari tem suporte a múltiplas imagens com background…atualmente.
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
lol,consegui sem usar css3 e claro sem acrescentar nada na marcação nem estilizar p ou h1,mandarei.
humm,equivoquei-me de acordo com a regra :3 Considerar que as dimensões das imagens são desconhecidas;
hehe,é ta foda !
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.
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.
é … tentei tentei mas não consegui =/
esperarei pelo resultado =P
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.
Acho que consegui. A regra mais difícil pra mim foi a 2.
gostei desse desafio estou quebrando a testa (risos) TESTANDO..
=) vou fazer…
Consegui na segunda tentativa =D
Solução mais simples impossivel rsrsrs
Ótimo teste ;D
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…
Sei não, mas acho q essa solução não usa mais que 30 caracteres de css
Também não deu em nada usando border-image…
Já estou achando que não tem nada a ver com CSS3…
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?
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?
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.
Dicas? Consegui solucionar apenas no Safari 4 até o momento.
@Luciene
Não.
Leo
O desafio não é para Safari.
*especulando* também acredito que a solução seja mais simples do que a maioria está tentando fazer…
Vamos ver…
Vou começar a parar de procurar com CSS3, porque não vai dar pra fazer funcionar no Firefox desse jeito.
Vai ver que ele pediu a solução para o Firefox 3.x para ninguém ficar tentando background com múltiplas imagens…
estou desistindo dessa … não me ocorre uma opção sem saber o tamanho da primeira imagem
Putz, já consegui 2 soluções… qual delas será a correta??
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?
Acabei de enviar uma solução. Não achei legal o que eu fiz, mas que funcionou, funcionou…
Também acabei de achar uma solução, espero que essa vingue.
tem como apenas me dizerem se usaram ou não css3?
Não utilizei nada de diferente…. =) vou enviar…
Desasfio encerra hoje (16/11/2009) às 19:00h Brasília.
É… 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.
Ai ai ai pessoal… Apelei pra pseudo class e muitas outras coisas nada ve…
Tenho 48 minitos ainda.
To tentando.
Tá feito! Quero ver se tá aceitável e certo!! =P
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
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
Nossa,quase acertei,as 6:30 estava lendo sobre as pseudo-classe :before e :after,mas não deu tempo
nao sabia dessas pseudo-classes O_O”
* correndo e estudando mais css *
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!
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!
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?
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?
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!
Esse foi fera… Eu desconhecia a peseudo content…. =D
Tenho que prestar mais atenção quando ler KKKKKKKKK
Esperando o proximo desafio =D
Porque as figuras não estão à direita e juntas? isso não contava no desafio?
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
Aproveito pra mais uma sugestão: desafios também com jQuery, por favor!
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
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!
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:
@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?
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!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.
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.
@Alessandro
Leia no post o item 4 das Regras Gerais!
OK.. desculpe. É que estando na página inicial do Blog, cliquei diretamento no link de “Resultados” e as figuras não carregaram.