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