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.
h1: coloque o seu nome;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;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!
Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…
Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…
Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…
HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…
Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…
Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…
View Comments
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!